Layout not aligning properly

This is a discussion on "Layout not aligning properly" within the Web Page Design section. This forum, and the thread "Layout not aligning properly are both part of the Design Your Website category.



Go Back   Webforumz.com > Main Forums > Design Your Website > Web Page Design
Reload this Page Layout not aligning properly

Notices
Please Register!
Webforumz.com is an education based community supporting web designers, developers and those who are new and learning. If you are a designer, developer, learning web design or are thinking about a career in web design then you have come to the right place. Register for free now to access more information and to participate in discussion and debate.


Reply
 
LinkBack Thread Tools
  #1 (permalink)  
Old Feb 11th, 2008, 02:40
Up'n'Coming Member
Join Date: Jul 2007
Location: Glasgow
Age: 15
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Layout not aligning properly
Hi, I'm trying to get some of my parts of my site to align properly and its just not happening. Link to website
It should look like this: Link to image

HTML
HTML: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>
        HL2D Home
    </title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>


<body>
<div id="container">

<div id="nav">
<div id="image">
    <a href="Home.html">
    <img border="0" src="Images/HL2DLogo.png" width="137" height="112" alt="Hl2DLogo" />
    </a>    
</div>

    <a class="navCon" title="Home">Home</a>    
    <a class="nav" href="about.html" title="About">About</a>
    <a class="nav" href="screenshots.html" title="Screenshots">Screenshots</a>
    <a class="nav" href="downloads.html" title="Downloads">Downloads</a>

<div id="content">

<div id="header">
<h1>Home</h1>
</div>
    
<div id="newsContainer">
    <div class="contentTop">
    <h2>News</h2>
    </div>
    
    <div class="contentMid">
    <p>
    <h4>10.8.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4>10.7.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4>10.6.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4>10.5.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    </div>
    
    <div class="contentBottom">
    </div>
    
</div>
    
<div class="screenshots">

<div class="contentTop">
<h2>Screenshots</h2>
</div>

<div class="contentMid">
<a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 1" />
    </a>
    
    <a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 2" />
    </a>    
    
    <a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 3" />
    </a>    
    
    <a href="">
    <img border="0" src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 4" />
    </a>
</div>

<div class="contentBottom">

</div>
</div>

<div class="about">
<h2>About</h2>
<p>Hl2D stands for Half Life 2D, HL2D is a recreaction of Half Life. It has a different story but some of the enemies are still the same. It's made with Construct

</div>

</div>
<div id="contentEnd">

</div>

<div id="footer">
Designed by Joe Blair
</div>
</div>

    

    

</body>

</html>
CSS
Code: Select all
body {
    background-color: #666666;
    font-family: Arial;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
}
p {
    font-size: 10;
}
h4 {
    padding: 0px;
    margin: 0px;
    text-align: left;
}


a.nav, a.nav:link, a.nav:visited  {
    display: block; 
    width: 98px; 
    height: 45px; 
    background: url(Images/NavTab.png); 
    border: 0px; 
    margin-top: 5px;
    margin-left: 24px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #999; 
    line-height: 70px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}

a.nav:hover  {
color: #FFA824; 
}

a.navCon, a.navCon:link, a.navCon:visited {
    display: block; 
    width: 122px; 
    height: 46px; 
    background: url(Images/NavTabOn.png); 
    border: 0px; 
    margin-top: 5px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #000; 
    line-height: 68px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}
#container {
width: 810px;
margin: auto;
}
#nav {
padding-left: 20;
float: left;
width: 122px;
}
#content {
padding-top: 0px;
margin-left: -18px;
background: url(Images/Layout/Middle.png) repeat-y right;
}
#header {
background: url(Images/Layout/Top.png) no-repeat;
width: 688px;
padding-left: 30px;
padding-top: 0px;
margin-left: 130px;
height: 20px;
}
#news {
width: 300px;
background: none;
padding-left: 30px;
padding-top: 30px;
margin-left: 130px;

}
#screenshots {
float: right;
width: 300px;
height: 400px;
}
#about {
position: top;
width: 300px;
float: right;
border: 1px;
}
#contentEnd {
height: 20px;
background: url(Images/Layout/Bottom.png) no-repeat right;
margin: 0px;
padding: 0px;

}
#footer {
font-size: 10px;
clear: both;
height: 30px;
}
#news h2 {
    margin: 0;
    padding: 0;
}

