Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Text Positioning Problem

    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!

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,668
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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:
    Code:
    <!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>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    katie_lostsoul (01-12-2008)

  • #5
    Regular Coder
    Join Date
    May 2004
    Posts
    121
    Thanks
    12
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •