How can I get the page to hug the right side of the browser ?
How should I stylize #wrapper ?
How come my #footer div is not appearing ?
I lost my web design by a fluke accident, I’m in the process of creating a new look currently trying to mimic my original the closest I can.
If your talking about your fixed width background images the answer is no. Not unless you make repeating images, but that is not how your images are set up.
Won’t the image just get cut-off if the window gets resized ?
I changed the main menu a little bit too, I used a negative margin to pull it into the header div. I had it AP’d to the bottom of the header, but that was only done because I did not know what your plans were for header content. The header still has bottom padding on it to preserve the nav.
IE6 will get a script for li:hover as I explained earlier, I have it in the page head right now but you would want to move it to its file and link to IE6 only via a Conditional Comment (which is in place already)
I wanted to mention that I won’t be supporting IE6 
The drop down menu is exactly what I’m after. There is one thing that is bothering me in general but I can’t comment on it until afterwards !
I was originally had plans to go with a folding drop down menu, but after searching and searching it appears nothing what I’m after exists.
Then I decided to go with this. Then I decided this is not the way I want the drop down to work, going back to one of my first original ideas I tried to make CSS style drop down as seen on this [URL=“http://www.css-lab.com/demos/nav/dropline/dropline.html”]page. I can’t get it to work for one of the buttons on the page, I don’t have any HTML or CSS to show only what I had posted in a earlier message. 
Thanx.
If your talking about your fixed width background images the answer is no. Not unless you make repeating images, but that is not how your images are set up.
I have merged the dropline nav into the Live Demo that I posted for you earlier in this thread.
I changed the main menu a little bit too, I used a negative margin to pull it into the header div. I had it AP’d to the bottom of the header, but that was only done because I did not know what your plans were for header content. The header still has bottom padding on it to preserve the nav.
IE6 will get a script for li:hover as I explained earlier, I have it in the page head right now but you would want to move it to its file and link to IE6 only via a Conditional Comment (which is in place already)
All we can really do is just set up something for you to tweak later since you don’t have any content to dictate how the markup should be laid out. It just serves as a starting point and the semantics will probably change as you get your content in place.
Hi, just got home from work
I assumed you wanted it aligned to the right – are you saying you just want it fully fluid? To expand to fit regardless of page width on both sides?
If so that’s the default behavior of all the tags, just stop declaring widths.
I’m sorry I meant the left side of the page had a space Let me understand by removing widths you can keep it fluid. How about the graphics will they be fluid as well ?
I just uploaded a copy that strips out all the width declarations to make the page fully fluid. Is that what you were asking for?
http://www.cutcodedown.com/for_other...template2.html
and the CSS
http://www.cutcodedown.com/for_other...ey/screen2.css
If so, that’s the DEFAULT behavior of all the elements involved – which is probably why I didn’t think that’s what you were asking for.
That is nice how the page flows
Ooph that’s problematic, now a lot of this has already been pointed out, but I’m going to just go down the list of ‘problems’…
Some of these problems stem from your pretty picture having nothing to do with web design and in fact being a case of putting the cart before the horse… This is where your first ‘problem’ crops up…
the 1138px width. Not even 1024 friendly… hell, it’s barely 1280 friendly, /FAIL/ at design and on that ALONE I’d be throwing the image away or re-adjusting it so if part of the images are cropped it’s no big deal. Semi fluid layout as minimum.
Second, fixing the width of the buttons - never looks right…
From there we have the CSS itself. As already noted you fail to change your line-heights with sizes, but you also have a broken min-height model, are trying to use position:fixed which almost ALWAYS fails to work, you’re absolute positioning in the menu for jhvh knows what reason, and you’ve got a bunch of pointless extra wrapping DIV in there and a paragraph tag in the footer for what typically is not a single coherent thought of text – and hence non-paragraph content… and of course the IE conditional nonsense bloating out the markup and comment placement that IS tripping rendering bugs in IE6/earlier.
Which is why my first step would be to chop down the markup to something more like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
<title>
Min-Height 100% with Fixed Footer
</title>
</head><body>
<div id="pageWrapper">
<h1>
Min-Height 100% with Fixed Footer
</h1>
<ul id="mainMenu">
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">BoA</a></li>
<li><a href="#">Contact</a></li>
</ul>
<div id="content">
<h2>H2 Sub Title</h2>
<p>
This demo uses no extra markup in the html for IE8 and Opera min-height:100% bug.
</p><p>
Reduce browser viewport height to scroll content.
</p><p>
content
</p><p>
content
</p><p>
Last line of test text
</p>
<!-- #content --></div>
<!-- #pageWrapper --></div>
<div id="footer">
Fixed Footer
</div>
</body></html>
For the CSS I’d suggest first using a reset just so you don’t have to keep saying “margin:0; padding:0;” over and over and over again. The one I use is smaller than most, I’ve never needed more and anything smaller usually shtups form elements.
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
For the min-height I suggest adding position:relative in addition to the 100% height declaration to html and body for Opera, fixes one of the two minor bugs.
html, body {
height:100%;
position:relative;
}
then the body specific properties:
body {
text-align:right; /* push #pageWrapper right in IE 5 */
font:normal 85%/140% arial,helvetica,sans-serif;
color:#000;
background:#555;
}
You said you wanted it on the right instead of centered, correct? The text-align only works in IE 5.x, but it’s one line to add support so big deal. On the font declaration if you omit “normal” some older browsers will ignore the whole line, and of course I added what I consider a more legible default line-height.
The :before hack for Opera:
body:before {
/*
Opera min-height 100% fix -- We USED to be able
to get rid of this in Opera 10.5, but they
buggered the holly hack find in 10.6
*/
content:"";
height:100%;
float:left;
width:0;
margin-bottom:-999em;
}
has to remain because they screwed up the simpler fix of declaring height:1% on any child element with Opera 10.6… shame because it’s a lot simpler a fix. We do NOT need the two :after ones as they don’t accomplish anything we can’t do with the height:1% holly hack.
Now I opened it up to semi-fluid layout, so we want to set the width on #footer the same as #pageWrapper, so we condense them together.
#pageWrapper,
#footer {
position:relative;
min-width:752px;
max-width:1104px;
margin-left:auto;
}
The margin-left is a cute trick to avoid using a float. Since margins are zero’d a margin auto on just one side pushes the div to the opposite side. Look ma, no floats! The position:relative makes certain #footer will depth sort over #pagewrapper and all it’s children.
Of course #pageWrapper…
#pageWrapper {
min-height:100%;
text-align:left;
background:#CCC;
}
* html #pageWrapper {
height:100%;
}
… The text align just sets the main area back to left after the righ alignment for IE 5.x, and it gets the min-height and the IE workaround for min-height. I’d rather use the * html hack where it’s cached across pages, than dick around with IE conditionals bloating out the markup.
To that end, we have the IE expression to fake min-width and max-width, as well as the fallback if scripting is disabled.
* html #pageWrapper,
* html #footer {
/*
IE has no min/max width, but we can fake it
with an expression. First we set a fixed width
as a lowest common denominator for when jscript
is disabled, then we run the expression to overload
it if jscript is present.
*/
width:752px;
width:expression(
(document.body.clientWidth>1152) ? "1104px"
: ((document.body.clientWidth>800) ? "auto" : "752px")
);
}
Then the page heading.
h1 {
position:relative;
padding:50px 20px;
font:bold 44px/45px arial,helvetica,sans-serif;
background:#AAA;
}
You’ll notice on a lot of elements I avoid stating a height. Should the font be resized (when px shouldn’t unless you resize EVERYTHING PX, thanks FF for being nyetscapes retarded cousin) it will grow. The background image should probably be prepared to handle that.
#mainMenu {
list-style:none;
overflow:hidden; /* wrap floats */
width:100%; /* trip haslayout, wrap floats IE */
background:#AAA;
}
There was no reason on your original menu to be absolute positioning it. If you REALLY wanted it over the h1 (which shouldn’t be necessary) you could use a negative margin to ride it up, but personally I’d just put the same background image on it and slide the background into place on the final version.
You also NEVER need to say “list-style-type” if you are just turning off bullets. The condensed “list-style” property gets the job done.
The overflow and width are strictly there to wrap our floated buttons.
On the LI
#mainMenu li {
display:inline;
}
I just strip them of formatting. IE8 can be a real pain in the ass on LI, and setting them ‘inline’ makes them behave allowing us to simply float our anchors and set ALL formatting on them instead.
#mainMenu a {
float:left;
display:inline; /* prevent IE margin doubling */
padding:4px 15px;
margin-right:2px;
text-decoration:none;
font:bold 15px/17px arial,helvetica,sans-serif;
color:#FFF;
background:#000;
}
#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover {
color:#BDF;
background:#333;
}
Float 'em, throw the inline fix at 'em to make the margin behave in IE… You can see I set a smaller line-height and then pad. This gives finer control over positioning when images are added and is more predictable than a tall line-height. Also notice I added the ‘active’ psuedostate to the hover effect, that way you nab ALL keyboard navigators. As a rule of thumb I like to set all three the same way when trapping hovers on anchors.
I do NOT fix the width – fixed width buttons, particularly on a menu always look silly/unprofessional to me. Looking at your source image (do you have a higher res?) I would take one of those buttons, adjust it so the center could be tiled, adding dummy spans inside the anchor and use a sliding doors effect on each button by absolute positioning the spans on the right side of the anchor in it’s padding. That way all your buttons would always adjust to their content.
The Content div
#content {
height:1%; /* holly hack, fixes auto height in IE8 */
padding-bottom:80px;
}
Gets the holly hack. Since the parent of Content doesn’t have an explicit height on it in standards browsers, and height is treated as min-height in IE all this does is trip haslayout, and for some reason fixes the IE8 content resizing bug! This axes that :after fix nicely.
The bottom padding of course is to make room for #footer.
I set up some nice appearance on the inner tags for the hell of it.
#content h2 {
padding:0.8em;
font:bold 120%/140% arial,helvetica,sans-serif;
}
#content p {
padding:0 1em 1em;
}
I like to use padding instead of margin on things like this so I don’t have to even THINK about collapse.
Finally we have the footer.
#footer {
padding:32px 0;
margin-top:-80px;
text-align:center;
font:bold 15px/16px arial,helvetica,sans-serif;
background:#AAA;
}
* html #footer {
height:1%; /* fixes oddball IE 5.x positioning bug */
}
Didn’t seem to be any reason to use the dual-wrap or P you were on this. Instead of using position:fixed, I use a negative margin to ride it up over #pageWrapper. A particularly sneaky trick but it works like a charm every time. Because the footer in 100% min-height layouts HAVE to be stated in PX (since FF is a total retard about what EM means) we’re kinda forced to use PX fonts there, and again I avoid declaring a height and use padding to total the height with the line-height instead, dodging another IE ‘issue’. (height or width + padding or border == /FAIL/)
Tossed a copy up on my server to show it in action.
http://www.cutcodedown.com/for_others/siberianHuskey/template.html
As with all my examples the directory:
http://www.cutcodedown.com/for_others/siberianHuskey
Is wide open for easy access to the bits and pieces. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the expressions and * html hacks, tested working perfect on IE 5.01, 5.5, 6, 7, 8 and 9 Beta, Opera 10.52 and 10.63, FF 2 and 3.5.3, and the latest flavors each of Safari and Chrome.
Now, you could pull the min/max-width code and go back to fixed width, but I REALLY advise against it when you aren’t even 1024 friendly. There’s a difference between “Hey that’s pretty!” and “Yeah, but what good is it?” – and 1138px width definitely crosses that line.
Hope this helps, or at least you are able to glean some useful knowledge from it.
Thanx.
If you are looking for a script, then scriptaculous (might be spelling it wrong) is an excelling JS library that has some neat effects
No, the script was just for IE6 since it does not support li:hover
Ohhh
If you want any animated effects like rolling or folding then you will have to use a script. It could be done with CSS3 Transitions to some extent but you would not get full x-browser support.
Do you or does anyone have any suggestions, I can’t find anything. Then I’ll decide which route to go
I forgot to mention how do you create a Drop down ? I want to have one of the buttons have a css drop down. Like so:
[BUTTON]
{Sub-Button_1}{Sub-Button_2}{Sub-Button_3}
Please update your online example so we can see the whole picture.
No, that width was not only for IE. Victorinox forgot to remove my IE comment from when I had the width set to 100%. Divs default to 100% width so the only reason for the 100% was to give IE6 haslayout.
What you are saying is because Victorinox forgot to remove your IE comment the layout width in FireFox etc won’t expand to 100% ? What comment was that this one:
width:960px; [B]/*set haslayout for IE*/[/B]
I don’t see how that does anything it’s just a comment !!!
Basically you are telling us you want a fluid width site that uses a fixed width image. It’s not going to work like that.
I want a fixed width site You can’t have a fixed with image and a fluid width, I realize that
Your UL is shown at the bottom of your header div in that image just like I placed it in my code above
Sorry you are right, except for the green box and the content area etc has to be removed cause I’m going to have some other element doing that Job
I would not use a 200px tall position:fixed footer either, that is too tall. I think that you may be confusing fixed height with fixed position.
No I realize that is too tall for a footer, it will be shorter !!
you have a standard layout: header, content, footer. in the header you have a menu.
so far Rayzur in the #18 post gave you a high quality start. use it, work it with your images and come back to us with a link to the result for further improvement, if necessary
I’m going to adjust and tinker and change some minor aspects that I had just mentioned with this layout. I’ll update as soon as possible.
The code in post#18 does not produce any whitespace below the footer in any version of IE for me.You must have been tinkering with it.
Maybe, oh well !
IE6/7 both loose about 20px on the viewport width right off the bat because the vertical scrollbar position is always present with or without a scrollbar.
Oh, news to me.
Sorry I won’t be of much help with mobile coding, though there is a new forum here at SP just for them.
I do know that a 1138px fixed width site with a fixed footer will surely cause problems. Most people just code a separate site for mobiles, at least that seems to be the easiest way from what I’ve heard.
What about Accessibility for this site ? Can you have a happy marriage whereas the site retains it’s current look for the PC/Mac but on mobile phones it can adjust automatically or something like this without much if at all any problems?
ok, let’s stylize 
you have a standard layout: header, content, footer. in the header you have a menu.
so far Rayzur in the #18 post gave you a high quality start. use it, work it with your images and come back to us with a link to the result for further improvement, if necessary
Thank you, but that layout is too far off
I want the UL to be within the header but at the base of the header DIV. The header will be one graphic so will the footer. My question is should I have two slim DIV contained within one div for the graphic and the same goes for the footer for the graphics since they will be PNG ?
Can you please tell me what to stylize, don’t layout the entire page just tell me what rule to add to the style to fix it and in return I will explain if that is what I want or not Don’t take that the wrong way
you should’ve started with this
first question: do you want the layout to be fixed as width? (and centered for bigger wieports?)
second question: do you want the layout to be fixed in height?
third question: the footer is fixed? (always present at the bottom of the viewport?)
i’m puzzled that you style the header like this
#header {
background: #AAAAAA;
width: 100%;
height: 200px;
}
and you style the footer like this
#footer {
background: #FF3300;
width: 425px;
height: 50px;
margin: 0px 0px 0px 0px;
}
and since it’s obvious you apply different styles to them, box model and appearance, you complain about them looking different
a drawing would really help us understand, since you have no bogus content at least in your elements that will shed some light on your goal
I know what a wrapper does. How should I stylize my wrapper just with some basic styles if I should so happen want to do something with it upon development ?