SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS - love the concept... Please HELP with execution

    I don't know what I'm doing wrong, but I can't seem to make this layout work. Anyone who's been around the block a few times willing to pick apart my code and tell me where I've gone wrong?

    I'm coding on a mac in SKedit and it (http://www.jbcsite.com/northcoast/index.html) displays fine in safari & FF (except for the map overlap thing, but that's just a pixel adjustment - the least of my worries), but when I go to a PC IE has issues (images shifting & not lining up, etc... big suprise huh?) and FF is mostly ok, but all of it's kooky.

    Also, when I went to setting up the contact page, my footer refuses to go the whole way down. I've been all over trying to find ways to fix it (and if you look at http://www.jbcsite.com/northcoast/im...yle_hacked.css, you'll see all the fixes I tried to apply) but I'm starting to feel like I'm beating my head against the wall and i just need to ask for help.

    I really want to be able to adopt CSS for layout rather than tables, but it's turning out to be a challenge... I feel like I missed a day in math class and there's some basic concept that I'm not getting that's throwing everything off.

    I REALLY appreciate any help that you all can offer. Thanks in advance for your time!!

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    The four columns are too wide for the space they sit in and push the whole thing wide in IE. Reduce the margins on #bodytext by about 10px and it should slot together.

    Repeating an image on the body is unlikely to line up nicely so you would be better repeating it on the container instead.

    Something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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" />
    <title>Northcoast Installations, LLC</title>
    <meta name="Keywords" content="trade show labor Indiana Indianapolis Fort Wayne Evansville Kentucky Louisville Lexington Covington Ohio Cleveland Columbus Akron / Canton Dayton Cincinnati Toledo Pennsylvania Erie Pittsburgh West Virginia Charleston Morgantown" />
    <meta name="Description" content="Providing top quality labor and services throughout the Great Lakes and Ohio Valley area." />
    <meta name="Generator" content="SK Edit" />
    <meta name="Copyright" content="2007 - Northcoast Installations, LLC" />
    <meta name="Author" content="Lindsay Brandenburg - lb.gdlab@gmail.com" />
    <!--<link rel="stylesheet" type="text/css" href="images/style.css" />-->
    <style type="text/css">
    /* commented backslash hack \*/ 
    html, body{height:100&#37;;} 
    /* end hack */
    html,body {margin:0;padding:0}
    
    body {
        background-color: #093678;
        font-family: "Trebuchet MS", sans-serif;
        text-align: center;
    }
    
    p {
        font-size: small;
        margin-bottom: 1em;
    }
    
    h1 {
        font-size: medium;
        margin-bottom: -1em;
        font-weight: bold;
    }
    
    #container {
        margin: 0 auto;
        min-height: 100%;
        position: relative;
        width: 650px;
        padding:0 10px;
        text-align: left;
        background: url("http://www.jbcsite.com/northcoast/images/background.gif") repeat-y center top;
    }
    * html #container{height:100%;width:670px;w\idth:650px}
    
    #header {
        width: 650px;
        height: 170px;
        position: relative;
        text-align: center;
        background: url("http://www.jbcsite.com/northcoast/images/header.gif") no-repeat center top;
    }
    #bodytext {
        margin-left: 55px;
        margin-right: 200px;
        margin-top: 20px;
        position: relative;
        padding-bottom: 80px;
    }
    * html #bodytext{height:1%}
    
    #column1 {
        position: relative;
        float: left;
        margin-bottom: 20px
    }
    
    #column2 {
        margin-left: 20px;
        position: relative;
        float: left;
        margin-bottom: 20px;
    }
    
    #column3 {
        margin-left: 20px;
        position: relative;
        float: left;
        margin-bottom: 20px
    }
    
    #column4 {
        margin-left: 20px;
        position: relative;
        float: left;
        margin-bottom: 20px
    }
    
    #territorymap {
        float:left;
        clear:both;
        width: 304px;
        height: 177px;
        margin-top:-80px;
        margin-left: 90px;
        background-image: url("http://www.jbcsite.com/northcoast/images/territorymap.gif");
        background-repeat: no-repeat;
        display:inline
    }
    
    #picturesright {
        width: 100px;
        height: 500px;
        position: absolute;
        right: 36px;
        top: 190px;
    }
    
    #footer {
        width: 420px;
        height: 90px;
        position: absolute;
        bottom:0;
        right: 10px;
        background-image: url("http://www.jbcsite.com/northcoast/images/nciblock_lowerright.gif");
        background-repeat: no-repeat;
        background-position: bottom right;
    }
    * html #footer{bottom:-1px}
    
    #menu {
        position: absolute;
        top: 146px;
        left: 60px;
        color: #fff;
    }
    
    #menu a:link {
        color: #fff;
        text-decoration: none;
    }
    
    #menu a:visited {
        color: #d3dbe7;
        text-decoration: none;
    }
    
    #menu a:hover {
        color: #98abc6;
        text-decoration: none;
    }
    
    #menu a:focus {
        color: #98abc6;
        text-decoration: none;
    }
    
    #menu a:active {
        color: #6783ac;
        text-decoration: none;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="header">
            <div id="menu"> <a href="index.html">HOME</a> :: <a href="contact.html">CONTACT US</a> </div>
        </div>
        <div id="bodytext">
            <p>NCI combines a permanent staff of seasoned installation professionals with an ever growing pool of energetic, experienced and enthusiastic workforce.</p>
            <p>Projects are managed in an extremely organized manner.<br />
                A detailed plan and schedule is produced for each project, communicated to our client and monitored before, during and after the job. Regular email updates are provided so that you are confident that everything will go as planned.</p>
            <h1>States Served</h1>
            <br />
            <hr />
            <div id="column1">
                <p><strong>Indiana</strong><br />
                    Indianapolis<br />
                    Fort Wayne<br />
                    Evansville</p>
                <p><strong>Kentucky</strong><br />
                    Louisville<br />
                    Lexington<br />
                    Covington</p>
            </div>
            <div id="column2">
                <p><strong>Ohio</strong><br />
                    Cleveland<br />
                    Columbus<br />
                    Akron / Canton<br />
                    Dayton<br />
                    Cincinnati<br />
                    Toledo</p>
            </div>
            <div id="column3">
                <p><strong>Pennsylvania</strong><br />
                    Erie<br />
                    Pittsburgh</p>
            </div>
            <div id="column4">
                <p><strong>West Virginia</strong><br />
                    Charleston<br />
                    Morgantown</p>
            </div>
            <div id="territorymap"></div>
        </div>
        <div id="footer"></div>
    <div id="picturesright"> <img src="http://www.jbcsite.com/northcoast/images/Install1.jpg" alt="" /><br />
            <br />
            <img src="http://www.jbcsite.com/northcoast/images/Install2.jpg" alt="" /> </div>
    </div>
    </body>
    </html>
    The contact page is the same problem in that your textarea is too big and is pushing things out reduce the cols to 30:
    Code:
    <textarea name="FieldData3" cols="30" rows="10"></textarea>
    You must make sure things actually fit or they will just push everything out.

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you so much for your help... It would figure that after all that it just came down to something as simple as sizing. I mistakenly just specified margin-right to set the size of the text div (guess that's what I get, coming from print layout, setting text indents... duh.) - when I went to margin-left for the indent and 400px for the width it all worked great!

    I also changed the way the images worked so that the shadow that was part of the body could shift and the container background held the white/blue parts (mainly so I wouldn't have to rework all the content images/widths).

    Again, thanks so much for your help. Still loving the concept of CSS, I'm just finding that it's a whole new set of tricks to learn and that there are SO many ways to do the same thing, that I'll need to learn what works best where.

    Lindsay


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
  •