I am new to this web design stuff so take it easy on me.
I have 2 problems. (well 1 query + 1 problem)
I have a web page with a container div of a fixed width.
In this I have another container div and in this I have some elements that make up the top part of the page.
No1.
Firstly I want the logo to overlap by a certain amount from its container div on to the page background, so I have absolutely positioned and given a negative value on the Y axis that pushes it out of the boundary of it's parent div
This seems to work but I am not sure if this is good practice to do it this way?
No2.
I have a div named searchbox element inside the second 'top' container div, and I have positioned this using margins to get it to sit where I want it to, but for some reason both in IE7 and FireFox the margin-right seems to get ignored as the box extends out beyond its containing div element.
Any help, tips would be appreciated as I have wasted hours trying to figure out what appears to be a very simple problem.
Thanks
#container
{
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#topcontainer
{
width:100%;
height:800px;
position:relative;
background-image:url('TopContainerBckGrdnt.png');
background-repeat:repeat-x;
}
#logo
{
width:430px;
height:154px;
position:absolute;
left:20px;
top:-25px;
background-image:url('LearnVyooLogo.png');
background-repeat:no-repeat;
z-index:1000;
}
#searchbox
{
width:100%;
height:200px;
margin-top:135px;
margin-right:20px;
margin-left:20px;
float:left;
background-image:url(SearchBoxGradient.png);
background-repeat:repeat-x;
}
I have 2 problems. (well 1 query + 1 problem)
I have a web page with a container div of a fixed width.
In this I have another container div and in this I have some elements that make up the top part of the page.
No1.
Firstly I want the logo to overlap by a certain amount from its container div on to the page background, so I have absolutely positioned and given a negative value on the Y axis that pushes it out of the boundary of it's parent div
This seems to work but I am not sure if this is good practice to do it this way?
No2.
I have a div named searchbox element inside the second 'top' container div, and I have positioned this using margins to get it to sit where I want it to, but for some reason both in IE7 and FireFox the margin-right seems to get ignored as the box extends out beyond its containing div element.
Any help, tips would be appreciated as I have wasted hours trying to figure out what appears to be a very simple problem.
Thanks
#container
{
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:50px;
}
#topcontainer
{
width:100%;
height:800px;
position:relative;
background-image:url('TopContainerBckGrdnt.png');
background-repeat:repeat-x;
}
#logo
{
width:430px;
height:154px;
position:absolute;
left:20px;
top:-25px;
background-image:url('LearnVyooLogo.png');
background-repeat:no-repeat;
z-index:1000;
}
#searchbox
{
width:100%;
height:200px;
margin-top:135px;
margin-right:20px;
margin-left:20px;
float:left;
background-image:url(SearchBoxGradient.png);
background-repeat:repeat-x;
}