SitePoint.com

Belerofonte · Sep 30, 2004, 08:17

Hi all,
I´m all new here, and full of questions : ) I´m trying to create a site using liquid layout with CSS, but as it runs i found some problems right at the start. I´m trying to create a Navigation bar inside the #top <div> But it creates extra space (even when I insert padding or margin 0 if that helps) also the text do not align within the borders in the lists. I guess I´m not explaining it the right way. Though the code is right bellow so you all can check it. I hope I can get help for it.

Thanks all.

----------------------------------------------------------------------------
<html>
<head>
<title>Three Column Layout</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">


body { text-align: center; }


#container {
width: 90%;
margin: 10px auto;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #fff;
color: #333;
border: 1px solid gray;
line-height: 130%; }

#top {
background-image: url("assets/img1.gif");
background-position: top right;
background-attachment: fixed;
background-repeat: no-repeat;
padding: 2.2em;
background-color: #ddd;
border-bottom: 1px solid gray; }


#top h1 {
font-family: Tahoma, Arial, sans-serif;

padding: 0;
margin: 0; }


#leftnav {
float: left;
width: 160px;
margin: 0;
padding: 1em; }


#rightnav {
float: right;
width: 160px;
margin: 0;
padding: 1em; }



#content {
margin-left: 200px;
border-left: 1px solid gray;
margin-right: 200px;
border-right: 1px solid gray;
padding: 1em;
max-width: 36em; }



#footer {
clear: both;
margin: 0;
padding: .5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray; }


#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h2 { margin: 0 0 .5em 0; }


#campo1 input {
font-family: Tahoma, Arial, sans-serif;
font-size: 11px;
color: #000;
background color: #fff;
border: 1px solid gray; }

#campo1 {
font-family: Tahoma, Arial, sans-serif;
font size: 12px;
color: #000;
float: right;
margin-right: 5em; }


#navbar ul li {
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
color: #000;
list-style-type: none;
border: 1px solid gray;
text-align: center;
display: inline;
margin: 0;
padding: 0; }


#navbar li ul {
display: none; }

#navbar {
padding: .8em;
}

</style>

</head>

<body>
<div id="container">
<div id="top">
<h1>Wiz Systems do Brasil</h1>
<div id="campo1">Intranet - Username

input type="text" name="user"> Senha

input type="password" name="Senha"></div>
<div id="navbar" align="center">
<ul>
<li>A Empresa
<li>SIGEM</li>
<ul>
<li>Sigem Protocolo
<li>Sigem Finanças</li>
<li>Sigem Legislativo</li>
<li>Sigem Tributação</li>
<li>Sigem Saúde</li>

</ul>
<li>JGRADE</li>
<li>Downloads</li>
<li>Contato</li>
<li>Página Principal</li>

</ul>
</div>
</div>

<div id="leftnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id="rightnav">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut.
</p>
</div>

<div id="content">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>
<p>
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>
</div>

<div id="footer">
Footer
</div>

</div>

</body>
</html>

Paul O'B · Sep 30, 2004, 09:00

Hi,

I think this is what you mean

You need to remove the default margins on the ul which you haven't done i your code.

Code:

#navbar ul {margin:0;padding:0}

Also you have your lists incorrect in the html. Sub lists should be contained within a list element like so:

Code:

	  <ul>
		<li>A Empresa 
		<li>SIGEM 
		  <ul>
			<li>Sigem Protocolo 
			<li>Sigem Finanças</li>
			<li>Sigem Legislativo</li>
			<li>Sigem Tributação</li>
			<li>Sigem Saúde</li>
		  </ul>
		</li>
		<li>JGRADE</li>
		<li>Downloads</li>
		<li>Contato</li>
		<li>Página Principal</li>
	  </ul>

Also you have used html comments in the middle of the style sheet which has stopped mozilla from working at all. You need to use css comment tags /* like this */

Hope that helps.

Paul

Belerofonte · Sep 30, 2004, 09:30

Thanks, Paul,

It will surely help me out.

