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 9 of 9
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    divs all over the place - help appreciated

    I've just started building a new site and it works in most screen resolutions but it appears in some that a few div's go awol.

    Im making the site using an old version of dreamweaver. Firstly i must apoligise for my code as its a right mess. I tried spacing it out but when i do so the site appears with gaps between eveything.

    I used search and got a bit more confused to be honest. Ill link to the site so you can see the code. Im trying to fix the index page for now and then i think ill work out the others so nay adivce would be great especially if theres a way of 'tidying the code' without skewing the site.

    http://www.lumotorsport.com

    massive thanks in advance

    Steve

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello steve_9,
    That code is a bit of a mess... hard to work on with all the inline styling. I'm not seeing the need for absolute positioning either.

    Have a look at what the validator says about your site.
    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
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Here's an example of a similar layout I did a while back. No absolute positioning and it's valid code.

    View source to see how it's done.
    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

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the reply.

    I think its becuase ive used the built it functions for things with dreamweaver and it is skewing this somewhat.

    I think the only way to fix it properly is to start over and just copy and past bits.

    I'll see how it goes but any adivce inbetween would be a great help.

    Steve

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    I think its becuase ive used the built it functions for things with dreamweaver and it is skewing this somewhat.
    DreamWeaver does seem to steer people toward positioning like that. All those tiny images, like index_01.jpg through index_119.jpg, can really be consolidated. Have a look at the images that build that sample site I linked you to. There are only 8 images to build the whole site and that's including the logo and menu tabs.
    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

  • #6
    New Coder
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've managed to tidy up the code a bit. I re made the image and re chopped it so there are less images too.

    I've sorted out the div indexing but im having some issues with there relative postioning. As can be seen when you visit the link below the page goes on a long way down. i guess this is because ive made the navigation div , yellow div and blue giv all relative to the bottom of the page or an item at the bottom of the page but im not sure how.

    As far as im aware the fore mentioned divs are in the container div and so should be relative to that?

    http://www.lumotorsport.com

    thanks for your help

    Steve

  • #7
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Try this out and see if it works for you -
    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>
    <title>website template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    body{
    	text-align:center;
    	background: #fff;
    	font: 16px "Comic Sans MS";
    	color: #333;
    	text-decoration: none;
    }
    * {
    	margin: 0;
    	padding: 0;
    	border: none;
    }
    #container{
    	margin: 20px auto;
    	width: 1024px;
    	height: 801px;
    	text-align: left;
    }
    #top{
     	height: 76px;
    }
    #internallinks{
    	overflow: auto;
    	height: 36px;
    }
    	#internallinks img {
    		float: left;
    	}
    #sponsors{
    	overflow: auto;
    	height: 48px;
    }
    	#sponsors img{
    		float: left;
    	}
    #background{
    	overflow: auto;
    	height: 640px;
    	background: url(http://www.lumotorsport.com/images/index_22.jpg) no-repeat;
    }
    #l-menu {
    	margin: 0 0 0 15px;
    	overflow: auto;
    	background: #ccc;
    	float: left;
    	height: 288px;
    	width: 170px;	
    }
    p {
    margin: 0 20px;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="top">
        	<img src="http://www.lumotorsport.com/images/index_01.jpg" width="1024" height="76" alt="LUMotorsport logo" />
        </div>
    <div id="internallinks">
    	<a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_02.jpg" width="216" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_03.jpg" width="244" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_04.jpg" width="81" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_05.jpg" width="270" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_06.jpg" width="23" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_07.jpg" width="19" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_08.jpg" width="95" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_09.jpg" width="52" height="36" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_10.jpg" width="24" height="36" alt="text" /></a>
    <!--end internallinks--></div>
    <div id="sponsors">
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_11.jpg" width="112" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_12.jpg" width="104" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_13.jpg" width="112" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_14.jpg" width="113" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_15.jpg" width="100" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_16.jpg" width="107" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_17.jpg" width="46" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_18.jpg" width="63" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_19.jpg" width="77" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_20.jpg" width="75" height="48" alt="text" /></a>
        <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_21.jpg" width="115" height="48" alt="text" /></a>
    <!--end sponsors--></div>
    <div id="background">
        <div id="l-menu">
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_23.jpg" width="153" height="29" alt="home" /></a>
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_25.jpg" width="153" height="31" alt="news" /></a>	
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_26.jpg" width="153" height="30" alt="the team" /></a>
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_27.jpg" width="153" height="33" alt="the cars" /></a>
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_28.jpg" width="153" height="30" alt="events" /></a>
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_29.jpg" width="153" height="30" alt="media" /></a>
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_30.jpg" width="153" height="28" alt="partners" /></a>
            <a href="http://www.nopeople.com/"><img src="http://www.lumotorsport.com/images/index_31.jpg" width="153" height="37" alt="contact us" /></a>
        <!--end l-menu--></div>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
                <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
                   diam nonumy eirmod tempor invidunt ut labore et dolore magna 
                   aliquyam erat, sed diam voluptua. At vero eos et accusam et 
                   justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
                   sea takimata sanctus est Lorem ipsum dolor sit amet.
                </p>
    	<!--end background--></div>
    <!--end container--></div>
    </body>
    </html>
    I put the full path to your images and attached the CSS so you all you have to do is copy/paste to make it work.
    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

  • #8
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    For a more flexible layout, that would grow with content, have a look at this slider technique.
    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

  • #9
    New Coder
    Join Date
    Jul 2006
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I tried your code and it helped a lot. I have re written some bits for how i want it but i think its all sorted now.

    Thank you very much for your help its much appreciated.

    Steve


  •  

    Posting Permissions

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