I’ve tried to find the style that is responsible for adding a space between the #Nav and #Nav li including those and I can’t add a little space. I also would like to know how I can make just the one block elements #Nav a have a little more space so the text fits within.
Hi SH,
Is this going to be another menu with images in it or will it just be live text as it is now?
adding a space between the #Nav and #Nav li including those
The #Nav is the UL (the container) and the LI is the items in it. Where do you want space at?
Are you saying you want space between each list item?
how I can make just the one block elements #Nav a have a little more space so the text fits within.
You can make your anchors min-width so they can expand.
Something like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Christopher [:The Creative Sheep:]</title>
<style type="text/css">
html,body {
height:100%;/*reference for #wrapper min-height:100%*/
}
body {
margin:0;
padding:0;
background:#555;
font:100%/1.3 arial,helvetica,sans-serif;
color:#000;
}
h1 {
margin:15px 0 0;
font-size:1.5em;
text-align:center;
}
h2 {
margin:10px 10px 0;
font-size:1.3em;
}
p {margin:10px;}
/*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
body:before {/*Opera min-height 100% fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after, /*#wrapper:after for IE8 min-height:100% Fix*/
#content:after { /*#content:after for Float Containment*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug*/
font-size:0;
}
/*=== Begin Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
width:1138px;
min-height:100%;
margin:0 auto;
background:#CCC;/*BG color for #content*/
}
#header {
position:relative;/*establish containing block for AP children (#nav)*/
height:126px;/*152px total w/ padding*/
padding:1px 0 25px;/*preserve space for AP #nav and uncollapse child margins*/
background:#AAA;
}
#nav {
position:absolute; /*poition to bottom of header*/
left:0;
bottom:0; /*set coordinates*/
margin:0;
padding:0; /*remove the defaults*/
list-style:none;
}
#nav li {
float:left;
margin:0 2px 0 0;
}
#nav a {
position:relative;
float:left;
min-width:105px;/*135px with padding*/
height:25px;
padding:0 15px;
color:#FFF;
font:bold 15px/25px arial;
text-decoration:none;
background:#000;
}
#nav a:focus,
#nav a:hover {
color:#BDF;
background:#333;
}
#nav li ul {
list-style:none;
position:absolute;
left:0;
margin-left:-999em;
top:100%;
padding:0;
width: 100%;
background:red;
}
#nav li:hover ul {margin-left:0}
#content {
width:100%;/*IE6/7 haslayout for future float containment*/
padding-bottom:80px;/*set a bottom padding to preserve the footer*/
background:#CCC;/*same as #wrapper or none at all*/
}
#footer {
position:fixed;
width:100%;
left:0;
bottom:0;
height:80px;
}
.innerfoot {
width:1138px;
height:80px;
margin:0 auto;
overflow:hidden;/*uncollapse child margins*/
background:#AAA;
text-align:center;
}
#footer p {
margin:10px 0 0;
font-size:1.1em;
font-weight:bold;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
#wrapper{height:100%;}/*min-height for IE6*/
#footer{/*fixed footer for IE6 using expression*/
position:absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<ul id="nav">
<li><a href="#">Portfolio</a>
<ul class="drop">
<li><a href="#">Illustrations & 3D Stills</a></li>
<li><a href="#">3D Motion</a></li>
<li><a href="#">Demo Reel</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Bio3Design</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
</div>
</div><!-- end wrapper -->
<div id="footer">
<div class="innerfoot">
</div>
</div>
</body>
</html>
Ok, say this with me:
Fixed widths are bad. I repeat, Fixed widths are bad.
I would turn the nested LI into display:inline so they don’t inherit width, then set white-space:nowrap so that it won’t try to break them into separate lines.
I tossed together a quick rewrite of what you had how I’d approach that for you to illustrate it.
http://www.cutcodedown.com/for_others/siberianHuskey/template.html
as with all my examples the directory:
http://www.cutcodedown.com/for_others/siberianHuskey/
is unlocked for easy access to the needed sub-files. Tested working perfect IE 8 & 9, Opera 10.6, FF 2 & 3, and the latest flavors each of Safari and Chrome. The base layout also works well in IE 5.5, 6 & 7, though the drop-down menu items all end up separate widths – really I wouldn’t sweat that as that’s “close enough” in my book and is entirely functional. That’s the key to backwards support, it doesn’t have to be perfect, it just has to work.
You’ll notice wherever possible I avoid declaring heights, and I also avoid declaring widths the same time has paddings – this removes a LOT of the cross browser headaches. I also axed the IE8 fix for the min-height code, as applying the holly hack to any element inside the min-height div fixes that problem… The Opera one we were able to get rid of on 10.5/earlier using the same fix, but they screwed that up in 10.6.
I also moved the IE6/earlier stuff into the CSS with the * html hack, as I prefer to keep that type of crud out of the markup so it’s cached across pages – especially since I also might not want to send that to all media types… but that’s me… oh, and I cleaned up the expression too since there was ZERO reason to be doing a EVAL there.
I would also suggest not making a site that’s not even 1024 friendly, much less fixing the width – but again that’s me.
Usually a sticky footer is a stupid idea. I’d rather go with a fixed header or a fixed side nav.
@ds60: one thing that bugs me on your code is the scrollbar presence, even when it has no purpose.
overflow:hidden on <html> seems like a solution to you?
http://www.cutcodedown.com/for_others/siberianHuskey/template.html
I previewed that page and it’s wacky, as there is this big space at the top.
Rayzur - That is better except one of the list items falls below the other one for example:
SubMenu:
[A] [B] [C] (D should be here not below)
[D]
And there is a red background to the submenu what style is that linked to so I can remove it ? I’ve went though a few styles can’t find it.
I previewed that page and it’s wacky, as there is this big space at the top.
Yep, I see it too. DS had put clear:both; in the pagewrapper for some unknown reason and FF is bugging out on it. It happens when you hover over the first LI with the sublist.
#pageWrapper {
[COLOR=Red]clear:both;[/COLOR]
min-height:100%;
background:#CCC;
}
[A] [B] [C] (D should be here not below)
[D]
Hmm, that last LI was not dropping down in the code I posted. Did you change something?
And there is a red background to the submenu what style is that linked to so I can remove it ? I’ve went though a few styles can’t find it.
Yeah, I put BG colors on elements so you can see what is going on during testing. You will have to learn to make changes so you can understand how to edit the code as you need it. It wasn’t to hard to find.
#nav li ul {
list-style:none;
position:absolute;
left:0;
margin-left:-999em;
top:100%;
padding:0;
width: 100%;
[B]background:red;[/B]
}
Hi SH,
I know this thread is a continuation of another thread of yours where I posted a previous example.
And if I remember right you are never concerned about supporting IE6 so I left out the sfhover script for the dropdown. I did leave the fixed footer expression in place though.
You had wanted the menu at the bottom of the header and I had AP’d to the bottom temporarily because you had no details about what your header content would actually be. A batter way to do this would be to pad out the bottom of the header and drag the UL up with a negative margin.
Here is an updated version that should meet all your requirements assuming I have understood them all correctly.
http://www.css-lab.com/test/husky/husky-fixfoot-2.html
That gives you menu items with a min-width without any wrapping to new lines.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Christopher [:The Creative Sheep:]</title>
<style type="text/css">
html,body {
height:100%;/*reference for #wrapper min-height:100%*/
}
body {
margin:0;
padding:0;
background:#555;
font:100%/1.3 arial,helvetica,sans-serif;
color:#000;
}
h1 {
margin:0;
font-size:1.6em;
text-align:center;
}
h2 {
margin:10px 10px 0;
font-size:1.3em;
}
p {margin:10px;}
/*=== Float Containment and Bug Fixes (DO NOT ALTER THESE!) ===*/
body:before {/*Opera min-height 100% fix*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/*eliminate need for inner non clearing element*/
}
#wrapper:after, /*#wrapper:after for IE8 min-height:100% Fix*/
#content:after { /*#content:after for Float Containment*/
clear:both;
content:"";
display:block;
height:1%;/*fix IE8 min-height:100% bug*/
font-size:0;
}
/*=== Begin Layout Structure ===*/
#wrapper { /*do not set overflow:hidden; here, Opera will not comply*/
width:1120px;
min-height:100%;
margin:0 auto;
background:#CCC;/*BG color for #content*/
}
#header {
position:relative;/*establish containing block for AP children (#nav)*/
min-height:120px;/*152px total w/ padding*/
padding:2px 0 30px;/*preserve space for #nav and uncollapse child margins*/
background:#AAA;
}
/*-- Menu Styles --*/
ul#nav, #nav ul { /*group together for shared styles*/
display:table; /*webkit fix*/
margin:-30px 0 0;/*pull up into header div*/
padding:0;/*remove the defaults*/
list-style:none;
white-space:nowrap; /*stop child LI from wrapping*/
word-spacing:-1em;
}
#nav li {
position:relative;/*sub UL containing block*/
display:inline-block;
vertical-align:bottom;
word-spacing:0;/*reset from UL*/
}
* html #nav li {display:inline;} /*IE6*/
*+html #nav li {display:inline;} /*IE7*/
#nav a {
display:block; /*set dimensions (Only Opera chokes on a min-width float)*/
min-width:105px;/*135px with padding*/
height:30px;
margin:0 2px 0 0;/*optional margins*/
padding:0 15px;
color:#FFF;
font:bold 15px/30px arial;
text-decoration:none;
background:#000;
}
* html #nav a {width:105px}/*IE6 min-width*/
#nav a:active,
#nav a:focus,
#nav a:hover {
color:#BDF;
background:#333;
}
#nav ul {
position:absolute;/*remove from page flow*/
left:0; top:100%;
margin:0 0 0 -999em;
}
#nav li:hover ul {margin-left:0;}
#nav li li {background:#CCC;}/*IE7 needs a background to hold anchor with margins*/
/*-- Content Styles --*/
#content {
width:100%;/*IE6/7 haslayout for future float containment*/
padding-bottom:80px;/*set a bottom padding to preserve the footer*/
background:#CCC;/*same as #wrapper or none at all*/
}
#content p {
margin:40px 10px;
}
/*-- Footer Styles --*/
#footer {
position:fixed;
width:100%;
left:0;
bottom:0;
height:80px;
}
.innerfoot {
width:1120px;
height:80px;
margin:0 auto;
overflow:hidden;/*uncollapse child margins*/
background:#AAA;
text-align:center;
}
#footer p {
margin:10px 0 0;
font-size:1.1em;
font-weight:bold;
}
</style>
<!--[if IE 6]>
<style type="text/css">
html {background:#555 url(foo) fixed;}/*fix jitters when using expression (no need for a fake image http request)*/
#wrapper{height:100%;}/*min-height for IE6*/
#footer{/*fixed footer for IE6 using expression*/
position:absolute;
top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>The Creative Sheep</h1>
<p>We know you will have more content here so I am giving you a
header div rather than trying to cram everything into an H1.</p>
<p>A bottom padding on the header preserves the menu which was pulled in with a negative top margin.</p>
</div>
<ul id="nav">
<li><a href="#">Portfolio</a>
<ul class="drop">
<li><a href="#">Illustrations & 3D Stills</a></li>
<li><a href="#">3D Motion</a></li>
<li><a href="#">Demo Reel</a></li>
<li><a href="#">Another Long Link</a></li>
</ul>
</li>
<li><a href="#">Services</a></li>
<li><a href="#">Bio3Design</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2>Sub Heading</h2>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Content goes here</p>
<p>Last line of scrolling content</p>
</div>
</div><!-- end wrapper -->
<div id="footer">
<div class="innerfoot">
<p>Fixed Footer</p>
</div>
</div>
</body>
</html>
I agree wholeheartedly. At the very least I’d swap it for a proper 100% min-height using a negative margin instead of the positioning.
The original had that – the idea is to not have the layout ‘jump’ centering when some pages have content long enough to have a scrollbar and some that don’t. I usually don’t include that in my code either as users generally don’t resize their browser window often enough to worry about that.
Not sure what you mean, unless you are seeing what Rayzur is seeing…
Completely unable to recreate that here – though from your screencap I see one difference I generally don’t test for; Gecko on the “Fisher Price My First Computer”
Haven’t re-installed my OSuX virtual machine since I built this new workstation, I’ll get that going and see if I can figure out what FF on the Quackintosh’s problem is…
It’s PROBABLY the Opera :before fix that’s shtupping it… though the position:fixed could also be screwing it up which is why I don’t usually use position:fixed in my code.
That or it’s something they broke in 3.6, since I only test 3.5 since the newer versions borked the web dev toolbar. (or at least, one of the TWO functions in it I actually use)
– edit –
I’m unable to recreate that mis-render under OSX with FF 3.6 either! Is that 4 beta or something stupid like that?!?
That or it’s something they broke in 3.6, since I only test 3.5 since the newer versions borked the web dev toolbar.
Yes it’s in 3.6 and it is acting just like the “One True Layout” does with page anchors along with overflow:hidden for those margin/padding equal columns.
Once you hover over the link with the dropdown the whole page goes haywire.
Gecko on the “Fisher Price My First Computer”
Well I’m not sure what you mean by the last part of that statement, my screenshot was from FF3.6 on a Dell with Win XP. It’s your code as I explained before, specifically that clear:both rule on the #pageWrapper like I said.
It’s just part of x-browser coding Jason, you know that. I just ran into an Opera quirk too with the code I just posted. It would not let me set min-width on a floated anchor nested in an inline-block, WHY? No other browsers had trouble with it. But I had to use display:block just for Oopera.
#nav a {
display:block; /*set dimensions [COLOR=Red](Only Opera chokes on a min-width float)[/COLOR]*/
min-width:105px;/*135px with padding*/
height:30px;
margin:0 2px 0 0;/*optional margins*/
padding:0 15px;
color:#FFF;
font:bold 15px/30px arial;
text-decoration:none;
background:#000;
}
Ok, dragged out my hackintosh and it renders incorrectly there under OSX 3.5.3 (was testing 3.6 on 3.6 in the VM) – should be fixed now, I did margin-bottom instead of margin-top.
Unable to recreate that in any browser, though I was able to track down the “drop at the top” – at least for OSX.
Then are you running windowbllinds or some other program to make it LOOK like it’s running on a Mac? That’s Mac chrome I see around the browser window – hence the tri-colored jelly bean buttons?
I’ll install 3.6 on my XP VM, see if I can recreate that. That would be real fun if 3.5 and 3.6 Win7 don’t work like they do under XP.
Which is required to make IE7- behave on using the float:left/width:100% float wrapping on the menu.
You have yours inside the float, min-width by the spec is supposed to collapse/ignore inside floats. Opera is the only browser to do that properly.
– edit –
Under XP FF 3.6 does not behave like FF 3.6 under 7. JOY. Again using margin-top instead of margin-bottom on the opera fix corrects that – though I’d be worried about the dual scroll bar bug in IE – forcing the scrollbar on HTML avoids that one though so it’s ok.
Though with a massive margin-top, you don’t need to declare width on it.
Yep, that seems to have fixed it now.
Unable to recreate that in any browser, though I was able to track down the “drop at the top” – at least for OSX.
That’s what I was referring to as “haywire”, you know kinda like you say “COMPLETE FAIL” sometimes.
Then are you running windowbllinds or some other program to make it LOOK like it’s running on a Mac?
Bingo, yes I have been running windowblinds for about three yr.s now. Got tired of looking at that green XP start button. Never had any problems with it though. I take that back, it does screw with form buttons in IE but I have known about that so it does not alarm me anymore. I also run the foxdie theme along with it. I can turn it all off with the flick of a switch.
Which is required to make IE7- behave on using the float:left/width:100% float wrapping on the menu.
Couldn’t you have used inline-block on the UL to enclose floats for modern browsers and a haslayout trigger for IE. Shouldn’t have needed to clear it then. You could have set 100% width on it too (like you did with the float) to prevent shrinkwrapping and trip haslayout.
You have yours inside the float, min-width by the spec is supposed to collapse/ignore inside floats. Opera is the only browser to do that properly.
Ok, I was unaware of that. The display:block anchor is working just fine with the min-width though. From what I understood that is what the OP was wanting. As well as a dropline rather than a dropdown.
You mean all on one line? Oh… I so rarely see anyone wanting that I automatically assumed he just wanted them to expand so that the first line item didn’t line-wrap.
That’s different then… Just strip all the floats in the sub menu and make everything display:inline with white-space:nowrap;
That’s different then… Just strip all the floats in the sub menu and make everything display:inline with white-space:nowrap;
I know it could have been that easy, but as I pointed out earlier this thread is carried over from this thread.
We both gave examples in the 1st thread also, around pages 2-3. As I understood it then he was wanting dimensions on the menu items for future BG images.
That is why I was using inline-block LI with block anchors. It’s hard to tell exactly what he is wanting to do though.
Thanks for removing the IE6 stuff, you’re right I don’t support IE6. Although I assumed that #Nav Li would be the style that I would need to adjust to make the boxes shorter and I wanted to change the text so it’s flush left to the boxes but I was going to apply a float:left but I was unable to find where to apply it. One thing I want to mention I’d like to add this script to Content but the page does not mention how to install it. The how to use just says to chain it, but I’m in the dark what is meant by this.
If your referring to the code from my post#7 then it is the “a” (anchor) that is controlling the dimensions and the side padding.
#nav a {
display:block; /*set dimensions*/
[COLOR=Blue]min-width:105px[/COLOR];[COLOR=DarkGreen]/*135px with paddings*/[/COLOR]
[COLOR=Blue] height:30px;[/COLOR]
[COLOR=Red]margin:0 2px 0 0;/*optional margins*/[/COLOR]
padding:0 [COLOR=Blue]15px[/COLOR];
color:#FFF;
font:bold 15px/[COLOR=Blue]30px[/COLOR] arial;
text-decoration:none;
background:#000;
}
I have told you about the box-model before so that should not be a mystery to you now. The 15px side paddings were adding to the min-width to make it a total of 135px. Min-width is being used so it can expand on links with more text.
The height is set there too, if you change the height you need to change the line-height on the font property to match it. They are both set at 30px right now.
Now if you change the 30px height/line-height you will need to readjust the negative top margin on the ul#nav to match it. That is what pulls it into the header.
[B]ul#nav[/B], #nav ul { /*group together for shared styles*/
display:table; /*webkit fix*/
margin:[COLOR=Blue]-30px[/COLOR] 0 0;/*pull up into header div*/
padding:0;/*remove the defaults*/
list-style:none;
white-space:nowrap; /*stop child LI from wrapping*/
word-spacing:-1em;
}
Then reset the header bottom padding as well
#header {
position:relative;/*establish containing block for AP children*/
min-height:120px;/*152px total w/ padding*/
padding:2px 0 [COLOR=Blue]30px[/COLOR];/*preserve space for #nav and uncollapse child margins*/
background:#AAA;
}
You have four places to adjust your height at, they are all those 30px values I just pointed out. This was all because you wanted it at the bottom of the #header div. If it was just a full width menu after the header then you would not have to adjust the last two items I mentioned. 
One thing I want to mention I’d like to add this script to Content but the page does not mention how to install it. The how to use just says to chain it, but I’m in the dark what is meant by this.
Just play around with it and see what makes it tick, that’s what I would have to do.
You need to at least attempt to install it.
I just adjusted everything you mentioned to do, and I can’t get the words to flush left of the block elements and scale the #Nav shorter then what the text is.
I can’t see what you have done since you have not updated your link
EDIT:
Code from post#7 updated to 25px heights with text to the left
http://www.css-lab.com/test/husky/husky-fixfoot-2.html
The UL List black boxes I want to shorten their height and bring the text to align to the left.
I gave you instructions on how to do it.
Then I did it for you and posted the link in my last post.
Clear your cache and view the link again
And “shorten” does not tell me anything! Shorten to WHAT, 20px,10px?
The text is already jammed up to the left as far as it can go without hanging out.