SitePoint Sponsor

User Tag List

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

    In a three column Layout...

    Hi all,
    I´m trying to do the following:
    Add an background image in the top <div> of the three column layout, ok i could do that. then i want to insert, right below this background image, a nav bar using lists, but all i can get is the background image getting pushed up and the nav bar creates extra space ( even using padding and margin 0 ) If someone can help me with some advice, or even give me a link to some good page that can help me out with some answers, I´ll be very thankful.

    Thanks all!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Can we see some code please

    With lists you need to control the margins and padding on both the ul and the li.

    Paul

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

    Here´s the code ( or salad : )

    Hi,

    Here´s the code. The list keeps creating extra spacing, maybe i´m not using the padding and margin: 0 at the right place so i need some advice.

    Thanks!


    <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: 759px;
    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 {
    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; }
    </style>

    </head>

    <body>
    <div id="container">
    <div id="top">
    <h1>Header</h1>
    <div id="campo1">Intranet - Usernameinput type="text" name="user"> Senhainput type="password" name="Senha"></div>
    <div id="navbar">
    <ul>
    <li>A Empresa
    <li>SIGEM
    <ul>
    <li>Sigem Protocolo</li>
    <li>Sigem Finanças</li>
    <li>Sigem Legislativo</li>
    <li>Sigem Tributação</li>
    <li>Sigem Saúde</li>
    </li>
    </ul>
    <li>JGRADE</li>
    <li>Downloads</li>
    <li>Contato</li>
    <li>Página Principal</li>
    </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>

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    If you are talking about the default margins of the ul then the answers the same as I gave you in the other post which you have failed to implement

    Code:
    #navbar ul {margin:0;padding:0}
    An easy way to set all the margins and padding to zero is to use the universal selector as follows.
    Code:
    * {margin:0;padding:0}
    That will set the margins and padding of all elements to zero but means that you will have to explicitly set them yourself.

    Your background image is not correct in mozilla browsers because you have used background fixed which is relative to the viewport and not the element is applied to. That means it will only show in that element if it happens to be over the position that you have placed the image.

    Take out the background fixed altogether as I assume you just want it in the element itself.

    e.g.use this shorthand to define everything in one go.

    Code:
    background:#ddd url(assets/img1.gif) no-repeat right top;
    Paul


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
  •