SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,478
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2004
    Location
    Brazil
    Posts
    91
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, Paul,

    It will surely help me out.


Bookmarks

Posting Permissions

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