Please help newbie with Header question/problem

Get Started
1

Hi,

I created a web page with a logo and a banner. Now I would like to make the logo and banner a little bit larger. Here is the original web page http://www.sfth.org

My laptop computer resolution is 1280 by 768.

The current size of the logo is 98 px by 98 px. The current size of the banner is 98 px by 490 px.

The new size of the logo is 110 px by 110 px. The new banner size is 110 by 552. That is only a total of 672 px.

When I increased the size of the logo and banner and I check my work at 800 by 600 pixels the banner moves over to the left and lines up underneath the logo. Yes, I know that the CSS has the banner floating left.

I uploaded a new test page and a seperate CSS for this test page.

Here is the link to the test page http://www.sfth.org/test.html

Is there anything that I can do to keep the banner in its current position when the resolution is 800 X 600?

Thank you for your help.

Newdesigner

2

Hey, I think I may have a tip for you. If you are in fact using a CSS file, you should set a minimum page width, this way, you can stop things from piling up on each other.

Like this:



body { min-width: 800px;
}

The number for pixels will change depending on what the number of pixels is right before it starts to stack. Make sure you put this in the body section so it will apply to the whole page. Give it a try, hope this helps.

-Aaron

3

If you give the banner a position:absolute then that is one option. Another would be to set a min-width on the container.

4

Thank you Stevie and Aaron for your help.

I didn’t use absolute positioning for the 2 header items. I used float.

I am confused though as to where I should place the minimum width.

Here is part of the CSS that pertains to my header and the body content.

Please tell me my best option for the logo and the banner in my header.

body {
margin: 0;
padding: 0;
height: 100%;
border: 12px solid #b0c4de;
font: 96.9%/1.05em Tahoma, Verdana, Arial, sans-serif;
}
#header {
margin: 0;
padding: 0;
background-color: #4682b4;
border: 1px solid #000000;
}
#main {
margin: 0;
padding: 0;
width: 100%;
font: 1em/1.2 Tahoma, Verdana, Arial, sans-serif;
background: #b0c4de;
overflow: hidden;
}
#sidebar {
float: right;
width: 240px;
margin: 0;
padding-left: 8px;
border: 0;
background-color: #800080;
}
Content {
border: 0;
background-color: #b0c4de;
margin: 0 248px 0 0;
padding: 0;
}
#logo {
float: left;
padding: 0;
margin: 1.2em 0 0 1.3em;
border: 1px solid black;
}
#banner {
float: right;
padding: 0;
margin: 1.2em 28em 0 6em;
border: 1px solid black;
}

I own 3 different Sitepoint books and I don’t believe that I saw this problem addressed in any of those books. I also looked at another Sitepoint book at the library today and I could not find anything that addressed this problem.

I thought about setting a minimum width briefly but I didn’t know how much to set for the minimum width or if that was my best option so I didn’t try doing that.

Thank you both for your answers.

Newdesigner

5

I just tried setting the minimum width to 800 px in the body of the CSS on my laptop computer.

That didn’t work.

When I checked to see if setting the minimum width in the body would work I saw a scroll bar at the bottom of my computer and the banner moved to the far left. The far left part of the banner was not visible.

Newdesigner

6

Add a CSS rule for #wrapper

#wrapper {min-width:800px;}
7

Victorinox, thank you for your suggestion to fix my problem.

I hate to say this, but your suggestion did not solve the problem. I still have the banner moving all the way over to the left underneath the logo and part of the banner is off of my computer screen.

I left your wrapper suggestion in the CSS for this web page, at least for now.