I have an inline list that I am trying to get to "fill" the entire width of it's div.
If I use a margin-right on the list the last element will either not reach the end of the div (because it had the right margin) or the right margin will force it to go to the next row as it exceeds the width of the div.
Here is an excample of what I am describing.
http://i.imgur.com/9CJx7.png
my html:
<div id="footerstick" style="background:url(site_files/bg_shears.png) repeat-x; ">
<div id="footer_wrap">
<div id="footer_top_shelf">
<ul>
<li>Contact Us</li>
<li>FAQ</li>
<li>About Us</li>
<li>Distribution</li>
</ul>
</div>
</div>
</div>
my css:
#footerstick {
position: relative;
margin-top: -230px; /* negative value of footer height */
height: 230px;
clear:both;
}
#footer_wrap {width:980px; margin:auto;}
#footer_top_shelf {height:70px; overflow:hidden; }
#footer_top_shelf ul li {display:inline; list-style:none; color:#c7c7c7; font-size:30px; margin-right:85px; line-height:75px; text-transform:uppercase; font-family:myriad pro; }
Write like this:
#footer_top_shelf ul li + li{
margin-left:85px;
}
Try below css - after seeing your image and as per your requirement, if i am getting your problem correct the this updated css should help you.
#footerstick {
position: relative;
margin-top: -230px; /* negative value of footer height */
height: 230px;
clear:both;
}
#footer_wrap {width:980px; margin:auto;}
#footer_top_shelf {height:70px; overflow:hidden;}
#footer_top_shelf ul
{
margin:0;
padding:0;
text-align:center;
}
#footer_top_shelf ul li {
display:inline;
list-style:none;
color:#c7c7c7;
font-size:30px;
margin:0px 40px;
line-height:75px;
text-transform:uppercase;
font-family:myriad pro;
}
Note: Can you show your real time code, so we can identify easily how your code working and where you are facing problem.
Related
I built a simple dropdown menu, but in Chrome on hover the size of the tag reduced by 3px. (jump effect)
I don't understand where's the problem, here is my css:
#primary {
width:400px;
background:yellow;
height:48px;
margin:0;
padding:0;
}
#primary li {
display:table;
width:120px;
float:left;
border-right:1px solid blue;
position:relative;
}
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
}
#primary #secondary {
display:none;
margin:0;
padding:0;
}
#primary li:hover #secondary {
position:absolute;
top:48px;
left:0;
background:red;
display:block;
}
It seems Chrome adds extra hidden margin/padding.. In FF, IE it's working.
Online demo: http://jsfiddle.net/A3XDR/
Change:
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
}
to
#primary li a {
display:block;
text-align:center;
height:48px;
line-height: 48px;
}
If you want to keep your vertical alignment and table-cell you could add width: 100%:
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
width: 100%;
}
This should do the trick but I am not sure why is it behaving like this. It is surely because of secondary ul but not sure why.
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
width:100%;
}
Fiddle
Found a way to do it but it involves changing your markup, adding a span within the link:
HTML:
<ul id="primary">
<li>
<span>Nav 1 is long and wraps some</span>
<ul id="secondary">
<li>Nav 1-1</li>
<li>Nav 1-2</li>
<li>Nav 1-3</li>
<li>Nav 1-4</li>
</ul>
</li>
<li><span>Nav 2</span></li>
<li><span>Nav 3</span></li>
</ul>
CSS:
#primary li a {
display:table;
height:48px;
width: 100%;
}
#primary li a > span {
display: table-cell;
text-align: center;
vertical-align:middle;
width: 100%;
}
Fiddle | JSBin (for IE8 testing, jsFiddle doesn't work on IE8)
(You can also change #primary li to display: block if that table-in-table bothers you; seems to work: Fiddle | JSBin)
No jumping for me in the older Chrome (~v26) that has issues with just the simple width: 100%, or with the long nav entry that wraps which jumps for me even on current Chrome (~v32). Also seems happy in Firefox, IE8, IE10, Opera, and Midori.
(This solution is only possible because of the direction putvande and Lokesh pointed in. Please show your support for their efforts.)
On this page I wish to have the entire space to the right of the navigation filled in white.
So, I achieved 5px wide white block using the :after CSS selector, and am hoping there is a way to make it fit the available width, although I am open to other suggestions!:
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
Here is the simplified HTML:
<div class="menu"><ul id="menu-main-menu">
<li>Home</li>
<li>About us</li>
<li>Courses & prices</li>
<li>Activities in Rio</li>
<li>Accommodation</li>
<li>News</li>
<li>FAQs</li>
<li>Contact</li>
</ul>
</div>
And all the relevant CSS:
#primary-menu ul {
overflow:hidden;
}
#primary-menu li {
list-style:none;
float:left;
}
#primary-menu a {
color:#333;
background: #fff;
display:block;
}
#primary-menu .current-menu-item a, #primary-menu .current-page-parent a {
color:#fff;
background:none;
}
#menu-main-menu:before {
content:"";
display:block;
background:#fff;
width:20px;
height:30px;
float:left;
}
#menu-main-menu:after {
content:"";
display:block;
background:#fff;
width:5px;
height:30px;
float:right;
}
Thanks for taking the time to check out my question!
Caroline
You could add the ::after pseudo selector to the li.current-menu-item instead of #menu-main-menu and add white background from that element onwards.
.current-menu-item:after {
background: none repeat scroll 0 0 #fff;
content: "";
height: 30px;
position: absolute;
right: -1000px; /* these numbers are the same */
top: 0;
width: 1000px; /* and need to be at least the width of the menu */
}
#primary-menu li {
position: relative; /* position the ::after element relative to the li */
}
#primary-menu ul {
....
overflow: hidden; /* you already have this to clear your floats */
.... /* but I thought I should emphasise that you need it */
}
The example below works by adding an extra li to fill, but since the font will render dirrentely among browsers you cannot predict the width. The workaround in this example creates a container (#cen) for centering the content and setting the width, also the overflow property is set to hidden. Doing this you are able to add a significantly bigger div wrapping the ul and the filler li with a lot more width than required. Which causes no problem since the parent.parent is hidding overflows.
http://jsfiddle.net/efortis/3YpDh/1/
<div id="cen">
<div class="menu">
<ul id="menu-main-menu">
<li>Home</li>
<li>About us</li>
<li>Courses & prices</li>
<li>Activities in Rio</li>
<li>Accommodation</li>
<li>News</li>
<li>FAQs</li>
<li>Contact</li>
<li class="filler"> </li>
</ul>
</div>
</div>
#cen {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
.menu {
width: 1200px;
float:left;
}
li {
padding: 10px 25px;
float:left;
background: white;
}
.filler {
width: 200px;
}
Getting rid of float on li allows you to simply define display: block; background: white on their ul parent without any need for :before and :after pseudos to fill a space. This ul will already be 100% width because of display: block.
To do this, you can display each item as inline-block (display: inline and zoom: 1 for IE6/7) and stick closing and opening </li><li> tags to avoid whitespace between them.
See this fiddle
Bonus in the fiddle: in a second example, items occupy all available width (not necessarily pretty, depends of your design and menu) by using table-cell (the CSS value, not the unsemantic table>tr>td HTML code, of course). For IE6/7, same fallback as above (and same rendering).
What is the effect of inline and block and inline-block and floating to width and height?
For example take look at below css menu :
ul
{
list-style-type:none;border-style:solid;border-width:1px;border-color:Blue;
padding:0px;
display:inline-block;
float:left;
}
ul li{display:inline;}
ul li a
{
/*display:inline-block;
float:left;*/
display:inline-block;
float:left;
background-color:rgb(100,170,110);
color:Yellow;
text-decoration:none;
height:30px;
padding-left:20px;
padding-top:5px;
padding-right:20px;
}
ul li a:hover{background-color:Yellow;color:Red;}
I have corrected that for both IE and Firefox with adding below codes for ul:
display:inline-block;
float:left;
Is it true that for a inline tag the height=0?
Is it true for the left floated tag , it width is the maximum widths of it's children ?
Why block elements (such as menu items) will have some margins with their next items?
You'll get some goofy stuff with inline-block with IE. You might have better luck setting tha a's to block and float the li's. Try the code below
HTML
<nav>
<ul>
<li>Home
<li>About
<li>Contact
</ul>
</nav>
CSS
ul { margin: 0; padding: 0; }
li { float: left; }
a { display: block; padding: 5px; margin: 0 5px; }
I used Son of Suckerfish dropdown menu on my website. It looks fine in all browsers (including IE8 and above) but when in IE7, when I hover on the button, the dropdown menu does not appear below the button. Instead, it appears to the right of the button as per the image shown below.
I really don't know why IE7 is still alive but yes, clients are still using it.
Here's the image: http://i.stack.imgur.com/w1L95.png
Here is my HTML
<div id="menutop">
<div id="menu">
<ul id="drops">
<li>Home</li>
<li>Details
<ul class="drop">
<li>> Location</li>
<li>> Connectivity</li>
<li>> Technology</li>
<li>> Sustainability</li>
<li>> Community</li>
</ul>
</li>
<li>Choices
<ul class="drop">
<li>> Bungalow</li>
<li>> Semi-detached</li>
<li>> Town House</li>
<li>> Terrace</li>
<li>> Condominium</li>
</ul>
</li>
</ul>
<div class="clear"></div>
</div>
</div>
Here is my CSS
#menutop{
background:#003c57 url(images/menubg.jpg);
background-repeat:repeat-x;
height:35px;
width:auto;
}
#menu{
margin:0 0 0 150px;
}
#menu a.home, #menu a.details, #menu a.choices{
float:left;
background:url(images/menubuttons.jpg) no-repeat;
height:35px;
text-indent:-99999px;
}
#menu a.home{
background-position: 0px 0px;
width:141px;
}
#menu a.details{
background-position: -141px 0px;
width:290px;
}
#menu a.choices{
background-position: -431px 0px;
width:290px;
}
#menu a.home:hover{
background-position:-0px -35px;
}
#menu a.details:hover{
background-position:-141px -35px;
}
#menu a.choices:hover{
background-position:-431px -35px;
}
#menu a#active1{
background-position:-0px -70px;
}
#menu a#active2{
background-position:-141px -70px;
}
#menu a#active3{
background-position:-431px -70px;
}
#drops, #drops ul {
padding:0;
margin:0;
clear:both;
float:left;
width:inherit;
list-style:none;
}
#drops ul.drop {
background:#000;
opacity:0.9;
padding:5px;
width:280px;
clear:both;
margin-top:35px;
z-index:999;
}
#drops ul.drop li {
width:inherit;
clear:both;
padding:5px 0 5px 0;
}
#drops ul.drop a {
color:#fff;
font-size:16px;
text-decoration:none;
font-weight:normal;
clear:both;
float:left;
}
#drops ul.drop li:hover {
background-color:#003c57;
}
#drops a {
display: block;
/*width: 10em;*/
float:left;
clear:both;
width:150px;
}
#drops li {
float: left;
/*width: 10em;*/
}
#drops li ul {
position: absolute;
width: 10em;
left:-999em;
}
#drops li:hover ul {
left:auto;
}
#drops li:hover ul, #drops li.sfhover ul {
left:auto;
}
A wild guess could be some issue with the negative margins, often having different behaviors between browsers, and also could be some width, as IE7 and 6 had problems with different margins and paddings rather than what they should have. Sometimes I have had this problem and was related with the position:absolute atribute (you have it somewhere, specially when using margins). I have not reviewed your entire code, but in several cases I got it solved doing a parent have position relative instead of absolute, and sometimes even combinations of both...
This is due to the width of your menu items. The dropdown will move e.g. 100px to the right if you have one menu item with a width of 100px. Use a left and right padding to avoid this problem in IE7.
I've got a div that is set to 100% and inside that another div which is centred and set to 883px.
The navigation is a list but if I apply the float:right element to this element it reversed the order of the list. Sure I could change the order in the code but there must be a better way?
<div id="navigation"><!-- START NAVIGATION -->
<ul class="navigation">
<li>home</li>
<li><img src="images/navline.png" align="right">portfolio</li>
<li>blog</li>
<li>get in touch</li>
</ul>
</div>
<div id="border"></div><!-- END NAVIGATION -->
<div style="clear:both"></div>
And the CSS...
#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}
#navigation ul {
width:883px;
margin:0px auto;
}
ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
}
#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
float:right;
}
Can anyone help show me the error of my ways?
Floating to the right reverses the elements. This is the expected behavior.
If you want the menu aligned to the right, then you need to make ul element floating to the right but the li elements inside, must have a float left.
#navigation {
width:100%;
background-color:#383a3c;
height:43px;
}
#navigation ul {
width:883px;
margin:0px auto;
}
ul.navigation {
font-family:'ChunkFiveRegular', Arial, sans-serif;
font-size:18px;
float: right;
}
#navigation li {
float: left;
padding: 0px 10px;
}
#navigation li a {
display:block;
margin:13px 0px 0px 0px;
text-decoration:none;
color:#8cd8db;
}
In this case, the menu still doesn't appear aligned to the right because you specified width:883px; to the ul element. If you want it aligned to the right then simply remove this width.