I am still trying to get sprites to work right, and continue to be confused, since I can't seem to find an example matching what I want. Basically I have a series of 16x16 icons that need to go in row. I don't seem to be able to find the right element to use and set the background image on.
I have tried divs, and they work in block mode, but not inline mode. I have tried span, a, li and many others. All these set in display:inline don't allow me to set the element width, and so I get a few pixels of background image only. If I put in a few nbsp it will work, but that hardly seems to me to be the right solution.
Is there a URL that has a little series of icons in a line that use sprites for their background images? Preferably elements that I can do :hover on?
If you have to use display:inline then you have to put your elements inside a container. A common example is this:
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
Set the li elements to display:inline and the a elements to display:block. Then you can add a width to the a elements along with the sprite and the li elements force the a elements to sit horizontally.
You can find a tutorial using this method here.
Stackoverflow uses this technique. If you right click on the upvote/downvote arrows, and click view background image (in Firefox) you will be taken to the sprites image. From looking at the source code, they are using spans. You should be able to set the width and height of the span with CSS.
If you want, you can use to use
display: block; float: left;
and the elements will line up as if they are inline. You can then set the height and width with CSS as well.
Related
Menu width is set to 80% and centered. What I would like to happen is for the menu to be as responsive as other page elements, i.e. adjust it's size/width until the screen is a specific size (say 1200px or so), then split in half. When the screen width hits 910px or below, the menu collapses into a hamburger. That works correctly. What doesn't work correctly is that the slightest adjustment in screen size causes one or more of the "li" items to drop down a row. Is there a way to force the "li" menu to split in half (after the 4th item) at a certain screen size? I have tried many different combinations of ul li:nth-child(4) a commands, but nothing seems to have any effect.
On the appropriate screensize, set the .nav li width: 25% and float: left. Make your .nav a display:block
Make sure you clear the floats with a clear:both element, or a clearfix on the container.
I take it you want the buttons to always be in equal rows?
A simple approach for just a single split would be to put the buttons in to two divs with display:inline set, and use nonbreaking spaces to separate the buttons. That way, there is no breakpoint within the div so insufficient width should force the whole second div onto a new line.
Or, I could suggest splitting the buttons into two divs with default display:inline css, and if a split is needed on the basis of viewport width, then change the display property of one to block with js. That will force the rest onto a new line. Not tried it but in principle it should work.
As an interesting alternative, you can it seems separate the items with br tags which have display:none set. In which case they do nothing. Changing that to display:block activates the br, forcing a newline. I'm not sure if this is approved css but it works in FF and Chrome.
Scary subject, BTW. Had me cowering under the desk. ;)
With the advent of the 'nav' tag I'm revisiting the creation of a navigation bar. There are many tutorials but they take different approaches and cloud the issue with too much css.
Specifically, I have a 960 width content area and I want to centre the nav buttons within this.
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
If I'm centre-ing the buttons then surely I don't need to 'float' them? Text-align, centre for the ul should do the trick.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
Here's a fiddle with a few examples: http://jsfiddle.net/joplomacedo/ejSby/
Does the 'nav' element have any inherent css-behaviour, or is it purely a semantic-container?
The nav element is a purely semantic container. In terms of css it behaves as nothing more than a simple block level element like div.
If I'm centering the buttons then surely I don't need to 'float' them? Text-align, center for the ul should do the trick.
If you,re using an ul, like you're saying you do, than you'll need the li's too. The problem is li's have a display of block (actually, not block - list-item. In the ways we're interested in, they behave like block though) - and when you want to put block level elements side by side, then you'll always either need to float them, or change their display to inline (inline-block).
Either 'floats', or 'inline-blocking'. I tend to prefer using the "inline-block technique" for many reasons - one of them is that, centering the blocks, as you want to, is just a matter of setting text-align to center on the parent element.
If I want the buttons to be shorter than the nav-bar itself, should I give the bar a height (using line-height for the buttons to centre them) or add margins to the buttons to push the bar outwards (vertically)?
It seems simpler to add padding-top & bottom to the nav block, doesn't it?
So again, here's the fiddle: http://jsfiddle.net/joplomacedo/ejSby/
Im trying to change my ul li list to use it with background image & sprites, but i have this problem with background-repeat, what i'm missing?
http://jsfiddle.net/R7MU4/
Since your sprite is tiled vertically, you need to use an element that will have a height equal to that of each of the sprite images.
One option is to use another element, like a span, and apply the background to that.
http://jsfiddle.net/mestekweb/R7MU4/2/
You could also apply the style to the link element.
http://jsfiddle.net/mestekweb/R7MU4/3/
In both cases, you'll have to adjust the margins and padding of the lists and/or links to compensate.
This looks a lot easier than I am probably making it sound. I have a content div, 600px wide. It is constantly, for the sake of this argument, in the middle of my page. It is set in the middle using
margin: 0px auto;
In the top right hand corner of this div, I have set a second div, which contains options (it will be share options, such as Facebook, Twitter, etc.). It is currently controlled using CSS, no Javascript. When my cursor is away from the Options div, it remains as a button. When my cursor is over the Options div, it expands. I want for it to expand over my content, but for my content to still wrap around the original (in this case) 50px square box.
I have two test pages currently uploaded:
Test 1 - This displays the Options div in the correct place (set using float: right;), but when I roll over it, the content wraps around the reiszed div.
Test 2 - This makes sure my div floats over my content, but it is set using position: absolute, and it remains at the top right hand corner of the page.
I have missed something, I know I have. Are there any suggestions as to how I can get it working together? I would prefer solely CSS, but I am not opposed to Javascript, either standalone or using jQuery (I'd prefer that, since other scripts I use in my site use the jQuery framework). Code is 100% inline for this example, CSS is using and not tags, so if you wish to look, it's all there.
Test 2 would be perfect if you set position: relative; on the containing div and then added a spacer div that remained in the flow of the document: http://jsfiddle.net/sl1dr/GyvM4/
use z-index with absolute postion. Set the z-index to be higher than the content.
Try this fiddle
It's 1:30am where I am so this is not my best work. Hopefully it should be cross browser compatible.
note I changed #options to options for re-use.
http://jsfiddle.net/7T2c6/ I got it with no extra DOM. However I did move the location of the anchor tag. Outer div no longer provides style, just spacing. Inner elements are position absolute and provide all style. Just my variant. :)
Use position:absolute without defining a top/right/left/bottom value, and add a z-index value. This will keep it in an absolute position but since it's not really specified, it will remain at the required location, causing it to overlap other objects. Play with margin to move it around.
Hi I have some hyperlinks inside a div with display:block. Problem is that the hyperlinks length when clicked is equal to the div's width. How do I make the hyperlink's clicked length equal to the text of the hyperlink only without specifying width for each link ?
JSFiddle here
Use
#links a {clear:left;float:left}
The float will allow the link to be sized, and the clear will prevent the links from being on the same line.
You may need to add a clear:left to the #links container depending on your design.
EDIT
A little tutorial since you asked:
There are two types of elements, inline and block. Inline ones show in a line with no breaks. Block elements take up the whole line and move to the next one.
Inline elements can't have their width or height styled. Blocks can.
<a> is an inline element. By setting its display to block, you tell it to make a new line every time.
float gives elements inline behavior so they bump up next to eachother and flow over onto the next line. float also allows you to style the width/height of the element. It's sort of a mix between the two.
The clear attribute stops the inline floating and goes back to normal block behavior (new lines every time).
You won't need display:block and float: at the same time.
Another solution would involve display:inline-block, but this is not supported in several browsers so isn't encouraged (although I find it pretty handy).
set the link style to display:inline-block; (not supported in elder IE6) or float it with float:left; or float:right;
display: block; is what makes the link elements expand to their parent width. By default, link elements are in-line elements, not block elements.
Simply remove that declaration and your problem should be gone.
JSFiddle example
Do you mean something like this:
Foo
width:auto?
Or try
display:inline;
on the links
it shouldnt get the divs width then