Sep 30, 2004, 08:17	#1
Belerofonte SitePoint Enthusiast Join Date: Sep 2004 Location: Brazil Posts: 91	Removing extra space? Hi all, I´m all new here, and full of questions : ) I´m trying to create a site using liquid layout with CSS, but as it runs i found some problems right at the start. I´m trying to create a Navigation bar inside the #top <div> But it creates extra space (even when I insert padding or margin 0 if that helps) also the text do not align within the borders in the lists. I guess I´m not explaining it the right way. Though the code is right bellow so you all can check it. I hope I can get help for it. Thanks all. ---------------------------------------------------------------------------- <html> <head> <title>Three Column Layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- The text-align: center; is used to prevent the following browsers from not centering the containing blocks: * NN4 (Mac and Win) * Win/IE4 * Win/IE5 * Win/IE5.5 * Win/IE6 (when in quirks-mode) using this will only take effect in those browser, the CSS code will overall it in browsers tha support the code --> body { text-align: center; } <!-- Entire Page (Container) --> #container { width: 90%; margin: 10px auto; margin-left: auto; margin-right: auto; text-align: left; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; } <!-- Heading (Cabeçalho) --> #top { background-image: url("assets/img1.gif"); background-position: top right; background-attachment: fixed; background-repeat: no-repeat; padding: 2.2em; background-color: #ddd; border-bottom: 1px solid gray; } <!-- Exemplo de "Descendant Selector" --> #top h1 { font-family: Tahoma, Arial, sans-serif; padding: 0; margin: 0; } <!-- Leftnav (Navegação da Esquerda --> #leftnav { float: left; width: 160px; margin: 0; padding: 1em; } <!-- Rightnav (Navegação da Direita) --> #rightnav { float: right; width: 160px; margin: 0; padding: 1em; } <!-- Content (Corpo - Coluna Principal) --> <!-- The max-width: 36em, sets the maximum width on the main content. Although IE browsers will ignore the rule, the other standard compliant browsers will not alow the content area to go wider than the width you specify. --> #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; max-width: 36em; } <!-- Footer (Rodapé) --> <!-- The clear: both; command will force the footer below any floated elements above. --> #footer { clear: both; margin: 0; padding: .5em; color: #333; background-color: #ddd; border-top: 1px solid gray; } <!-- To remove the space above content in the "lefnav", "rightnav" and "content" --> #leftnav p, #rightnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0 .5em 0; } <!-- Este id serve para alinha os campos de preenchimento de acordo com o gráfico, assim como customizar os campos --> #campo1 input { font-family: Tahoma, Arial, sans-serif; font-size: 11px; color: #000; background color: #fff; border: 1px solid gray; } #campo1 { font-family: Tahoma, Arial, sans-serif; font size: 12px; color: #000; float: right; margin-right: 5em; } <!-- Navbar (Barra de Navegação) --> #navbar ul li { font-family: Tahoma, Arial, sans-serif; font-size: 13px; color: #000; list-style-type: none; border: 1px solid gray; text-align: center; display: inline; margin: 0; padding: 0; } <!-- Este comando serve para esconder as sublistas que serão mostradas apenas com o rollover --> #navbar li ul { display: none; } #navbar { padding: .8em; } </style> </head> <body> <div id="container"> <div id="top"> <h1>Wiz Systems do Brasil</h1> <div id="campo1">Intranet - Usernameinput type="text" name="user"> Senhainput type="password" name="Senha"></div> <div id="navbar" align="center"> <ul> <li>A Empresa <li>SIGEM</li> <ul> <li>Sigem Protocolo <li>Sigem Finanças</li> <li>Sigem Legislativo</li> <li>Sigem Tributação</li> <li>Sigem Saúde</li> </ul> <li>JGRADE</li> <li>Downloads</li> <li>Contato</li> <li>Página Principal</li> </ul> </div> </div> <div id="leftnav"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. </p> </div> <div id="rightnav"> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut. </p> </div> <div id="content"> <h2>Subheading</h2> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p> <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p> </div> <div id="footer"> Footer </div> </div> </body> </html>

Sep 30, 2004, 09:00	#2
Paul O'B CSS Advisor Join Date: Jan 2003 Location: Hampshire UK Posts: 27,434	Hi, I think this is what you mean You need to remove the default margins on the ul which you haven't done i your code. Code: #navbar ul {margin:0;padding:0} Also you have your lists incorrect in the html. Sub lists should be contained within a list element like so: Code: <ul> <li>A Empresa <li>SIGEM <ul> <li>Sigem Protocolo <li>Sigem Finanças</li> <li>Sigem Legislativo</li> <li>Sigem Tributação</li> <li>Sigem Saúde</li> </ul> </li> <li>JGRADE</li> <li>Downloads</li> <li>Contato</li> <li>Página Principal</li> </ul> Also you have used html comments in the middle of the style sheet which has stopped mozilla from working at all. You need to use css comment tags /* like this */ Hope that helps. Paul

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Sep 30, 2004, 09:30	#3
Belerofonte SitePoint Enthusiast Join Date: Sep 2004 Location: Brazil Posts: 91	Thanks, Paul, It will surely help me out.