PDA

View Full Version : website content moves when page size is different



rusty813
Feb 27th, 2012, 01:14 PM
Everytime I adjust my browser size to test the resolution on varies sizes my website content overlaps on another how can I fix my css so page content stays in the same position not matter what size the browser is thanks.



body {
border-left:solid #000000;

border-left-width: 200px;
border-right:solid #000000;

border-right-width: 200px;
margin-left: auto;
margin-right: auto;
width: auto;
height: 100%;
}

#container {
margin-left: auto;
margin-right: auto;
width: auto;
}

#header {
top: 0px;
left: 0px;
width: 100%;
position: relative;
}

.banner {
background-image: url(../images/images/title2.png);
background-repeat: no-repeat;
width: 558px; height: 111px;
top: 21px;
left: 220px;
}

.logo {
background-image: url(../images/logo/logo2.jpg);
background-repeat: no-repeat;
width: 212px;
height: 298px;
top: 0px;
left: 0x;
}

darrennickerson
Feb 27th, 2012, 01:28 PM
Do you have a link to the site so we can see what its doing.

DanInMa
Feb 27th, 2012, 05:06 PM
yeah lets see the code for the page. Im guessing ti has somethign to do with that position relative.

Also whats with all the styling on the body tag? width auto height 100? it already does that , its the body of the document....

DanInMa
Feb 28th, 2012, 02:16 AM
ok, I looked at your site with the link you messaged me, and well. Youve got a lot to learn, but that's ok, don't we all :).

- on a side note, do you really need the time on there?

All right this is going to look a little different than what you have, but I think youll like it:

I had to use absolute urls to test with, so I did a replaceall to post here, so you will need to fix those

oh one more thing - Id also suggest make the background of the logo image all white, and remove the relative positioning from .logo. the black edges on the left hand side werent cropped that well from whatever image it started from.
if you do all white and use it with a white background it will look nice I think

html file:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<title>Home -</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[


/*
Live Date Script-
� Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/



var dayarray=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")

var montharray=new Array("January","February","March","April","May","June","July","August","September","October","November","December")


function getthedate(){

var mydate=new Date()
var year=mydate.getYear()

if (year < 1000)
year+=1900
var day=mydate.getDay()
var month=mydate.getMonth()

var daym=mydate.getDate()

if (daym<10)
daym="0"+daym
var hours=mydate.getHours()

var minutes=mydate.getMinutes()
var seconds=mydate.getSeconds()

var dn="AM"
if (hours>=12)
dn="PM"

if (hours>12){
hours=hours-12

}

if (hours==0)
hours=12

if (minutes<=9)
minutes="0"+minutes
if (seconds<=9)
seconds="0"+seconds
//change font size here
var cdate="<small><font color='000000' face='Arial'><b>"+dayarray[day]+", "+montharray[month]+" "+daym+", "+year+" "+hours+":"+minutes+" "+dn
+"<\/b><\/font><\/small>"

if (document.all)
document.all.clock.innerHTML=cdate
else
if (document.getElementById)
document.getElementById("clock").innerHTML=cdate
else
document.write(cdate)
}


getthedate()

function goforit(){

if (document.all||document.getElementById)
setInterval("getthedate()",1000)

}


//]]>
</script>
</head>

<body onload="goforit()">
<div id="container">
<div id="header">
<table border="0" cellpadding="0px" cellspacing="0px">
<tr>
<td><img src="http://my.site.com/images/logo/logo2.jpg" class=
"logo" /></td>

<td>
<span id="clock"></span><br />
<img src="http://my.site.com/images/images/title2.png" class=
"banner" />

<ul class="nav">
<li><a href="http://www.#.com/home">Home</a></li>

<li><a href="http://www.#.com/aboutme">About me</a></li>

<li><a href="http://www.#.com/gallery">Gallery</a></li>

<li><a href="http://www.#.com/videos">Videos DL</a></li>

<li><a href="http://www.#.com/chat">Chat</a></li>

<li><a href="http://www.#.com/contact">Contact me</a></li>

<li><a href="http://www.#.com/signup">Sign up</a></li>
</ul>
</td>
</tr>
</table>
</div>

<div id="content">
<div id="text1">
<h2 class="title">Win a 48hr date and trip to Miami with Mhelan Love</h2>

<h3 class="subtitle">May 2012</h3>

<center>
<img src="http://my.site.com/images/images/miami.jpg" alt="miami"
height="300" width="380" />
</center>

<p>Enter for a chance to Win a date with world renowned model Mhelan Love.
Drawing will be held during the last week of April. This is once in a lifetime
opportunity to be able travel with one of the greatest model you ever meet. Hurry
up and buy your raffle tickets for a one time price of $40.</p>

<p>For more details on contest please contact me at removed</p>
</div>
</div>

<div id="footer"></div>
</div><!-- www.*************** Analytics Code REMOVED for this example-->

</body>
</html>

DanInMa
Feb 28th, 2012, 02:17 AM
and the new styles.css



body {
background-color:#000;
}
#container {
margin : 0 auto;
background-color: #FFF;
width: 960px;
min-height: 900px;
}
#header {
width: 100%;
}
.banner {
width: 558px;
height: 111px;
}
.logo {
background-repeat: no-repeat;
width: 212px;
height: 298px;
position:relative;
left: -164px;
}
.nav {
word-spacing: 8px;
font-family: segoe script;
color: #ffffff;
padding:0px;
margin:0px;
}

.nav li {
display: inline;
}
.nav li a{
text-decoration: none;
font-family: segoe script;
font-weight: bold;
font-size: 16px;
color: #000000;
padding-top: 3px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
}
.nav li a:hover {
background-color:#000000;
color:#FFFFFF;
}
.timedate {

}
#content {
padding-top: 5px;
padding-right: 20px;
padding-bottom: 5px;
padding-left: 20px;
}
.title {
font-family: "garamond";
font-size: 35px;
font-weight: bold;
color: #336600;
line-height: 5px;
text-align: center;
}
.subtitle {
font-family: "garamond";
font-size: 30px;
font-style: italic;
font-weight: normal;
color: #336600;
line-height: 5px;
text-align: center;
}
#text1 {
font-family: "garamond";
font-size: 16px;
color: #000000;
font-weight: bold;
}