...

View Full Version : Text Positioning Problem



katie_lostsoul
01-11-2008, 08:53 PM
Hello,

If you go to http://tombraiders.net/katie/sid/index.html

User: letme
Pass: in

you'll see that the body text is shifted halfway down the page. Anyone know how I can fix this?

Also, how can I fix the rollover for the menu? I don't want the rollover coloured square to be so long.

Thanks!

Excavator
01-11-2008, 09:17 PM
Hello katie,
Some serious divitis going on there! And absolute positioning is not helping.
To get your text and menu up where you want them, give the #linklist a width and float it left. Make sure the stuff inside #linklist, your ul, is not too wide.
Your body text divs can be margined over the width of #linklist.
The other divs are not needed.

katie_lostsoul
01-11-2008, 09:26 PM
I added a float: left to the menu and now it pushes the entire thing down the page, lower than where the body text is.

Excavator
01-11-2008, 11:45 PM
I think your original code needed quite a bit of work before float:left; on #linkList would have much affect.
Copy/paste this into a new .html document and look at it in your browser:
<!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=utf-8" />
<title>Untitled Document</title>
<meta name="" content="authored by http://nopeople.com/Design" />
<style type="text/css">
html, body {
background: url(http://tombraiders.net/katie/sid/images/bg.jpg);
font: normal 10px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
* {
margin: 0;
padding: 0;
border: none;
}
#container {
width: 744px;
margin: 20px auto;
background: #FFFFFF;
border: 1px solid #000000;
}
#linkList {
width: 150px;
float: left;
margin: 10px 0 0 0;
background: #fff
}
#linkList ul {
list-style: none;
width: 150px;
}
#linkList li a:hover {
padding: 5px 2px 5px 17px;
color: #fff;
background: #6e6e6e;
}
#linkList li a {
color: #000000;
display: block;
padding: 5px 2px 5px 17px;
font-weight: normal;
text-decoration: none;
}
.body {
margin: 10px 0 0 150px;
padding: 0 10px 10px 10px;
text-align: justify;
}
h3 {
height: 20px;
margin-top: 0px;
width: 448px;
}
</style>
</head>
<body>
<div id="container">
<img src="http://tombraiders.net/katie/sid/images/header.jpg" alt="header logo" width="744" height="155" />
<div id="linkList">
<ul>
<li><a href="">Home</a></li>
<li><a href="">About Us</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">Links</a></li>
</ul>
<!--end linkList--></div>
<div class="body">
<h3>Title 1</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s.
</p>
</div>
<div class="body">
<h3>Title 2</h3>
<p>
Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of type
and scrambled it to mak when an unknown printer took a galley of type
and scrambled it to make.
</p>
</div>
<!--end container--></div>
</body>
</html>

katie_lostsoul
01-12-2008, 03:48 PM
Much better! That is awesome, thank you so much. I'm going to compare to the old code and see what you did to it!

Thank you again :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum