Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Junior Member ruffneck119's Avatar
    Join Date
    Dec 2007
    Location
    So Cal
    Posts
    2
    Member #
    16215
    First post!!

    Hello everyone I am having trouble with the spacing of my header, columns, and footer. For some reason there is about a 20px space between my header and columns the the same space between my columns and footer and I want to get rid of it. Can you help me?

    Screen shot:

    http://119media.com/problem.jpg

    PS: I would also like to know how to make my left column follow the height of my main column!!

    Thanks for any help you can give me!!

    Here is the PAGE CODE:

    <!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" xml:lang="en" lang="en">
    <head>
    <title>Your Page Title</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <!-- (en) Add your meta data here -->

    <link href="central_draft.css" rel="stylesheet" type="text/css" />
    <!--[if lte IE 7]>
    <link href="patches/patch_layout_draft.css" rel="stylesheet" type="text/css" />
    <![endif]-->
    </head>
    <body>
    <div id="page_margins">
    <div id="page">
    <div id="header">
    <div id="topnav"><a href="#">Login
    </a>
    |
    <a href="#">
    Contact </a>
    |
    <a href="#">
    Imprint </a> </div>
    </div>
    <div id="main">
    <div id="col1">
    <div id="col1_content" class="clearfix">
    <h2>
    H2 Heading
    </h2>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et ac</p>
    </div>
    </div>
    <div id="col3">
    <div id="col3_content" class="clearfix">
    <h1>
    H1 Heading
    </h1>
    <p>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet ****a kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et.
    </p>
    </div>
    <div id="ie_clearing">
    &nbsp;
    </div>
    </div>
    </div>
    <div id="footer">
    <h3>
    H3 Heading
    </h3>
    </div>
    </div>
    </div>
    </body>
    </html>

    Here is the CSS CODE:

    @charset "UTF-8";
    /**
    * "CSS Layout" - (X)HTML/CSS Framework

    */

    @media all
    {
    /**
    * Design of the Basic Layout | Basis-Layouts
    *
    * @section layout-basics
    */

    /* Page margins and background | */
    body { background: #4d87c7 url(bg_blue.gif) repeat-x top left fixed; padding: 10px 0 0 0; margin: 0px; }

    /* Layout: Width, Background, Border | */
    #page_margins { width: 900px; margin-left: auto; margin-right: auto;}
    #page { background-color:#FFFFFF; }
    #header { background-image:url(header.jpg); background-repeat: no-repeat; width: 900px; height: 251px; margin: 0px;}
    #topnav { background-color:#FFFFFF; text-align:center}
    #footer {background-color:#CCCCCC}
    #main { padding: 0 0 0 0; margin: 0px;}


    /**
    * Formatting of the Content Area |
    *
    * @section layout-main
    */

    #col1 { height: 400px; float: left; width: 230px; background-color:#CCCCCC; }
    #col2 { display:none}
    #col3 { height: 400px; width: auto; margin: 0 0 0 240px}
    #col1_content { padding: 0 10px 0 20px }
    #col3_content { padding: 0 20px 0 10px }


    /**
    * Design of Additional Layout Elements |
    *
    * @section layout-misc
    */


    }

  2.  

  3. #2
    Member franklindeleon's Avatar
    Join Date
    Dec 2006
    Location
    Lynn, MA
    Posts
    71
    Member #
    14592
    Hey there ruffneck119

    First, a piece of advice. My guess is that you've been using some kind of CSS generator, if so don't do it anymore. That code you got has way to many "divs" and extra code that you don't need. If you're new to CSS that's going to make you go crazy. These links bellow are for excellent sites were you can learn more and practice CSS and when you do it use Notepad to hand code you're site so that you'll learn a lot.

    http://www.w3schools.com/css/default.asp
    http://www.cssplay.co.uk/

    Now I cleaned up your code a littleHTML Code

    <!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" xml:lang="en" lang="en">

    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <link href="central_draft.css" rel="stylesheet" type="text/css" />
    <link href="patches/patch_layout_draft.css" rel="stylesheet" type="text/css" />
    </head>

    <body>
    <div id="wrapper">
    <div id="header">
    <div id="topnav">
    <a href="#">Login</a>|<a href="#">Contact </a>|<a href="#">Imprint </a>
    </div>
    </div>
    <div id="col1">
    <h2>H2 Heading</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et ac</p>
    </div>
    <div id="col3">
    <h1>H1 Heading</h1>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
    tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
    At vero eos et accusam et justo duo dolores et ea rebum.
    Stet ****a kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
    sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, se
    d diam voluptua. At vero eos et accusam et.</p>
    </div>
    <div id="footer">
    <h3>H3 Heading</h3>
    </div>
    </div>
    </body>
    </html>



    CSS Code/* ================= MAIN STYLE SHEET ================= */


    body { background: #4d87c7 url(bg_blue.gif) repeat-x; }

    #wrapper {margin: 10px auto; width: 900px; background: #fff; border: 1px solid black;}
    #header { background: url(header.jpg) no-repeat; width: 900px; height: 251px; margin: 0px; border: 1px solid red;}
    #topnav {text-align:center; border: 1px solid blue;}

    #col1 { height: 400px; float: left; width: 230px; background-color:#CCCCCC; border: 1px solid green;}
    #col3 { height: 400px; width: auto; margin: 0 0 0 240px; border: 3px solid yellow;}

    #footer {clear: both; background-color:#CCCCCC; width: 900px; border: 1px solid #000;}


    It's not perfect but it's a lot cleaner. Also note that I placed a 1px border on every single atribute so you can see what you're doing and how to move them around. You can remove the borders when you're done working on the site.
    I hope that helps and hopefully i will give you an idea of how to work on your site.

    Have a great day and keep us posted.

    Franklin
    Franklin de Leon
    www.fdvisions.com

  4. #3
    Junior Member ruffneck119's Avatar
    Join Date
    Dec 2007
    Location
    So Cal
    Posts
    2
    Member #
    16215
    That rocks! I see where it went wrong. I appreciate the help.

    How do I get that left column (col1) to follow the size of the content(col3)? Do I add a wrap to them?

    PS: I am practicing my css everyday!!

  5. #4
    Senior Member Ferro's Avatar
    Join Date
    Oct 2006
    Location
    UK
    Posts
    386
    Member #
    14204
    Liked
    5 times
    Yeah - make sure the taller div is expanding the wrapper (clear any floats etc.) and make the shorter div 100% height of the wrapper.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:20 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com