The styles you apply to a wrapper depend entirely upon the intended purpose of the wrapper, of which we remain unaware. Hence it is impossible to make suggestions for markup and CSS, hence the request for a mockup.
As far as I can tell, everything in your page is displaying as expected. The .navigate ul is showing up in the #header div. The #footer div has a red background because that’s what you have specified: #FF3300.
If you make the image big enough, then yes — but do you really want to be putting 2048px+ wide images in your website at 300k+ apiece if there’s little if any repeating horizontally in it?
There’s a reason you don’t see websites do that a whole lot. Or should I say SUCCESSFUL websites. Sure, you have the artsy types who try it no matter what, but the sites that do usually end up ultimately useless to visitors no matter how pretty it is.
Yes, it was using a script to do the drop down which I didn’t want.
No, the script was just for IE6 since it does not support li:hover
What I was thinking about was when you hover over for the drop down it would unfold down then the menu options would unfold left and right.
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.
Which main link gets the sublist?
Will those sub list items have fixed width or repeating BG images on them?
Portfolio gets the Sub-List. I’m unsure regarding your second question, if I keep the same visual appearance graphic I have now for the main buttons then I’m not sure if they will repeat or not. I’ll have to re-examine
The reason I asked is because you will more than likely need to set a width on the sub UL to keep it from shrinkwrapping since it is set as position:absolute to remove it from the page flow.
I understand, one question I have for myself is should like the example you posted have a horizontal bar going across the screen or a few broken up individual menus, hmm !
^ Well that is normally called a DropLine Menu when the sub items are on the same line.
Something like this would be what you are looking for but of course it would need to be adapted to your own needs.
Which main link gets the sublist?
Will those sub list items have fixed width or repeating BG images on them?
The reason I asked is because you will more than likely need to set a width on the sub UL to keep it from shrinkwrapping since it is set as position:absolute to remove it from the page flow.
I was going to ask you with the previous code why there was white space below the footer in IE, but this new code you posted solved it, what was that from anyhow?
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.
I had to set the width of the header div to 1138 (quite huge) in Firefox there is no horizontal scroll bar, but there is in IE7.
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.
but I want to make my site compatible with Android and iPhones, which I don’t know very much about developing for mobile phones, I hope you can help ?
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 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:
I don’t see how that does anything it’s just a comment !!!
Hi Huskey,
Forget all about the IE comment for now, it seems to be confusing you. Your right , the comment itself does nothing. It is the width property that sets haslayout.
At some point in time though you will need to learn about haslayout.
Back to your layout:
So now we have a fixed width wrapper with a fixed position footer.
I would use a min-height:100% layout to give it a full height appearance so it ties in nicely with the fixed footer.
Working off of that demo code I have merged your nav styles in and came up with this. Just set the wrapper width to whatever you need and set the width on the .innerfoot div the same as the wrapper width.
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.
You are going to need a fixed width wrapper if you plan on using a fixed width BG image on the header/footer. If you want it to appear to be 100% width then you will need to rework the images where it can blend in with a repeating image on the body.
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.
Here is my complete final design mock-up. The UL is contained within the footer column and at the base of it, that is what I meant in a earlier post
Your UL is shown at the bottom of your header div in that image just like I placed it in my code above.
[QUOTE]third question: the footer is fixed? (always present at the bottom of the viewport?) Correct[/QUOTE]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.
#wrapper {
width:960px; /*set haslayout for IE*/
margin: 0 auto;
In FireFox that style is not the full width of the layout ? I see what that particular rule does in the style, but it only helps IE excluding Firefox.
Here is my complete final design mock-up. The UL is contained within the footer column and at the base of it, that is what I meant in a earlier post
The header and footer graphics can be background PNG, as mentioned :).
Could they, or should they be split into, two horizontal slices for the header and two horizontal slices for the footer, that would make two graphic slices for the footer to make up the entire graphic and two graphic slices (horizontal) for the header to make up the entire graphic ?
Hi,
You really need to have a plan for the site before you start building it. Like the others I am confused but I will try to wade through it with you.
It sounds like you are wanting a semi-fluid layout, you will probably need a min-width to keep your nav list items from wrapping down to a new line. If you don’t set a min-width on the wrapper you would have BG colors/images stopping short when large images in the html created a scrollbar at reduced viewport widths.
As well about the navigational area which I can’t get to position at the base of the header.
Well it really depends on what is going to be above it in the header. As it is now you have nothing to push it down and you don’t want to put a top margin on it since that would conflict with future header content.
I would absolute position the nav for now and add bottom padding to the header (and adjust height) to protect the AP nav. Now if you had an inner div in the header above the nav you could just use it to push the nav into place. Dunno what your plans are so I will AP it for now.
Generally you do not want to use fixed heights where there is fluid content, we can use min-height on your middle div but leave the fixed heights on header & footer.
I have made several general comments in the CSS and this is by no means a finished piece of code but rather it can serve as a starting point for you.
<!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>Test Page</title>
<style type="text/css">
body {
margin:0;
padding:0;
font:100%/1.3 arial,helvetica,sans-serif;
}
/*=== General Typography and Resets ===*/
h1,h2 {
margin:.25em 1em;
font:bold 1.6em/1.3 arial;
text-align:center;
}
h2 {
font-size:1.3em;
}
p {
margin:1em;
font:1em/1.3 arial;
}
img {
border:none;
}
/*=== Begin Layout Styles ===*/
#wrapper {
width:100%; /*set haslayout for IE*/
min-width:900px;
}
#header {
position:relative;/*establish containing block for AP children (#nav)*/
height:174px;/*200px 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-right:10px;
}
#nav a {
float:left;
height:25px;
padding:0 15px;
color:#FFF;
font:16px/25px arial;
text-decoration:none;
background:#000;
}
#nav a:focus,
#nav a:hover {
color:#BDF;
background:#333;
}
#content {
min-height:600px;
overflow:hidden;/*contain floats and uncollapse child margins*/
background:#666;
}
* html #content {height:600px; overflow:visible;}/*IE6 min-height and overflow reset*/
#fakeimage {
width:600px;
height:300px;
margin:0 auto;
background:lime;
}
#footer {
height:200px;
padding-top:1px;/*uncollapse child margins*/
background:#AAA;
}
#footer p {
margin:2em 1em; /*override from p styles if needed*/
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>H1 Page Title</h1>
<ul id="nav">
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
<li><a href="#">Link Five</a></li>
</ul>
</div>
<div id="content">
<h2>H2 Sub Title</h2>
<p>Main content will go here</p>
<p>Main content will go here</p>
<p>Main content will go here</p>
<p>Main content will go here</p>
<div id="fakeimage">Image Example</div>
</div>
<div id="footer">
<p>Footer Stuff Here</p>
</div>
</div>
</body>
</html>
I updated the link, the footer continues not to look like the header
your ul is in the header div, how can it be at the base of the footer?
Sorry, I meant I want it at the base of the header
as a general rule, you don’t put rules in the #wrapper just so it’s not empty. you put rules when you need to have #wrapper look some way specific. if you don’t have any specific requirements for it, so, at the moment, #wrapper is better left alone.
your ul is in the header div, how can it be at the base of the footer?
it’s like sex for a virgin: if you dare to you’ll do it i’m sure you’ll find out how to do it if you need to!
joke aside, how do you stylize the cipher one? it’s a concept. you don’t put an apple, or a train, you just use the symbol: 1.
as a general rule, you don’t put rules in the #wrapper just so it’s not empty. you put rules when you need to have #wrapper look some way specific. you don’t have any specific requirements for it, so, at the moment, #wrapper is better left alone.
think of #wrapper as a blank paper sheet. it could be a wedding invitation. you then stylize it to look like one. it could be a flyer. you stylize it accordingly. but until you make up your mind about it, it’s just a plain sheet. so make up your mind already, or leave it be
“How should I stylize my wrapper?” is the web equivalent of “How long is a piece of string?” I know
What I mean is having a empty #wrapper doesn’t make sense, so there is some sort of stylizing that has to be done
This page has gone completely wrong. I want to place navigate class within the header and the footer has a red div that I have no idea where it comes from, now it’s a little early in the day here and I know some sort of mock-up would definitely help. If you could help with this question then I will post the mock-up design, because I want to know what I’m doing wrong.
Projects you’ve previously sought help with have ended to progress more rewardingly when you’ve provided a mockup illustrating what you are aiming for.
“How should I stylize my wrapper?” is the web equivalent of “How long is a piece of string?”
For question 1, how do I make it so it adjusts with the browser window, since I can’t make it a liquid layout since the graphics will be fixed width, unless I’m wrong ?
As for question 2 I have a wrapper div to wrap the page within, does that have to have a style ?
i’m sure you’ll find out how to do it if you need to!