...

View Full Version : divs all over the place - help appreciated



steve_9
11-29-2008, 07:33 PM
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

Excavator
11-29-2008, 07:58 PM
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. (http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.lumotorsport.com%2F)

Excavator
11-29-2008, 08:13 PM
Here's an example of a similar layout (http://nopeople.com/cworld/)I did a while back. No absolute positioning and it's valid code.

View source to see how it's done.

steve_9
11-29-2008, 08:15 PM
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

Excavator
11-29-2008, 08:32 PM
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 (http://nopeople.com/cworld/)I linked you to. There are only 8 images to build the whole site and that's including the logo and menu tabs.

steve_9
11-30-2008, 12:32 AM
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

Excavator
11-30-2008, 03:42 AM
Try this out and see if it works for you -
<!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.

Excavator
11-30-2008, 03:44 AM
For a more flexible layout, that would grow with content, have a look at this slider technique. (http://nopeople.com/CSS/slider/index.html)

steve_9
11-30-2008, 10:46 AM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum