Hi,
Im designing a new site at the moment and the links <!-- w --><a class="postlink" href="http://www.xeract.co.uk/newsites/index.php">www.xeract.co.uk/newsites/index.php</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.xeract.co.uk/newsite/index.php">http://www.xeract.co.uk/newsite/index.php</a><!-- m -->)
I have the left menu in place and the header, and I want to have the content on the right hand side of the menu. However I have run into many problems when i'm doing this, mainly because on the index page I want the content to be made up of three adverts which each have image backgrounds and text layered ontop of them. I want them to be horizontally next to each other. At the moment the images are verticaly stacked.
I've tried lots of different ideas to make this work such as floats but the usual problems are that the menu is lined up properly in 1024x800 res but anything smaller and one of the images jumps down onto the left hand side below the menu, or the page looks great in IE but not int firefox or vice versa.
Sorry if im rambling on a bit! Anyway if anyone has any ideas on how line the three adverts on the right of the menu horizontally it would be greatly appreciated! The css is:
body
{
background-color:#FFFFFF;
margin:0px;
padding:0px;
width:100%;
height:auto;
font-family:Arial, Helvetica, sans-serif;
color:#662200;
}
#container
{
display:block;
position:inherit;
margin-top:0px;
width:100%;
height:auto;
background-color:#FFFFFF;
}
#banner
{
width:100%;
height:auto;
position:inherit;
background-color:#B30000;
margin-right:auto;
margin-left:auto;
margin-bottom:0px;
margin-top:0px;
padding-bottom:0px;
border-bottom:3px solid #660000;
text-align:center;
}
#page
{
position:inherit;
width:100%;
height:auto;
background-color:#FFFFFF;
padding-right:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
}
#content
{
display:block;
float:none;
width:auto;
border:0px dotted black;
}
#advert-holder
{
width:auto;
height:auto;
margin-left:200px;
text-align:center;
}
#advert
{
margin:40px;
width:200px;
height:388px;
background-image:url(../images/advert-bg.png);
background-repeat:no-repeat;
height:388px;
text-align:center;
}
ul.menu
{
color:#FFFFFF;
width:150px;
height:auto;
margin:0px 40px 0px 0px;
padding:0px;
border-bottom:1px solid #660000;
border-top:1px solid #660000;
float:left;
font-size:14px;
font-weight:bold;
}
ul.menu li
{
list-style:none;
background-color:#660000;
background-image:url(../images/menu-template.png);
background-repeat:repeat-y;
padding:3px 10px 3px 10px;
text-align:right;
margin:0px;
border-bottom:1px solid #660000;
}
ul.menu li a
{
font-size:14px;
display:block;
text-decoration:none;
height:auto;
font-weight:bold;
margin:0px;
}
a:link, a:visited
{
color:#FFFFFF
}
a:hover, a:active
{
color:#CCCCCC;
}Put a min-width in #advert-holder, large enough to hold the 3 images. For IE you would need to use this fix: min-width in IE (<!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m -->)
Im designing a new site at the moment and the links <!-- w --><a class="postlink" href="http://www.xeract.co.uk/newsites/index.php">www.xeract.co.uk/newsites/index.php</a><!-- w --> (<!-- m --><a class="postlink" href="http://www.xeract.co.uk/newsite/index.php">http://www.xeract.co.uk/newsite/index.php</a><!-- m -->)
I have the left menu in place and the header, and I want to have the content on the right hand side of the menu. However I have run into many problems when i'm doing this, mainly because on the index page I want the content to be made up of three adverts which each have image backgrounds and text layered ontop of them. I want them to be horizontally next to each other. At the moment the images are verticaly stacked.
I've tried lots of different ideas to make this work such as floats but the usual problems are that the menu is lined up properly in 1024x800 res but anything smaller and one of the images jumps down onto the left hand side below the menu, or the page looks great in IE but not int firefox or vice versa.
Sorry if im rambling on a bit! Anyway if anyone has any ideas on how line the three adverts on the right of the menu horizontally it would be greatly appreciated! The css is:
body
{
background-color:#FFFFFF;
margin:0px;
padding:0px;
width:100%;
height:auto;
font-family:Arial, Helvetica, sans-serif;
color:#662200;
}
#container
{
display:block;
position:inherit;
margin-top:0px;
width:100%;
height:auto;
background-color:#FFFFFF;
}
#banner
{
width:100%;
height:auto;
position:inherit;
background-color:#B30000;
margin-right:auto;
margin-left:auto;
margin-bottom:0px;
margin-top:0px;
padding-bottom:0px;
border-bottom:3px solid #660000;
text-align:center;
}
#page
{
position:inherit;
width:100%;
height:auto;
background-color:#FFFFFF;
padding-right:0px;
padding-left:0px;
padding-top:10px;
padding-bottom:10px;
}
#content
{
display:block;
float:none;
width:auto;
border:0px dotted black;
}
#advert-holder
{
width:auto;
height:auto;
margin-left:200px;
text-align:center;
}
#advert
{
margin:40px;
width:200px;
height:388px;
background-image:url(../images/advert-bg.png);
background-repeat:no-repeat;
height:388px;
text-align:center;
}
ul.menu
{
color:#FFFFFF;
width:150px;
height:auto;
margin:0px 40px 0px 0px;
padding:0px;
border-bottom:1px solid #660000;
border-top:1px solid #660000;
float:left;
font-size:14px;
font-weight:bold;
}
ul.menu li
{
list-style:none;
background-color:#660000;
background-image:url(../images/menu-template.png);
background-repeat:repeat-y;
padding:3px 10px 3px 10px;
text-align:right;
margin:0px;
border-bottom:1px solid #660000;
}
ul.menu li a
{
font-size:14px;
display:block;
text-decoration:none;
height:auto;
font-weight:bold;
margin:0px;
}
a:link, a:visited
{
color:#FFFFFF
}
a:hover, a:active
{
color:#CCCCCC;
}Put a min-width in #advert-holder, large enough to hold the 3 images. For IE you would need to use this fix: min-width in IE (<!-- m --><a class="postlink" href="http://www.svendtofte.com/code/max_width_in_ie/">http://www.svendtofte.com/code/max_width_in_ie/</a><!-- m -->)