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
Related
I'm trying to set an h3 tag to be inline, but no matter what rule I use in CSS, the box model in Inspector is displaying display: block.
.widget_title {
display:inline;
float:left;
}
Any ideas to why this is?
That looks simple: you use float property on inline element which forces inline element to become a block element.
Read this CSS specs to learn more.
Essential part is here:
left
The element generates a block box that is floated to the left.
Content flows on the right side of the box, starting at the top
(subject to the 'clear' property).
When you use float, position absolute or fixed on an element you force this element out of the normal flow. When an element is out of the normal flow, display: inline or inline-block for that matter, do not make any sense. This is why elements out of the normal flow are considered as block elements, whatever their display css property is.
This is an old but interesting article about floats.
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. ;)
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.
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.
removed
So if you look at the tabs and look at hw2, you'll notice it has a little extra spacing that overlaps the spacing on the right. That's because wrapped the div in the <li>. You will notice the others not having it. I don't understand why is it making that extra little spacing after I wrap it.
Just for the record, this is for CSS spacing which has nothing to do with the JS.
Update: I found a ghetto work around!
Is it a space (or the absence of one)?
display: inline will respect whitespace.
You are putting a block level element (div) inside an inline element (li), which is invalid. Most browsers do a reasonable job of rendering this sort of thing, but the results are unpredictable.
I would suggest using divs for the higher level menu. You could use a container div for the menu and float divs within that for the individual tabs.
I ended up just changing the css for that page.