You’ll see that I have my menu items readied at the bottom of the demo’d page.
http://www.sara-michael.com/index2.html
How can I raise them (as a block?) up to the black shadow band?
It looks like you are not going to have much else in that #centerpiece div so you could set a bottom padding on it to keep any content from going below the shadow band. You will need to adjust the height to allow for that padding.
Now you can just AP the ul down in the shadow and the bottom padding wil protect it from any other content.
This code merges the fixes from your other thread as well. I did set position:relative back on the #centerpiece div since it is needed now.
<!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>SaraMichael fashion scarvs, fashion hats</title>
<link href="styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<div id="logo"></div>
<div id="centerpiece">
<ul id="nav">
<li><a href="#">Scarves</a></li>
<li><a href="#">Totes & Bags</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Hairbands</a></li>
</ul>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
/* CSS Document */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
pre, form, fieldset, input, textarea, p {
margin:0;
padding:0;
}
body {
background: #000;
font: 12px Arial, Helvetica, sans-serif;
}
.container{
width: 960px;
margin: auto;
}
#logo {
height: 100px;
margin-top:50px;
background:url(../images/SMLogoButterfly.jpg) no-repeat 50px 0;
}
#centerpiece {
height:340px;/*550px total with padding*/
width:850px;
padding-bottom:210px;
margin: auto;
background:url(../images/HomeScarves.png) no-repeat 0 0;
position:relative;
}
/* Nav Styles */
#nav {
position:absolute;
width:800px;
height:64px;
bottom:135px;
left:25px;
list-style-type:none;
}
#nav li, #nav a {
float:left;
}
#nav a {
width:200px;
padding-top:15px;
text-decoration:none;
text-align:center;
font:bold 24px/1.2 Verdana, Arial, Helvetica, sans-serif;
color: #999;
}
#nav a:hover{
color:#FFF;
}
WOW. You did so much more with so much less code. OK magic man I’m a believer.
Big thanks for your contribution. Now, send me to where I can take the right course! Do you offer one?
Glad it worked out for you.
You missed the ampersand character I had in the html, get it back in there.
<li><a href="#">Totes [B]&[/B] Bags</a></li>
Now, send me to where I can take the right course! Do you offer one?
You can learn quite a bit from going through the SitePoint Reference as it covers just about everything with CSS/HTML.
You will also learn a lot just by following other peoples threads around here. It is basically the same problems over and over because everyone is at different knowledge levels.
It looks like your css got malformed for some reason.
scroll to the right
body {
background: #000;
font: 12px Arial, Helvetica, sans-serif; [COLOR=Red]} .container{[/COLOR]
width: 960px;
margin: auto;
}
#logo {
height: 100px;
margin-top:50px;
background:url(../images/SMLogoButterfly.jpg) no-repeat 50px 0;[COLOR=Red] } #centerpiece {[/COLOR]
height:340px;/*550px total with padding*/
width:850px;
padding-bottom:210px;
margin: auto;
background:url(../images/HomeScarves.png) no-repeat 0 0;
position:relative;
}
I would probably cut that down even more… that extra div around #nav is completely unnecessary, and the CSS wastes WAY too much time declaring widths on things when the outermost container has a perfectly good width on it… much less sillyness like declaring UTF-8 on a file format that by spec is 7 bit ascii only anyways, comments like “CSS document” (no really? That CSS file extension gave me NO clue), etc, etc.
Even simple things like vertical collapse of the top margin, trusting the default line height (which is why even the newest version breaks on my system), the lack of graceful degradation on the logo when images are disabled, etc, etc, etc… and even the image formats are backwards; jpeg being better for the truecolor giant image and .png being better for the tiny little monochromatic one.
I’d probably reduce the markup for that down to:
<div id="pageWrapper">
<h1>
Sara Michael
<span></span>
</h1>
<ul id="mainMenu">
<li><a href="#">Scarves</a></li>
<li><a href="#">Totes & Bags</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Hairbands</a></li>
</ul>
<!-- #pageWrapper --></div>
The ‘logo’ got a little bigger as in my mind that’s your top level heading… the empty span being for ‘gilder levin image replacement’ - a technique that means people browsing with images disabled and things like search engines will have meaningful content to look at.
The menu CSS getting some real chopping down. You are declaring all these extra widths and heights and other properties, when it could all be simplified down to:
#mainMenu {
list-style:none;
padding:350px 0 136px;
text-align:center;
font-size:1px; /* set white-space between elements to predictable amount */
background:url(images/mainMenuBackground.jpg) top center no-repeat;
}
#mainMenu li {
display:inline;
}
#mainMenu a {
padding:0 36px;
font:bold 24px/64px verdana,helvetica,sans-serif;
text-decoration:none;
color:#999;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#FFF;
}
Moving the big background image to the UL, setting it’s position to “top center” removes the need for all those pesky margin and width declarations - then padding the top and bottom of the content gives you your height if the content ends up that 64px tall menu area. Set the font to 1px and our ‘white-space’ between the inline LI ends up only 1px, then setting the LI to display:inline allows us to center each text item and simply pad them apart. Changes the spacing so they look more evenly spaced than the fixed 200px wide containers do. 64px tall line-height on the font declaration is all we then need to set the height on the whole area.
Net result? Less code, simpler code, and it works all the way back to IE 5.5!
I uploaded a copy with some remastered images (shaving about 600k off the filesizes) to my server:
http://www.cutcodedown.com/for_others/swmagic/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/swmagic
is unlocked so you can grab the gooey bits.
Valid XHTML 1.0 Strict, tested in IE 5.5, 6, 7 & 8, Opera 9.6 and 10.52, FF 2 and 3.6, and the latest flavors each of Safari and Chrome.
Take a peek at it with images disabled to see why I did the H1 that way. I put styled text inside it, then position the span over the text…
I also moved the top margin off of it and applied it as padding on the wrapping div. Sometimes top margins on the first element can cause collapse issues - so I try to avoid vertical margins as much as possible.
Hope this helps…
Very well, I’m now drinking from the firehose. (I’m thankful).
But some questions.
You’re intending the empty H1 span in the html for general use with the Gilder/Levin technique (that technique will help with Google SEO to be sure!). Although your h1 structure seems very tight (even including accommodating the Holly Hack)* and works very well, I’m curious how I use the technique in general practice, since the h1 span combo contains an image and on other pages I’ll certainly be using multiple images.
In short, what do you (and everyone) recommend with regard to general layout structure using this technique? (Perhaps an example using this twice may help me)
Next, you mentioned my reversal of jpeg and png usage. As I read, png’s are not supported by all browsers thus bringing home the real necessity for the Gilder technique. But why even use them at all? What’s their advantage in ANY case?
*The Holly Hack:
Good work Jason and Ray.
I think I just need to clarify for anyone watching that the height:1% (haslayout trigger) that Jason used in his version above is perfectly safe in this instance:
h1 {
position:relative;
[B] height:1%; /* holly hack, trip haslayout */[/B]
padding:23px 0 23px 58px;
font:normal 50px/54px arial, helvetica, sans-serif;
color:#FFF;
}
The reason it doesn’t need to go into a separate IE only rule is that the parent has no height and therefore the height:1% cannot be resolved and becomes auto height instead.
However, in a situation where html and body may have been set to 100% height and the h1 is a direct child then it will fail dramatically as the element will only be 1% high, which in most cases won’t be enough to show the content.
The height:1% hack can only be safely used when the element’s parent has no height (as in Jason’s code) because in those cases the percentage height cannot be resolved and the 1% reverts to auto height instead and is then perfectly safe.
For that reason and the fact that I see lots of broken sites because of it I prefer to separate it with the nasty * html hack and just give it to IE6 and under only. This also builds in some longevity in that the site may be changed at a later date and any height:1% rules would need to be addressed sitewide if for instance some parents had height added such as html or body as already mentioned.
(For the logo I would have actually set a width and height anyway and used overflow:hidden also as presently the text underneath spills out from beneath the logo on third resize. ;))
So you’ve just found the marble in the oatmeal?
This is my new mop. George, my friend, he gave me this mop. This is a pretty good mop. It’s not as good as my first mop. I miss my first mop, but this is still a good mop. Sometimes you just hafta take what life gives ya, 'cause life is like a mop and sometimes life gets full of dirt and crud and bugs and hairballs and stuff… you, you, you gotta clean it out. You, you, you gotta put it in here and rinse it off and start all over again and, and sometimes, sometimes life sticks to the floor so bad you know a mop, a mop, it’s not good enough, it’s not good enough. You, you gotta get down there, like, with a toothbrush, you know, and you gotta, you gotta really scrub 'cause you gotta get it off. You gotta really try to get it off. But if that doesn’t work, that doesn’t work, you can’t give up. You gotta, you gotta stand right up. You, you gotta run to a window and say, “Hey! These floors are dirty as hell, and I’m not gonna take it any more!”
The question would be WHY are they other images? What is the content. The trick is to always try to use the most semantic tag for the various content elements… and to avoid using images for large sections of text in the first place. If there area whole slew of images, you can start throwing other tags in there so long as the core tag wrapping the text remains meaningful. Sometimes I’ll use empty B, I and DIV tags as extra image sandbags depending on what’s going on.
Well, have a look at one of my websites that takes said techniques to some real extremes:
http://www.ewiusb.com
View that page with images disabled to see what I mean.
Really though it’s a case by case basis. It’s important to not only know the technique, but also to know when you should use it and when you shouldn’t… The big determiner for me often ends up “should this even be an image in the first place” which is why I restrict the technique to short phrases like headings and not actual content text.
That is a great big misnomer/myth about .png - only ONE type of .png doesn’t work in all browsers, and that’s the ones that use alpha transparency. IE6/earlier doesn’t know what to do with varying levels of transparency without some scripting assistance, so I don’t bother even trying to use (or design to use) them… But that’s only one type of .png.
IE has supported the .png format since IE4. Non-transparency .png, and palettized transparency (choosing one color to treat as 100% transparent) works JUST FINE - always has.
It seems a lot of people misunderstand “alpha transparency .png doesn’t work in IE” as “.pngs don’t work” - it’s not that simple.
Now, there IS a small quirk in IE about all .png that makes them hard to work with… IE when it renders png does this crazy thing and actually OBEYS the ‘gamma correction’ information stored in the file. This usually brightens the png so that it doesn’t color match other image formats or CSS. This is easily fixed using a program called ‘tweakpng.exe’ - you just load the file, delete the “GAMA” line, and save.
So why use them? Generally they make smaller image files when there are long runs in either direction of the same color pixel, or slow changes. As true-color they are a lossless format, and if your image doesn’t use a wide range of colors a palettized .png can end up many times smaller than a jpeg.
The ‘lossless’ part is important when dealing with line-art, fonts, etc - jpeg is a ‘lossy’ format, which means it is never a perfect copy of your source image. Every time you load and save you do more and more ‘damage’ to the image. The level of loss can be set to increase how small the file gets - so it’s a trade-off. Usually with things like photographs the ‘loss’ becomes invisible in the details of the picture at low levels (10% loss or less) - but on line-art it can be come apparent really quick…
I have short ‘rules of thumb’ list that usually holds true as to what image format works best for me:
.gif - 16 colors of 32K pixels or less
.png - 17 colors or more of large flat areas of uniform color
.jpg - photographs
Though that’s just a loose recommendation - Most of the time I will try each format (or at least two) to see how small I can get the file, and to see how each one’s encoding, color reduction methods,etc effect the output.
There’s no ‘easy’ method of saying which format to use for each image type… It doesn’t help that not all encoders are created equal. Photoshop’s save-time optimization routines for example being total garbage - while “Paint Shop Pro” has one of the best built-in save-time optimization tools I’ve ever seen letting you play with color reductions, formats, encoding levels, loss levels and even set palette transparency on the fly.
Off Topic:
Ha ha - I thought so - you do have a sense of humour after all
I’d probably at least start out by building a usable template that can prepare the way for the sub pages. Rather than setting that huge top padding on the ul I would set up a spacer div with a fixed height for the home page.
You can set a class on the body to target the fixed heights for the wrapper and the spacer div ( I called it Content) which will surely be needed on other pages.
Test Page -
http://www.css-lab.com/test/swmagic/index2.html
With access to all files here -
http://www.css-lab.com/test/swmagic/
<body class=[B]"home"[/B]>
<div id="[B]wrapper[/B]">
<h1 id="logo">Sara Michael<span></span></h1>
<div id="[B]content[/B]">
<p>Some optional introduction text could go here if needed. If no text is needed here this div will serve
as a place holder to position the menu and then it can be used for content on the sub pages. The .home class
on the body sets the height for this div on the home page only.</p>
</div>
<ul id="nav">
<li><a href="#">Scarves</a></li>
<li><a href="#">Totes & Bags</a></li>
<li><a href="#">Hats</a></li>
<li><a href="#">Hairbands</a></li>
</ul>
</div>
</body>
Then simply target those divs with a fixed height for the home page only. Also I would set that main BG image on the wrapper and not the ul. Then that BG image can be changed for all sub pages.
[B]#wrapper[/B] { [COLOR=Blue]/* sub pages do not get a height set on the wrapper*/[/COLOR]
width:850px; /* 900px total with side padding (BG image is 850px)*/
margin:0 auto;
padding:50px 25px 0;
background:url(images/[B]subpage-bg.jpg[/B]) no-repeat 0 0; [COLOR=Blue]/*future BG image for sub pages*/[/COLOR]
}
[B].home #wrapper[/B] { /*this sets the styles for the wrapper div on the home page only with a body class*/
[B]height:440px[/B];[COLOR=Blue]/* 700px total with padding*/[/COLOR]
padding:50px 25px [B]210px[/B]; [COLOR=Blue]/*bottom padding for home page*/[/COLOR]
background:url(images/[B]homepage-bg.jpg[/B]) no-repeat [B]25px 150px[/B]; [COLOR=Blue]/*BG image and positions for home page only*/[/COLOR]
}
#logo {
position:relative;
height:125px;/* 150 total with padding*/
padding:25px 0 0 50px;
font:40px/44px arial,helvetica,sans-serif;
color:#FFF;
}
#logo span {
position:absolute;
left:-5px; top:0;
width:368px;
height:100px;
background:url(images/logo.png) no-repeat;
}
[B]#content[/B] {
width:100%; /* haslayout */
overflow:auto; /*contain floats and cater to fixed height on home page*/
}
[B].home[/B] [B]#content[/B] {
[B]height:300px[/B];[COLOR=Blue]/*fixed height to position the bottom navbar on home page*/[/COLOR]
}
That leaves you with something you can at least use as a building block for the sub pages. 
It’s been about 40 minutes with no new posts.
Jason must be writing a two-page rebuttal. 
That’s a good point, though I’d probalby not even have different layouts on every page of the site in the first place. This giant menu image with the fixed image pushes the menu clear off the screen on most netbooks and many laptops… It reduces the page to little more than a overglorified splash…
Which of course, splash pages, inconsistent placement of the same navigation across pages on the same site, and blowing 500+ pixels on image banners before you have anything resembling content are all on the ‘bad web design’ list alongside frames, auto-playing music, animations for nothing, marquee tags, and the dozen other things that scream “what is this, 1998?”
To break it right down, this screams “how not to design a website” in the first place… Since you don’t even have the full semantic markup for actual CONTENT on the page before you start trying to make a layout or hang the graphics on it.
Off Topic:
Nah, it’s Saturday, so I’m catching up on fan missions in “The Dark Mod” and “Thief 2”
Taffers.
It reduces the page to little more than a overglorified splash…
Which of course, splash pages, inconsistent placement of the same navigation across pages on the same site,
Very good points and those were my thoughts as well. I would at least get the menu consistent on all pages before going any further with it. That would mean doing away with the current BG image as it will obviously not work on the other pages.
Off Topic:
Nah, it’s Saturday, so I’m catching up on fan missions in “The Dark Mod” and “Thief 2”
Taffers.
You know I was just kidding with you. We like to see the humorous side of you come out every now and then.
Yup. Overglorified splash. Excellent description. Couldn’t have thought of a better one.
But say what you will, that is what fashion sites are made out of.
I also agree with Ray about making the four sub pages consistent before going any further with the home page also.
However…do keep this in mind…
The underlying machinery below all of these 5 pages is Volusion where the hundreds of items will all be managed with THEIR massive machinery.
-
This is just the presentation layer…
-
The client already LOVES the splash…
-
I’m learning css from the top down with your wonderful Sitepoint expertise and open comments…
-
And I don’t want to start with Volusion because of awful load times without any attractive splash to draw the visitor in (I’ve found Volusion templates way over the top and too much blah, blah, blah widgets, which will be ok later but not in first layer).
So, all in all, thanks…it’s a good day in Paradise and Sitepoint!
Paul
P.S. I hate Flash too.