SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 column Layout Div Positioning Problem.

    HTML Code:
    here is my html 
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
        <head>
            <title>Untitled Document</title>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta http-equiv="Content-Style-Type" content="text/css">
            <meta http-equiv="content-language" content="en"> 
            <meta name="MSSmartTagsPreventParsing" content="true">
            <meta http-equiv="imagetoolbar" content="no">
            <meta name="robots" content="noodp"> <!-- to Hell with the Open Directory Project -->
            <meta name="description" content="A brief description of the current page goes here.">
            <meta name="keywords" content="keywords, go, here, only, once, page, content, has, been, finished">
            <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/screen.css" media="screen,projection">
            <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/printer.css" media="print">
            <link rel="stylesheet" type="text/css" href="http://www.example.com/styles/handheld.css" media="handheld">
            <script type="text/javascript" src="http://www.example.com/scripts/library.js"></script>
        </head>
        <body>
            <div id="container">
                <div id="header">
        
                </div>
                
                <ul id="menu">
                    <li><a href="http://www.example.com/">Home</a></li>
                    <li><a href="http://www.example.com/page-2/">Menu Link 2</a></li>
                    <li><a href="http://www.example.com/page-3/">Menu Link 3</a></li>
                    <li><a href="http://www.example.com/page-4/">Menu Link 4</a></li>
                    <li><a href="http://www.example.com/page-5/">Menu Link 5</a></li>
                    <li><a href="http://www.example.com/page-6/">Menu Link 6</a></li>
                </ul>
                <div id="content">
                    <div class="wrapper">
                        <!-- your main content goes here -->
                    </div>
                </div>
                <div id="sidebar">
                    <!-- sidebar content goes here -->
                </div>
                <div id="footer">
                    <em><span title="Copyright">&#169;</span> BlakeAnthonyDesign</em>
                    <ul>
                        <li><a href="htp://www.example.com/page-7/">Footer Link 1</a></li>
                        <li><a href="htp://www.example.com/page-8/">Footer Link 2</a></li>
                        <li><a href="htp://www.example.com/page-9/">Footer Link 3</a></li>
                        <li><a href="htp://www.example.com/page-10/">Footer Link 4</a></li>
                    </ul>
                </div>
            </div>
        </body>
    </html>
    here is my css

    HTML Code:
    <style type="text/css">
    *{margin:0;padding:0}
    h1,h2,h3,h4,h5,h56,p,ul,ol {margin:0 0 .5em 0}
    ul,ol{margin:0 0 0 1em}
    a{color:yellow}
    a img{border:none}
    .header{
        clear:both;
        height:1px;
        overflow:hidden;
        margin-top:-1px;
    }
    body{
        text-align:center;
        background:#000;
        color:#F2CF94;
        font-family: Verdana, Arial, Helvetica, sans-serif;    
    }
    #menu{
        width:770px;
        margin:auto;
        text-align:left;
        background:url(http://i25.tinypic.com/vg1tvq.jpg) no-repeat 0 154px;
        min-height:764px;
    }
    * html #sidebar{height:764px}
    h1#sidebar,
    h1#sidebar a{
        width:770px;
        height:154px;
        overflow:hidden;
        display:block;
        text-decoration:none;
    }
    #Our services{
        float:left;
        width:283px;
        height:495px;
        overflow:auto;
        margin:22px 0 55px 80px;
        position:relative;
        display:inline;
    }
    #featured clients p{padding:5px}
    #featured clients{
        float:right;
        width:312px;
        height:496px;
        margin:22px 67px 55px 0;
        display:inline;
        position:relative;
    }
    .{Portfolio
        width:312px;
        height:157px;
        overflow:auto;
        margin:0 0 20px 0;
    }
    .main{
        width:312px;
        height:240px;
        overflow:auto;
        margin:0 0 37px 0;
    }
    .client testimonials{
        width:312px;
        height:40px;
        overflow:auto;
    }
    #footer{
        clear:both;
        text-align:right;
        width:672px;
        margin:0 auto 0;
    }


    Im having trouble with the Css of the Template that i have Provided.
    If anyone could look this over for me it would be greatly appreciated.This is just a preview of the template. Im not going to be using that font thats on the Image.I dont know what im doing wrong with the css and the Html can anyone help me ?
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure what you want here - that css does not seem to go with that html, and neither bears much resemblance to the attached picture (or the background image referenced in the css). The css also contains a few errors - you cannot have spaces in class names or id's, and the curly bracket is in the wrong place on the portfolio class.

  3. #3
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Within my Css file - Ok Im confused i code my css the way my html is right ? Im saying How my html starts out with <div id="container"> I start coding my css file with my container and keep going down the line with my html.. Ahh im so confused about positioning of my div element's. My html is Correct Now i have to work on my Css for the positioning of my div element's so it correlates with my html. And the right Css file would also help out to LOL, sorry i put the wrong css file in their.
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  4. #4
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The way you set out your css file is a matter of personal choice. Some like to group like styles, like all text styles togather, list styles together, all basic layout styles together, etc, whilst some (including myself) prefer to order the css declarations in a similar order as they are declared in the html - both methods have their merits, and some different arrangement may work better for you. Just keep in mind that if two rules reference the same element, the later one in the file will overwrite the first.

    If you start out by setting your reset, body and container styles first, then you will see the layout start to come together as you go . Remember to check in different browsers each step of the way - much easier to correct something as it happens rather than having to troubleshoot the site when finished.


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
  •