At the example of YouTube.
Their logo comes in fact from a big master image containing other graphical elements. However one can click on the logo which point to the root of the site. I'm researching their HTML but still not quite sure how they achieved that.
Could anyone please look at it and maybe explain it?
It's basically just a button inside link with a background image, but with it's width and height constrained to only show the portion of the background image / sprite with the YouTube logo.
From their CSS:
#masthead #logo button {
background-position:0 0;
height:33px;
width:84px;
}
If you load it up in Firebug and change the height you will see more / less of the background image appear.
From their HTML source:
<button onclick="window.top.location.href='/'; return false;" class="master-sprite" title=""></button>
Related
Not sure where to look for an answer, but here's my quest:
http://www.mobiliteitsvisie.nl/
On this site I've made a one page parallax, but when scrolling the main text moves underneath the menubar, but the headers (h3 & h4) seem to move over it...
But where would I need to adjust this? In the .css or in the .js file?
Thanks in advance!
Ruud
Since you're problem is with the style you need to make a change to the CSS.
In your case you want to get the menu on top of all other objects. Just give the menu container a large z-index.
Add this to your css file:
header {
z-index: 100;
}
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with a lower stack order.
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
Additional question about the same site. When scrolling through the site, the menu-item should change with every slide it passes. At this moment the last clicked menu-item is highlighted, even when scrolling through to the several slides. Is there an easy way to make that work in CSS? Or would that be possible by just adding a jQuery.nav.js to the index.html?
I want to create the following UIView in my app. Please give the suggestion... I can create the UITextView and UIImageView separately. But In that image, Text is placed under the image. How to create this type of UI. Please guide me.. !
Thanks All
You have 2 options:
1) Using a UIWebView. That will allow you to easily achieve this but you might have problems on autorotation since UIWebView automatically scales your text when you make it's frame larger (which you would when you move to landscape) .
2) Or you can place 2 textViews - one of them on the left side of the picture and the other beneath the picture. In order to calculate what string fits in the first textView and what string is left for the second one you should take a look at this.
I recently tried the second way and although there's a small bug in those methods ( doesn't care for words , it splits the words by characters ) , the results were pretty good.
A possible solution could be using a Webview to show text as html and embed an image properly placed on right side.
If you want to use UIImageView separately (for other reasons, for example - with gesture recognizer, or easy image updating) - then you can create an empty floating space , and add imageview as a subview to webview.
for example:
[webView loadHTMLString:
[NSString stringWithFormat:"<style type=\"text/css\"><font face=\"Helvetica\" color=\"white\">"
"<style> #buttons {float: right; width: 150px; height:100px;}</style>"
"<div style=\"float:right;5px;top:1px;display:inline-table; position:relative; "
"width: 150px; height: 100px;\"><div style=\"float:right;right:170px;top:4px;display:inline-table; "
"position:relative; left:-8px; color: #fff; font-size: 13px;\"><p></p></div></p></div>"
"%#</font><div></body>", #"text that will show up around image" baseURL:nil];
will fill webview with text (#"text that will show up around image") and leave an empty space for UIImageView.
If it is the same piece of text that should flow around the image you can use CoreText to create a custom shaped TextView. When trying something similar myself I found this StackOverflow post to be a good starting point: https://stackoverflow.com/a/5284707/785716
Is it possible to put a background image, and/or modify the close button (X) in the sidebar's titlebar?
I know I can set the text value of it by changing sidebartitle="" but is there any way to put an image in there?
Basically I'd like to put my logo up there instead of inside the sidebar where real-estate is already limited.
I'd also like to be able to do this without modifying my profile CSS so that I can deploy the changes with the extension.
Any ideas?
I ended up finding the element within sidebar-box with the ID of "sidebar-header" and setting that to a variable named "sbhead".
I was then able to sbhead.style.display="none";
Finally in my overlay.xul I added an hbox tag as a new header and set the height to 25 pixels so it would look about the same as the tabs.
Inside the hbox I added the content I wanted, to include a close button that calls toggleSidebar() so that the functionality of the header was the same.
I hope this is helpful to someone!
I know about css sprites.. Now i want some examples of css sprites....
How did you manage to get css sprites work?
I usaully use the CSS background property. This property allows you to set a scroll argument of top and left as you can see in the example below. So the idea is to create one image with all states and simply position it based on the event like hover or other custom event in which you alter the elements CSS. I hope this helps.
.mySprite a
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 0 0
}
.mySprite a:hover
{
background: transparent url(/images/spriteButton.gif) no-repeat scroll 30 0
}
http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/
http://www.w3schools.com/css/css_positioning.asp
http://template.joomlart.com/ja_iris/index.php?option=com_content&view=section&layout=blog&id=4&Itemid=29
If you are using Firefox here is a simple way to get an idea of what a sprite is. Go to yahoo.com, right-click and View Page Info, click Media. Look for a file name having "sprite" in it.
This is one of the links:
http://d.yimg.com/a/i/ww/met/gsprite_071309.gif
You will see many background gradient images. You can use this file to play with. Now you have to adjust background position in your CSS depending on which background you want to use, like this:
background-image: url('http://d.yimg.com/a/i/ww/met/gsprite_071309.gif') left -30px repeat-x;
This should give you an idea of how to manage sprites.
If you are looking to create a CSS sprite - you can check out the site spriteme.org, which is very cool and shows you how to easily create a CSS sprite.
For a nice example you can check out this page:
http://www.programmerinterview.com/index.php/general-miscellaneous/css-sprite-example-and-tutorial/
Gives a good explanation and shows how the website owner uses a sprite.
I use them for button images. I use the top half of an image for the normal button state and the bottom half for the mouse-over state. That way the mouse over image is loaded when the page loads and there's no delay which just looks bad and slow. CSS code is here.
Check out this page:
http://www.tutorialrepublic.com/css-tutorial/css-sprites.php
It has a great interactive example and everything you need to know about CSS Sprite.
I'm pretty new to jQuery-UI, but I love what I see so far.I am using the 'blitzer' theme (as I needed red progress bars) and I have 4 progress bars side-by-side on one page. Now my PM wants one of them to be green, and bigger than the rest. I looked around the provided theme CSS but couldn't find the right tag to tinker with. Can anyone post a short code of 2 progress bars with different sizes/colors side by side?
Bonus question: I was asked to print the PB's percentage in the PB itself - no biggie - I just added a label inside the div. The problem is the text in the label is colored white, so if the PB is empty or half-empty, the text becomes invisible. Is there any way to control the background color of the PB, or is it a given inside a theme?
Thanks a lot!
Guy
This is how the bars are set up, so modify the classes inside them.
<div class="ui-progressbar ui-widget ui-widget-content ui-corner-all">
<div style="width: 37%;" class="ui-progressbar-value ui-widget-header ui-corner-left"></div>
</div>
(Its at the bottom of the badge)
Modify ui-progressbar and ui-progressbar-value.
Traveling Tech Guy:
If you look in the css folder of your jQueryUI download, you will find a theme folder; mine is called ui-lightness, yours is probably called ui-blitzer. Go into that folder, and then into the images folder. There, you will find some image files that start with the letters ui-bg_diagonals and ui-bg_gloss. These are the images that drive the progress bars. You should be able to add some images from another theme that are the colors you want, which will drive your other status bars.
In addition, there is a css entry called .ui-widget-overlay that references the image ui-bg_diagonals-thick_20_666666_40x40.png, which I think is the image that actually drives the progress bar. You will have to hack the css so that you can add a new class that references your new image in the other progress bar; I haven't figured out how to do that yet.