Hi Everyone,
I have created the the following site http://www.sgabeauty.com/facials.html however when i view on a widescreen pc such as 16.4 the logo picture (sga_beautytogrey2.jpg) and sidemenu (<div class=“treatmentssidenav”>) stays out from the main content ,(“overlaps on the container div”) .
The same page seems fine on a 14.1 screen pc.
I have also added a screenshot.
Basicly i want to position the logo picture and the treatmentssidenav div, in the container div.
I believe it is a postion issue on the css but if someone can help me to avoid this happening, i would be very much grateful.
Many thanks in advance
maksin
my css code as below
quote
@charset “utf-8”;
/* CSS Document */
body{ font-family:Verdana, Arial, Helvetica, sans-serif;
text-align:left;
background-color:#52525e;}
div#header{
width:1100px;
margin-right:auto;
margin-left:auto;
background-color: #999999;
height: 126px;}
div#container{
width:1100px;
height: 703px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:40px;
padding-top:0px;
background-color:#999999;}
#logo {
position:absolute;
left:94px;
top:40px;
width:182px;
height:85px;
z-index:1;}
#logo img{border:none;}
/* Navigation Bar */
#widemenu ul li{float: left;
list-style-type: none;
padding:5px 35px 5px 5px;
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:16px;
display:block;}
#widemenu {
background-color: #CCCCCC;
position:absolute;
top:152px;
left:auto;
right:auto;
height: 25px;
width: 1100px;
}
#widemenu ul li a {
color: #000000;
text-decoration:none;
display: block;}
#widemenu ul li:hover{
background-color:#bbbbbb;
display: block;
height: 15px;}
#widemenu ul{
height: 8px;
margin: 0px;
padding: 0px;
display:block;}
.facialtable{
text-align:center;
padding: 5px 5px 5px 15px;
}
.facialtable table {border: thin dotted #666666;
}
.facialtable td{
text-align:left;
padding-left: 10px;
margin-left: 1em;
font-weight:bold;}
/* about me corner */
.contentplace {
background-color: #dadada;
color: #666666;
width: 776px;
position:absolute;
top: 206px;
left: 369px;
}
.contentplace p { margin: 0px 10px 0px 20px; }
.contentplace h2 { margin: 5px 10px 10px 10px; padding-left:20px; padding-right:10px;}
.topplace{ background: url(footer/zentopr.png) no-repeat top right; }
.bottomplace { background: url(footer/zenbottomr.png) no-repeat top right; }
img.placeborder { width: 25px; height: 25px;border: none; display: block !important; }
/* about me end */
/* treatments left side nav corner */
.treatmentssidenav{
position:absolute;
left:93px;
top:206px;
width:221px;
height:347px;
z-index:13;
background-color:#dadada;}
.treattop{background: url(footer/zentopr.png) no-repeat top right;}
.treatbottom{background: url(footer/zenbottomr.png) no-repeat top right;
background-color:#dadada;}
img.placenav{width: 25px; height: 25px;border: none;display: block !important; }
.treatmentssidenav th{ padding-left: 10px;
}
.treatmentssidenav th a{ text-decoration:none;
color:#000000;}
.treatmentssidenav th a:hover{ text-decoration:none;
color:#ff99ff;}
.treatmentssidenav th a:visited{ text-decoration:none;
color: #3399FF;}
.treatmentssidenav th:hover {
background:#FFFFFF;
color:#ff99ff;}
/* treatments left side nav corner ends*/
/* header corner */
.ctopplace{ background: url(footer/zentoprht.png) no-repeat top right;
background-color:#999999;
width: 1100px;
margin-top: 0px;
margin-bottom: 0px;}
img.placeborder { width: 25px; height: 25px;border: none;display: block !important; }
/* header corner end */
div#footer{
width:1100px;
float:left;
clear:left;
background-color: #999;
text-align:center;
padding-top: 15px;
height:43px;
line-height: 1em;
position:absolute;
top: 640px;}
div#footer p{font-size:10px;}
/* footer corner */
.footercorner{
background: url(footer/25rht.png) no-repeat top right;
background-color:#999999;
width: 1100px;
position:absolute;
top: 710px;
bottom: 30px;
height: 15px;
border-bottom-color:#999999;
background-image: url(footer/25rht.png);
}
img.footerborder{ width: 15px; height: 15px;border: none;display: block !important; }
.date{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size:14px;
color:#FFFFFF;
position:absolute;
left:993px;
top:131px;
width:208px;
height:29px;
z-index:16;
}
unquote
