Do I need to manually specify the height of a div which contains unordered list?
When I have it like this, main1 and main2 div overlap if I don't set the height of the div. Is there a way of doing it without specifying the height?
<div id='main1'>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id='main2'>
<ul>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
have you tried with float property to float left or right?
#mail1 { float:left };
#mail2 { float:left };
Thanks
If they're overlapping, you've almost certainly got some other CSS applying to it. Use a debugging tool like Firebug for Firefox, the Developer Tools in Chrome/WebKit or the What's-It-Called Thingummy in IE, and look at the applied styles for the div/ul/li.
They won't overlap unless they're absolutely positioned or have other CSS magic applied to them, such as negative margins. Check that first and apply the necessary corrections.
Nonetheless, if you need to retrieve the dimensions of an element dynamically, for instance to dynamically position a highlight in a lava lamp-style menu, use jQuery:
$('#element').outerWidth();
$('#element').outerHeight();
Use position:relative property for two DIVs
Related
Ive got the following code:
<ul>
<a href="./index.php?profile=User1">
<li>User1 : 16</li>
</a>
<a href="./index.php?profile=User2">
<li>User2 : 4</li>
</a>
</ul>
This works perfectly fine in all major browsers, but it isn't allowed/invalid HTML and the right way should be this:
<ul>
<li>
User1 : 16
</li>
<li>
User2 : 4
</li>
</ul>
But if I do it like the second example only the text not the whole <li> is clickable like i want it to.
Should I stay with the invalid working version or has anyone a better solution?
Use CSS to make the link take up the entire list item, eg. display: block (and any other styling you might want).
Wrapping links around list items is invalid HTML.
Short answer is NO, it won't be validated, only li can be inside ul and ol elements.
So this is incorrect
<ul>
<a><li></li></a>
</ul>
This is fine
<ul>
<li><a></a></li>
</ul>
Anchor tag is inline element so make it block using display:'block' so that it will take full width of its parent i.e. li tag
The second way around is the correct way to do it, you just have some minor styling issues.
If you set the <li>'s to have no padding and the <a>'s to have no margin, the links will fill the entire area of the list item.
You have to use the valid way.
And set the "a" tag with :
display: block
http://jsfiddle.net/TYVV6/1/
And if you don't want to show the points at the beggining of the list elements.
You'll have to use :
list-style: none;
Please, is it possible to wrap the text of an <a> tag within a fixed size <li> tag in an inline menu?
Yes, as long as you use float: left on your <li> tags instead of display: inline. You're not supposed to use fixed width on inline elements.
Example: http://jsfiddle.net/CprcT/
I'm assuming you mean something like this...
<li>My Link</li>
In which case, technically yes... but why would you want to? Wouldn't it make more sense to do it the other way around like so...
<li class="menu">My Link</li>
Each link in the menu on the left has padding-left: 15px; the reason for this is so I can add a background image (the blue arrow).
But now, when the text wraps (see "Paintings, prints, and watercolours"), it ignores the padding.
After searching around I can't find any similar cases at all, is that because I am going at this wrong?
If what I have at the moment is fine, how can I fix the wrapping issue?
Padding only applies to block-level elements. Either assign your menu's a elements a display:block; or display:inline-block; to get them to respond properly to padding.
You should place the padding on a div instead - http://jsfiddle.net/qHGrJ/1/
Paddings don't work that way for span style elements. Alternatively you could probably use display:block on the link.
Given the way you're using these anchors you can just set them to display:block.
A more ideal way to mark up this menu (especially since you're using HTML5) would be to use a menu tag containing a list of links.
<menu>
<ul>
<li>My Menu Item</li>
<li><a href="mySecondMenuItem.html>My Second Menu Item</a></li>
</ul>
</menu>
This is more semantic and also gives you the li's as hooks to add a margin to.
Add display:block to your anchors. I would suggest against using inline-block as it isn't fully supported cross-browser (i believe IE7 and below).
Add display block on line 13 of view.css like so
#auction_cat_menu p a{ padding-left:15px; white-space:pre-wrap; display: block;}
I have made a list with few elements in it.
Now everything looks right, except image, if i try to add at least one image i get all list messed up, i could use div instead of img tag but i need to resize that image all the time.
Iv'e been at this four couple hours now and i just can't figure out what's causing this, here is my code: http://jsfiddle.net/QwcG5/1/ i hope some one can help me :)
Add vertical-align: middle; and it will be OK. http://jsfiddle.net/QwcG5/16/
I would also suggest replacing these divs
<div class="verify_list_block">1</div>
with li's and enclosing the whole thing in a separate ul. seems cleaner that way.
<li class="verify_list_item">
<ul class="info">
<li class="verify_list_block">1</li>
<li class="verify_list_block">3</li>
<li class="verify_list_block">4</li>
<li class="verify_list_block">5</li>
</ul>
</li>
see the fiddle and demo:
Fiddle: http://jsfiddle.net/QwcG5/13/
Demo: http://jsfiddle.net/QwcG5/13/embedded/result/
I have set the entire layout fluid and it will not break the columns in next line both the li's will be in there respective <li> only.
Note: No modification in structure.
might be a stupid simple solution but I can't seem to find what's wrong here:
Simple setting: one <div> container with two contents: one <ul> list on the left and another <div> right beside it.
Problem: Somehow the <li> items got something like a margin-right:auto;. I have not declared it that way anywhere, even with margin:0!important; there is no change. This behaviour makes the right container move under the list block. Because of a picky but required js, I cannot use css floating.
This is the code:
<div class="full">
<div class="text_container" stlye="position:relative;width:250px;">
<ul>
<li class="box_link2">Item 1</li>
<li class="box_link2">Item 2</li>
<li class="box_link2">more items</li>
</ul>
</div>
<div class="text_container">
<p>Content</p>
</div>
</div>
I just don't get why the list item can't be controlled. Is it normal that way? Even if I change the order of the two content divs I still can't click or select text on the right one because of the li's expansion.
Any help appreciated.
See here : http://www.jsfiddle.net/9V2eH/
Because you can't use float, you'll need display:inline-block.
Also, you'll need to precise a width for your div.
Be aware that you may need to precise an overflow:hidden on your div containing the ul to prevent any text overflow from them.
This is normal block behavior.
Are you floating the .text_container to the left ? If not, then nothing is wrong. If yes then a little more info is required like the widths of the .text_container and the width of the .full.