Log In · Register

 
It's been a while since I've coded
LaRachel
post May 27 2009, 08:15 PM
Post #1


Senior Member
***

Group: Member
Posts: 75
Joined: Feb 2009
Member No: 717,000
Bear with me. I'm sure it's something silly...

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Past to Present</title>
<style type="text/css">
body {
background:Url("http://i39.tinypic.com/23tl79x.png");
background-repeat: repeat;
font-size: 12px;
color:black;
text-align: center;
}


#image {
position:absolute;
left: 50%;
width: 850px;
margin-left:-425px;
}


#navigation {
position:absolute;
left: 50%;
width: 200px;
margin-left:-425px;
top: 425px;
text-align: center;
background-color: white;
float: left;
}


#content {
position:absolute;
top: 425px;
left: 69.5%;
margin-left:-425px;
align: center;
width: 650px;
text-alight: center;
background-color: white;
float: right;
}

a, a:link, a:visited {
font-size:14;
font-color:#9DBAB6;
}

a:hover {
font-size:14;
font-color:#75C7A7;
}

b, strong {
color: #D6E59F;
}


i {
color: #F386A6;
}


s {
color: #D788BF;
}


u {
color: #FFF4A1;
}


h1 {
color:#70CBF3;
font-size: 16px;
letter-spacing:0px;
font-family: arial;
text-transform: uppercase;
}

a:link, a:visited, a:active
{font: 16px arial;
color: #D88DC2;
font-weight:normal;
text-decoration: none;
border-bottom: 1px dashed #D88DC2;
}

a:hover
{font: 16px arial;
color: #FFF39C;
font-weight:normal;
text-decoration: none;
border-bottom: 1px dashed #FFF39C;
}



</style>
</head>
<body>
<div id="image">
<img src="http://i40.tinypic.com/ruct8g.png">

</div>


<div id="navigation"><p>
Hello, this is where all of the links will go. Toodles.
</p></div>

<div id="content"><p>
this is really effing scary.
</p></div>

</div>
</body>
</html>


So, two problems. The first one is that my content div is doing wacky things in different resolutions, as well as in different browsers. It's only lined up properly in firefox with a 1024x762 resolution, and I literally have no idea how to fix it.

Also, I don't have a set height on my content and navigation divs, but is there a way for them to end at the same place? I'm using this for a blog, so the content div will be much taller than the navigation. Is there a way to make the navigation just as long as the content without having a set height?
 
 
 Start new topic
Replies
schizo
post May 27 2009, 10:37 PM
Post #2


Senior Member
******

Group: Staff Alumni
Posts: 2,435
Joined: Feb 2007
Member No: 506,205
For your content area, keep it at left:50% and change the margin-left:#px only. Also, it doesn't look like you need floats here. You could probably get rid of those completely.
 

Posts in this topic
LaRachel   It's been a while since I've coded   May 27 2009, 08:15 PM
schizo   For your content area, keep it at left:50% and cha...   May 27 2009, 10:37 PM
LaRachel   Thanks   May 28 2009, 08:46 AM
manny-the-dino   Topic Closed & Moved   May 28 2009, 05:01 PM

« Next Oldest · Webmasters' Corner Resolved Topics · Next Newest »
 

Closed TopicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic