spaces where spaces are unwanted

wrathican · April 22, 2008

look here: http://ls12style.co.uk/projects/LS12Style/

there is a gap between the navigation and the header and content.

any ideas why?

CSS:

/* Layout */

body {
text-align:center;
background-color:#CCCCCC;
background-image:url(images/ls12bigbg.gif);
background-repeat:repeat;
background-attachment:fixed;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}



#container {
width: 650px;
margin:0 auto;
}

#header {
width: 100%;
margin:0;
}

#login {
width:100%;
text-align:right;
font-size:10px;
margin-bottom: 2px;
margin-right: 10px;
margin-top: 2px;
height: 20px;
}

#navi { 
margin:0; padding:0;
width:100%;
background-image:url(images/ls12navbg.gif);
background-repeat:repeat;
text-align:center;
}

#conttop {
    margin:0; padding:0;
width:100%;
height: 20px;
background-image:url(images/ls12conttop.gif);
background-repeat:no-repeat;
}

#content {
    margin:0; padding:0;
width:100%;
background-image:url(images/ls12navbg.gif);
background-repeat:repeat-y;
background-position:top;
background-position:left;
text-align:left;
padding-left:30px;
padding-right:20px;
}

#contbottom {
    margin:0; padding:0;
width:100%;
height: 20px;
background-image:url(images/ls12contbottom.gif);
}

#footer {
    margin:0; padding:0;
width:100%;
height: 20px;
font-size:10px;
color:#999999;
}

/* Presentation */

h1#cont {
    margin:0; padding:0;
    padding: 5px 0 5px 0;

}

p.cont {
    margin:0; padding:0;
    padding:3px 0 3px 0;

}

input.submit {
    margin:0; padding:0;
background-color: #FFFFFF;
border: #000000 1px solid;
font-size: 10px;
width: 25px;
}

input.text {
    margin:0; padding:0;
background-color: #FFFFFF;
font-size:10px;
width: 50px;
border: #000000 1px solid;
}

a:link {
text-decoration:none;
}

a:visited {
color:#006600;
text-decoration:none;
}

a:hover {
color:#666666;
text-decoration:underline;
}

a:active {
color:#FF0000;
text-decoration:underline;
}

#navi ul {
margin:5px;
padding:0;
list-style: none
}

#navi li {
margin:0;
padding:0;
display:inline
}

#navi li a:link, #navi li a:visited {
color:#000
}

#navi li a:hover, #navi li a:active {
color:#666
}

#navi li .nolink {
color:#000
}

#error {
font-size:10px;
color:#FF0000;
}

#smalltxt {
font-size:10px;
}

HTML:

<?php

session_start();

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/ls12template.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>LS12Style - That's Right...</title>
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<link rel="stylesheet" href="ls12.css" type="text/css" />
<!-- InstanceEndEditable -->
</head>

<body>
<div id="container">
<div id="header">
<img src="images/ls12logo2.gif" alt="LS12Style - That's Right..." width="650" height="100" /></div>
<div id="navi">
<ul>
<li><a href="index.php">Home</a> | </li>
<li><a href="about.php">About Us</a> | </li>
<li><a href="pictures.php">Pictures</a> | </li>
<li><a href="videos.php">Videos</a> | </li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
<?php

if ($_SESSION['loggedin'] == "yes" && $_SESSION['level'] != 0) {
?>
<ul>
<li><a href="members/pictures.php">Add Pictures</a> | </li>
<li><a href="members/videos.php">Add Video</a> | </li>
<li><a href="members/forum.php">Forums | </a></li>
<li><a href="members/details.php">Change Details</a> | </li>
<li><a href="members/password.php">Change Password</a></li>
</ul>
<?php
}
?>
</div>
<div id="conttop">
<div id="login">
<?php

if ($_SESSION['loggedin'] == "yes") {
?>
Hello! <?php echo $_SESSION['username']; ?>. <a href="functions/functions.php?func=logout">Logout</a>
<?php
}else{

?>
<form action="functions/functions.php?func=login" method="post" name="login">
Username:<input class="text" type="text" name="username" />
Password:<input class="text" type="password" name="password" />
<input class="submit" type="submit" name="submit" value="Go!" />
<a href="register.php">Register</a></form>
<?php
}
?>
</div>
</div>
<div id="content">
<h1 id="cont"><!-- InstanceBeginEditable name="title" -->Welcome<!-- InstanceEndEditable --></h1>
<p class="cont"><!-- InstanceBeginEditable name="content" -->
Welcome to the new LS12Style website. Please Register.
<!-- InstanceEndEditable --></p></div>
<div id="contbottom"></div>
<div id="footer">Copyright © 2008 Ashley Broadley</div>
</div>
</body>
<!-- InstanceEnd --></html>

Thanks

haku · April 23, 2008

Its a combination of the 5px bottom margin you have on the ul in the navi div, with the 2px top margin you have on the login div.

wrathican · April 23, 2008

ahh, thank you ever so much. its fixed now. i get confused sometimes when it comes to the margins.

wrathican · April 23, 2008

hmm that did fix the places where i could see the background but now, when i am on the 'contact' page the links space is smaller than the rest of the pages.

any idea what thats about?

Sign In

spaces where spaces are unwanted

Recommended Posts

wrathican

Link to comment

Share on other sites

haku

Link to comment

Share on other sites

wrathican

Link to comment

Share on other sites

wrathican

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information