Trying something new 1

[Gatorajc]

Ok have been trying style sheets all morning to try to get a page built just using them. Was hard at first but getting the hang of it. One thing though.

I have 3 images going across the top. The first image on the left is 150px the middle one is 610px. All is well. But I want the third one to take up the rest of the page no matter what resolution, and I can not quite get it. It either is to small or if I set it to 100% width using SS it is to big. I tried making the image really small and set its with to 100% in the code but no luck there either.

Any Ideas. With tables I can fix it but for some reason cannot figure it out here.

AJ


If at first you do not succeed, cheat!

 

[EdwardMartinIII]

What are the sizes (X & Y) and names of each of the images?

For example:
"Nosehair.jpg" 266 px wide x 5 px high

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[Gatorajc]

"title1" 150 px wide x 68 high
"title2" 610 px wide x 47 high
Third one I cropped to try to fix it.

Like this is scrolled
"title3" 244 px wide x 47 high

Like this no but left white space
"title3" 10px wide x 47 high

I did the style like this

img.headerImg {
left: 0px;
top: 0px;
z-index: -1;
position: absolute;

}
img.headerImg2 {
left: 151px;
top: 0px;
z-index: -1;
position: absolute;

}

This I also tried both ways.

img.headerImg3 {
left: 761px;
top: 0px;
z-index: -1;
vertical-align: top;
position: absolute;

and


img.headerImg3 {
left: 100%;
top: 0px;
z-index: -1;
vertical-align: top;
position: absolute;


AJ


If at first you do not succeed, cheat!

 

[EdwardMartinIII]

So, what do you want to happen?

[ol]
[li]All images stay the same size/proportion. If the browser window is too small, then there's a horizontal scrollbar. If the browser window is too big, then title1 hugs the left browser border, title2 hugs title1' right border, and title3 hugs the right browser border.[/li]
[li]image 1 and image 2 stay the same size. image 1 hugs the left browser border. Image 2 hugs image 1's right border. Image 3 will rescale (either both directions or horizontally-only) to fill up any remaining space. If the browser is too small to commodate this, there will be a horizontal scrollbar.[/li]
[li]All images stay the same size/proportion. If the browser window is too small, then there's a horizontal scrollbar. If the browser window is too big, then title1 hugs the left browser border, title2 hugs title1' right border, and title3 centers itself in the remaining space.[/li]
[/ol]

Any of those describe what you want to do?

Cheers,


Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

 

[Gatorajc]

I want number 2 with a table I can set the third image and cell to 100% and it will resize with no scroll bar but for some reason with the style sheet it has a scroll bar no matter what.

AJ


If at first you do not succeed, cheat!

 

[ChrisHirst]

without seeing what the image is.

Why not use it as a background in a <div>




Chris.

Indifference will be the downfall of mankind, but who cares?

 

[vbkris]

did u try the 100% in the image's tag?
<img src=&quot;asd&quot; widht=&quot;100%&quot;>

Known is handfull, Unknown is worldfull

 

[Gatorajc]

its a normal image nothing special about it. Its a square blue image.

Yea I tried that vbkris still did not work.

AJ


If at first you do not succeed, cheat!

 

[Vragabond]

I don't have the proper equipment to test this, but maybe you could try this...:

img.headerImg3 {
left: 0px;
top: 0px;
width: 100%;
z-index: -2;
vertical-align: top;
position: absolute;
}

It is somewhat cheating, but I it worked in my case

 

[Gatorajc]

HUGE BIG BRIGHT STAR FOR Vragabond!!!

Should have know that. I did something like that with an image below that but I moved it up. I'm kicking myself.

Thanks to everyone.

AJ


If at first you do not succeed, cheat!