Header left and right sections

[CoolKay]

Okay I really have tried to figure this out before posting.
It doesn't seem like it outta be that hard
http://www.countyfairgrounds.net/ohio/ohiotest.php

Its my header - I have a grey box on the right and a grey box on the left I need to replace with a image specific to the left, and specific to the right. I made the header tag a division and gave it 80% width and tried to make the upper right a section rightheader and leftheader sections. Why does this not work. Help please?

[teedoff]

Originally Posted by CoolKay

Okay I really have tried to figure this out before posting.
It doesn't seem like it outta be that hard
http://www.countyfairgrounds.net/ohio/ohiotest.php

Its my header - I have a grey box on the right and a grey box on the left I need to replace with a image specific to the left, and specific to the right. I made the header tag a division and gave it 80% width and tried to make the upper right a section rightheader and leftheader sections. Why does this not work. Help please?

I'm not sure I'm following you. I dont see a leftheader section. I do see your rightheader div though.

[raptorjgzus]

header{
width:60%;

}
headerright{
width:20%;
float:right;
background:url("http://www.countyfairgrounds.net/ohio/backgroundOhiograssrighttop.gif"); 
background-repeat:no-repeat;

the problem is you for got "#" in front of the header there. And i think you wanted headerright = ".rightheader" not sure.

[Dr3am3rz]

Originally Posted by CoolKay

Okay I really have tried to figure this out before posting.
It doesn't seem like it outta be that hard
http://www.countyfairgrounds.net/ohio/ohiotest.php

Its my header - I have a grey box on the right and a grey box on the left I need to replace with a image specific to the left, and specific to the right. I made the header tag a division and gave it 80% width and tried to make the upper right a section rightheader and leftheader sections. Why does this not work. Help please?

I don't quite get you too. I do see the same thing as what teed does. =S

And, you might wan to set the border of the images link to 0? When it is browsed using IE, it shows the border. As well as for the <figure> you have, it seems to have out of your layout.

Also, you might want to take out your <nav> out of <section>, if you were to edit you #rightheader like what raptor said, your navigation bar will go haywire too. =)

[CoolKay]

http://www.countyfairgrounds.net/ohio/ohiotest.php

okay, lets see I changed my upper header tag to a division tag and gave it a 60% width. Then I made two section tags in the css3 leftheader and rightheader and each has 20% width. I just put the image for each section in the html page code. Above the Navigation division. Because these sections are not in the navigation division.

In my header everything through the navigation menu is there. I would only like however the left and right section tags to encompass everything above the navigation menu,

Another question I have here is that I made the two sections each 20% width. Although I can handle the height of each section tags graphic - How bloody wide do I make the the section graphics? If you put a percentage on these header tags as I have done do they resize in different browsers and if the browser window is resized?

Maybe I should go back to making the header 100% width and put the darn graphic in it - EXCEPT I do not know how wide to make it???? And again, does the thing resize in different browsers?
Help please, and I hope this clearer now. It is so hard to decipher anothers code

[CoolKay]

I tried all afternoon to fix this
I am at http://www.countyfairgrounds.net/ohio/ohiotest2.php
and http://www.countyfairgrounds.net/ohio/ohiotest2.css

I believe the problem is obvious

I have loaded to the real site
http://www.countyfairgrounds.net/ohio/ohio.php
without the side headers on the side of the 990 image in the center.

[raptorjgzus]


#inner {
margin: 0px auto;
width:990px;
overflow: auto;
background:url("http://www.countyfairgrounds.net/ohio/backgroundOhiocow2.gif");
background-repeat:no-repeat;


take the .gif out of your css file put here in a div between left and right. Leave the div inner there and use it as a wrapper. Then you will have more control, then you can make the wrapper how ever big you want then the 3 divs (right, middle, left) will work with percents.
***example***

<div id="wrapper">
<div id="left">
<a href="/"><img src="backgroundOhiograssrighttop.gif" border="0"
alt="left" /></a>
</div>
<div id="middle">
<a href="/"><img src="backgroundOhiocow2.gif" border="0" alt="mid"
/></a>
</div>
<div id="right">
<a href="/"><img src="backgroundOhiograssrighttop.gif" border="0"
alt="right" /></a>
</div>
</div>


css


#wrapper {
width: 960px;
height: 600px;
}
#left {
width: 20%;
float: inherit;
}
#middle {
width: 60%;
float:left;
}
#right {
width: 20%;
float: left;
}


Something like that should do you. Assuming I understand what your wanting.

[CoolKay]

lets try re phrasing this.. Do you see the image in the header at http://www.countyfairgrounds.net/ohio/ohio.php ? the one with the cow at the top of the page.
If my header is set to 100% and I make a image and put it in the header css cod and make the image say 1950 pixels wide. What happens to it in other browsers? . In otherwords if I use a image of a certain size and the chrome window is shrunk and expanded does the image in the header shrink and expand? and look okay?
I am seeing sites using top header images and am trying to figure out what is going on. I really would not like to have to break up the header image in the center into three pieces a left div, a center header division, and a right division, OR do I have to do that to accommodate different browsers and browser resizing - so my header image looks okay?
If you have some experience with this issue and can explain it to me I would really appreciate it.

[raptorjgzus]

At 1950px it will have overflow or scroll bar. Other people browsers that done have that size of screen it will do random things on there screen. But at any guess it will not look good. As a general rule of thumb no bigger then 960px. Most people have a screen resolution 960 or higher. So with that size you accomidate most people. If you want a large picture go with a percent then download several browsers and test. But it "should" be fine. I say should because percents, as awesome as they should be, are not always that great.

[CoolKay]

how can you put a image of a fixed size into a percentage.
Tiling I can see, using percentages - but an image? an image gets uploaded as a certain width and height. Its not the height here but the fixed width of the image - Or are you saying (and I am beginning to suspect) That the center image should be no bigger then 960 pixels? And that most browsers can handle that? That would bring me back to left 20%, center 960- to 990 - I believe, and right 20%.
If that is the case then I am presuming that if the different browsers cannot resize the top - the center image would show and the two sides not - but of course the centered code in container 990 after the above would always show. Is that right?

[raptorjgzus]

you can put the .gif it into your .php script, not as a fixed size. Then you can stretch it bigger with something like this

header img {
width: 100%;
min-width: 960px;

}

Then whatever size you decide to make the header block, it will fill. And the min-width will make it atleast 960. I find it best to just build my sites to the 960 and save myself the headache of percents and multiply resolutions. But there are times that a larger page would look better. For example this forum. If you start looking at the css files for this you can see what it takes to build something that can accomidate larger screens.

[SKY-ProToSs]

You don't need to float at all.

#wrapper {
width: 960px;
height: 600px;
position: relative;
}

#header {

 width: 100%;
 height: Equal to the height of your images.

}

#left {
width: equal to the width of your picture;
height: equal to the height;
position: absolute;
top: 0px;
left: 0px;
}
#middle {
width: equal to the width of your picture;
height: equal to the height;
position: absolute;
top: 0px;
left: equal to the width of your left image;
}
#right {
width: equal to the width of your picture;
height: equal to the height;
position: absolute;
top: 0px;
left: 0px;
}

You are going to want to add background: url("imagepath"); as well to all the divs.

You don't want to load them with an <img> tag, you want pure css.

In order to see everything properly we don't use % we use the exact pixel width.

If you are going for a page that stretches, then you need some kind of repeating image. The image will not expand far enough for all monitor sizes anyway. You are going to need to either do backgrounds with exact size, and then use the code I gave you just now.

The idea, is that your container div will contain all absolute's inside of itself. By doing so, you can define where they will be using position: absolute, and how the height, and width will go as well. This is a layering technique that's perfect for you!

To display the links, you don't need to use the image. You could actually just use something transparent. You don't want your page elements to be sloppy ever, so this is the best way. You could use a transparent button with a width and height, or you could place the image tags inside the appropriate divs and remove the borders.