#news p {
    margin: 0;
    padding: 0;
}
.Hide {
display: none;
}
#image {
margin-left: -20px;
}
.contentTop {
margin-left: 150px;
width: 313px;
height: 20px;
padding: 0px;
margin: 0px;
background: url(Images/Layout/ContentTop.png);
}
.contentMid {
margin-left: 150px;
width: 313px;
margin: 0px;
padding: 0px;
background: url(Images/Layout/ContentMid.png) repeat-y;
}
.contentBottom {
margin-left: 150px;
width: 313px;
height: 20px;
background: url(Images/Layout/ContentBottom.png);
}
Last edited by casho; Feb 11th, 2008 at 09:03.
Reply With Quote

  #2 (permalink)  
Old Feb 11th, 2008, 08:21
SuperMember

SuperMember
Join Date: Jun 2007
Location: uk
Posts: 459
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Layout not aligning properly
Had a quick look and to be honest its a bit of a mess. Start by checking all your divs are closed and perhaps remove your google adds until you get your layout correct.

hope this helps.

Pat
Reply With Quote
  #3 (permalink)  
Old Feb 11th, 2008, 09:02
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,388
Blog Entries: 13
Thanks: 1
Thanked 17 Times in 15 Posts
Re: Layout not aligning properly
you have 15 errors in your html that you need to sort out.

the two most obvious ones are :

Line 4, Column 1: Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml.
<html>
Many Document Types based on XML need a mandatory xmlns="" on the root element. For example, the root element for XHTML will look like:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Line 41, Column 7: end tag for element "scrip" which is not open.
</scrip>
The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.
__________________
WelshStew
Lead Administrator
 tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Web Standards Curriculum Launched (Jul 8th, 2008)
Reply With Quote
  #4 (permalink)  
Old Feb 11th, 2008, 09:04
Up'n'Coming Member
Join Date: Jul 2007
Location: Glasgow
Age: 15
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Layout not aligning properly
I've sorted some stuff out but it still don't know what to do.
Reply With Quote
  #5 (permalink)  
Old Feb 11th, 2008, 09:08
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,388
Blog Entries: 13
Thanks: 1
Thanked 17 Times in 15 Posts
Re: Layout not aligning properly
although my magic 8 ball is pretty good when it comes to most questions, asking it to produce amended code gets it a bit confused.

can you either repost the amended code, or a link please. thanks
__________________
WelshStew
Lead Administrator
 tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Web Standards Curriculum Launched (Jul 8th, 2008)
Reply With Quote
  #6 (permalink)  
Old Feb 11th, 2008, 09:26
Up'n'Coming Member
Join Date: Jul 2007
Location: Glasgow
Age: 15
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Layout not aligning properly
Some of the errors in the Validation don't make sense to me.
Reply With Quote
  #7 (permalink)  
Old Feb 11th, 2008, 09:28
Up'n'Coming Member
Join Date: Jul 2007
Location: Glasgow
Age: 15
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Layout not aligning properly
Link to site

Html
HTML: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
    <title>
        HL2D Home
    </title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>


<body>
<div id="container">

<div id="nav">
<div id="image">
    <a href="Home.html">
    <img src="Images/HL2DLogo.png" width="137" height="112" alt="Hl2DLogo" />
    </a>    
</div>

    <a class="navCon" title="Home">Home</a>    
    <a class="nav" href="about.html" title="About">About</a>
    <a class="nav" href="screenshots.html" title="Screenshots">Screenshots</a>
    <a class="nav" href="downloads.html" title="Downloads">Downloads</a>

<div id="content">

<div id="header">
<h1>Home</h1>
</div>
    
<div id="newsContainer">
    <div class="contentTop">
    <h2>News</h2>
    </div>
    
    <div class="contentMid">
    <p>
    <h4> 10.8.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4> 10.7.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4> 10.6.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    <p>
    <h4> 10.5.08
    </h4> <br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    </div>
    
    <div class="contentBottom">
    </div>
    
</div>
    
<div class="screenshots">

<div class="contentTop">
<h2>Screenshots</h2>
</div>

<div class="contentMid">
<a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 1" />
    </a>
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 2" />
    </a>    
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 3" />
    </a>    
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 4" />
    </a>
</div>

<div class="contentBottom">

</div>

<div class="about">
<h2>About</h2>
<p>Hl2D stands for Half Life 2D, HL2D is a recreaction of Half Life. It has a different story but some of the enemies are still the same. It's made with Construct</p>
</div>

</div>
<div id="contentEnd">

</div> 

<div id="footer">
Designed by Joe Blair
</div>
</div> <!--End of Container -->

    

    

</body>

</html>
CSS
Code: Select all
body {
    background-color: #666666;
    font-family: Arial;
    font-weight: bold;
    margin: 0;
    padding: 0;
}
img {
border: 0px;
}
}
p {
    font-size: 10;
}
h4 {
    padding: 0px;
    margin: 0px;
    text-align: left;
}


a.nav, a.nav:link, a.nav:visited  {
    display: block; 
    width: 98px; 
    height: 45px; 
    background: url(Images/NavTab.png); 
    border: 0px; 
    margin-top: 5px;
    margin-left: 24px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #999; 
    line-height: 70px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}

a.nav:hover  {
color: #FFA824; 
}

a.navCon, a.navCon:link, a.navCon:visited {
    display: block; 
    width: 122px; 
    height: 46px; 
    background: url(Images/NavTabOn.png); 
    border: 0px; 
    margin-top: 5px;
    text-align: Left; 
    text-decoration: none; 
    font-family: Arial; 
    font-size: 12px; 
    color: #000; 
    line-height: 68px; 
    overflow: hidden;
    text-indent: 0.4em;
    font-weight: bold;
}
#container {
width: 810px;
margin: auto;
}
#nav {
padding-left: 20;
float: left;
width: 122px;
}
#content {
padding-top: 0px;
margin-left: -18px;
background: url(Images/Layout/Middle.png) repeat-y right;
}
#header {
background: url(Images/Layout/Top.png) no-repeat;
width: 688px;
padding-left: 30px;
padding-top: 0px;
margin-left: 130px;
height: 20px;
}
#news {
width: 300px;
background: none;
padding-left: 30px;
padding-top: 30px;
margin-left: 130px;

}
#screenshots {
float: right;
width: 300px;
height: 400px;
}
#about {
position: top;
width: 300px;
float: right;
border: 1px;
}
#contentEnd {
height: 20px;
background: url(Images/Layout/Bottom.png) no-repeat right;
margin: 0px;
padding: 0px;

}
#footer {
font-size: 10px;
clear: both;
height: 30px;
}
#news h2 {
    margin: 0;
    padding: 0;
}

#news p {
    margin: 0;
    padding: 0;
}
.Hide {
display: none;
}
#image {
margin-left: -20px;
}
.contentTop {
margin-left: 150px;
width: 313px;
height: 20px;
padding: 0px;
margin: 0px;
background: url(Images/Layout/ContentTop.png);
}
.contentMid {
margin-left: 150px;
width: 313px;
margin: 0px;
padding: 0px;
background: url(Images/Layout/ContentMid.png) repeat-y;
}
.contentBottom {
margin-left: 150px;
width: 313px;
height: 20px;
background: url(Images/Layout/ContentBottom.png);
}
Reply With Quote
  #8 (permalink)  
Old Feb 11th, 2008, 09:38
welshstew's Avatar
Lead Administrator

SuperMember
Join Date: May 2007
Location: inside the outside
Posts: 1,388
Blog Entries: 13
Thanks: 1
Thanked 17 Times in 15 Posts
Re: Layout not aligning properly
I don't ususally do this, but try the following:
Code: Select all
<!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" xml:lang="en" lang="en">

<head>
    <title>
        HL2D Home
    </title>
    <link rel="stylesheet" type="text/css" href="Style.css" />
</head>


<body>
<div id="container">

<div id="nav">
<div id="image">
    <a href="Home.html">
    <img src="Images/HL2DLogo.png" width="137" height="112" alt="Hl2DLogo" />
    </a>    
</div>

    <a class="navCon" title="Home">Home</a>    
    <a class="nav" href="about.html" title="About">About</a>
    <a class="nav" href="screenshots.html" title="Screenshots">Screenshots</a>
    <a class="nav" href="downloads.html" title="Downloads">Downloads</a>
</div>
<div id="content">

<div id="header">
<h1>Home</h1>
</div>
    
<div id="newsContainer">
    <div class="contentTop">
    <h2>News</h2>
    </div>
    
    <div class="contentMid">
   
    <h4> 10.8.08
    </h4> 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    
    <h4> 10.7.08
    </h4> <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    
    <h4> 10.6.08
    </h4> <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    
    
    <h4> 10.5.08
    </h4> <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum vel eros. Duis nisl tellus, tincidunt ut, interdum ac, mollis eu.
    </p>
    </div>
    
    <div class="contentBottom">
    </div>
    
</div>
    
<div class="screenshots">

<div class="contentTop">
<h2>Screenshots</h2>
</div>

<div class="contentMid">
<a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 1" />
    </a>
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 2" />
    </a>    
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 3" />
    </a>    
    
    <a href="">
    <img src="Images/ScreenFake.png" width="137" height="112" alt="Screenshot 4" />
    </a>
</div>

<div class="contentBottom">

</div>

<div class="about">
<h2>About</h2>
<p>Hl2D stands for Half Life 2D, HL2D is a recreaction of Half Life. It has a different story but some of the enemies are still the same. It's made with Construct</p>
</div>

</div>
<div id="contentEnd">

</div> 

<div id="footer">
Designed by Joe Blair
</div>
</div> <!--End of Container -->
</div>
    

    

</body>

</html>
that's your code sorted, now you just need to position them using your css style sheet.
__________________
WelshStew
Lead Administrator
 tierney rides tboard - uk site | xtreme wales - extreme clothing
If you think I've helped, click the "Thanks"
webforumz - facebook | LinkedIn
Last Blog Entry: Web Standards Curriculum Launched (Jul 8th, 2008)
Reply With Quote
  #9 (permalink)  
Old Feb 11th, 2008, 09:44
Up'n'Coming Member
Join Date: Jul 2007
Location: Glasgow
Age: 15
Posts: 91
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Layout not aligning properly
Thanks but I still don't know how to fix my layout. Oh and there always going to be a least 4 errors sine I don't add the code at the end.
Last edited by casho; Feb 11th, 2008 at 09:49.
Reply With Quote
  #10 (permalink)  
Old Feb 11th, 2008, 11:12
SuperMember

SuperMember
Join Date: Sep 2006
Location: Pink House
Posts: 3,946
Thanks: 0
Thanked 0 Times in 0 Posts
Re: Layout not aligning properly
I would restart this project. At this time all your div's are basically all aligned along the left margin.

This is just a simple 2 column design. The logo and navigation in one column and the content in the second column.

I honestly can't redo this the way it is now because it's too confusing.
Check this out as a starting point.
Reply With Quote
Reply

« CSS & HTML problems | CSS Layout Issues (IE vs Firefox) »
Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

Similar Threads
Thread Thread Starter Forum Replies Last Post
Aligning box to right fr33sty13 Web Page Design 8 Jun 6th, 2008 03:49
CSS Aligning Wesley Web Page Design 15 Jan 20th, 2008 19:49
GD Aligning? PicoDeath PHP Forum 3 Aug 2nd, 2007 16:14
Can't add a div box properly to my page. Moonlilly Starting Out 1 Feb 26th, 2007 20:38
Netscape won't display properly Moonlilly Starting Out 9 Feb 7th, 2007 00:43


All times are GMT. The time now is 07:19.

Contact Us - Web Design & Development Forums - Archive - Top

Sleep Study Scoring :: Free Bet :: Online Betting :: Bookmakers :: Funny Quotes :: Internet Recruitment Software :: Microsoft CRM Experts :: Online Casino :: Decorated Christmas Trees :: Midwife Forums :: Football Betting :: Web Development India :: Ecommerce Software :: Football Stats :: Dry Cleaning Collection :: Free Bets :: xtreme wales - extreme clothing :: Apuestas :: SEO Company India :: Werbeartikel :: Sharepoint Consultants :: Search Engine Optimisation :: Office Clearance London :: Sharepoint Experts :: Sports Betting :: Casino :: Website Templates :: Online Gambling

Powered by vBulletin®
Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
Search Engine Friendly URLs by vBSEO 3.2.0 RC8
© 2003-2008 Webforumz.com : All Rights Reserved

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43