The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.
I've never actually used Div + Css in my page layouts before so please excuse my ignorance towards the subject.
Basically I want a header image on the top of the page that expands with different browser widths.
The header consists of 3 images that I want in this order.
On the left is the image with the site logo.
In the middle is an expandable 100% width image.
On the Right is an extra image to give the header a nice rounded look.
Currently I have this:
Css:
.header {
background-image: url("Images/headermid.jpg");
width: 100%;
height: 52px;
z-index: 1;
position:absolute;
}
.header-image-left {
background-image: url("Images/headerleft.jpg");
width: 277px;
height: 50px;
z-index: 2;
}
.header-image-right {
background-image: url("Images/headerright.jpg");
width: 8px;
height: 50px;
z-index: 2;
}
Now the header displays fine, apart from the headerright image appears beneath the header, instead of aligned to the right.
I've tried everything I can think of.. Adding position and align code, moving the headerright div outside of the original header tag, even tried adding a middle filler image to force the image to the right.
Thanks in advance to anyone that can help.
Basically I want a header image on the top of the page that expands with different browser widths.
The header consists of 3 images that I want in this order.
On the left is the image with the site logo.
In the middle is an expandable 100% width image.
On the Right is an extra image to give the header a nice rounded look.
Currently I have this:
Css:
.header {
background-image: url("Images/headermid.jpg");
width: 100%;
height: 52px;
z-index: 1;
position:absolute;
}
.header-image-left {
background-image: url("Images/headerleft.jpg");
width: 277px;
height: 50px;
z-index: 2;
}
.header-image-right {
background-image: url("Images/headerright.jpg");
width: 8px;
height: 50px;
z-index: 2;
}
Now the header displays fine, apart from the headerright image appears beneath the header, instead of aligned to the right.
I've tried everything I can think of.. Adding position and align code, moving the headerright div outside of the original header tag, even tried adding a middle filler image to force the image to the right.
Thanks in advance to anyone that can help.
What exactly are you trying to do?
Aww damn...
There a certain elements that must be pixel perfect in size..
Think I might scrap Div's for tables instead then, or try using both.
There a certain elements that must be pixel perfect in size..
Think I might scrap Div's for tables instead then, or try using both.
Theres no direct way around this. When something is declared as 100% it doesnt expand to 100% of the space available. It gets the width of the browser screen and sets it to that.
Therefore say your browser width is 1000px it will take 100% as a 1000px.
So if you add to this a 200px wide menu, the total will be 1200px so therefore you will get this scroll.
If you are going to do this everything must be done using percentages.
Therefore say your browser width is 1000px it will take 100% as a 1000px.
So if you add to this a 200px wide menu, the total will be 1200px so therefore you will get this scroll.
If you are going to do this everything must be done using percentages.
Malaktix wrote:
> Ok then, is there any way I can set the width of a div tag to 100% of
> the space available not the whole screen.
>
> What I mean is, when I set width to 100%, the Div tag expands to the
> size of 100% of the screen, even if some of that 100% has already
> been used by other Div tags. Which means that you have to scroll
> horizontally to see the whole page.
BUMP! Someone here must have an answer.
> Ok then, is there any way I can set the width of a div tag to 100% of
> the space available not the whole screen.
>
> What I mean is, when I set width to 100%, the Div tag expands to the
> size of 100% of the screen, even if some of that 100% has already
> been used by other Div tags. Which means that you have to scroll
> horizontally to see the whole page.
BUMP! Someone here must have an answer.
Ok then, is there any way I can set the width of a div tag to 100% of the space available not the whole screen.
What I mean is, when I set width to 100%, the Div tag expands to the size of 100% of the screen, even if some of that 100% has already been used by other Div tags. Which means that you have to scroll horizontally to see the whole page.
What I mean is, when I set width to 100%, the Div tag expands to the size of 100% of the screen, even if some of that 100% has already been used by other Div tags. Which means that you have to scroll horizontally to see the whole page.
Coin wrote:
> Heh.
>
> Remmember the "Clear" selector. After floated DIVs, use the
> clear selector to place another div below it.
>
> (Especially useful for footers.)
Mate your a genius, I just came here to ask a question you just answered!
Cheers.
> Heh.
>
> Remmember the "Clear" selector. After floated DIVs, use the
> clear selector to place another div below it.
>
> (Especially useful for footers.)
Mate your a genius, I just came here to ask a question you just answered!
Cheers.
Heh.
Remmember the "Clear" selector. After floated DIVs, use the clear selector to place another div below it.
(Especially useful for footers.)
Remmember the "Clear" selector. After floated DIVs, use the clear selector to place another div below it.
(Especially useful for footers.)
Aha!
Discovered the use of "float", and all is good.
I will probably encounter more problems so expect more questions in this topic.
Discovered the use of "float", and all is good.
I will probably encounter more problems so expect more questions in this topic.
I've never actually used Div + Css in my page layouts before so please excuse my ignorance towards the subject.
Basically I want a header image on the top of the page that expands with different browser widths.
The header consists of 3 images that I want in this order.
On the left is the image with the site logo.
In the middle is an expandable 100% width image.
On the Right is an extra image to give the header a nice rounded look.
Currently I have this:
Css:
.header {
background-image: url("Images/headermid.jpg");
width: 100%;
height: 52px;
z-index: 1;
position:absolute;
}
.header-image-left {
background-image: url("Images/headerleft.jpg");
width: 277px;
height: 50px;
z-index: 2;
}
.header-image-right {
background-image: url("Images/headerright.jpg");
width: 8px;
height: 50px;
z-index: 2;
}
Now the header displays fine, apart from the headerright image appears beneath the header, instead of aligned to the right.
I've tried everything I can think of.. Adding position and align code, moving the headerright div outside of the original header tag, even tried adding a middle filler image to force the image to the right.
Thanks in advance to anyone that can help.
Basically I want a header image on the top of the page that expands with different browser widths.
The header consists of 3 images that I want in this order.
On the left is the image with the site logo.
In the middle is an expandable 100% width image.
On the Right is an extra image to give the header a nice rounded look.
Currently I have this:
Css:
.header {
background-image: url("Images/headermid.jpg");
width: 100%;
height: 52px;
z-index: 1;
position:absolute;
}
.header-image-left {
background-image: url("Images/headerleft.jpg");
width: 277px;
height: 50px;
z-index: 2;
}
.header-image-right {
background-image: url("Images/headerright.jpg");
width: 8px;
height: 50px;
z-index: 2;
}
Now the header displays fine, apart from the headerright image appears beneath the header, instead of aligned to the right.
I've tried everything I can think of.. Adding position and align code, moving the headerright div outside of the original header tag, even tried adding a middle filler image to force the image to the right.
Thanks in advance to anyone that can help.