Grow your CSS skills. Land your dream job.

More strange CSS Issues

  • # January 23, 2009 at 2:14 am

    Well…things just keep getting stranger and stranger with my CSS layout.

    Alright…to the problems at hand! Ok, so I used the Draw AP Div option in the layout panel of Dreamweaver CS3 to draw a few DIVS at the top of my #NavWrapper DIV (These are for my tabbed links). Ok, so I positioned them using the properties panel, BUT, when I preview the page, these tabbed navigation boxes do NOT show up as they do on the page. SO, when I view this page (F12) the tabbed boxes shift to the left. But, on my working stage in Dreamweaver, they are positioned exactly where I liked them (the last tabbed box butts up right to the end of the Flash container below.

    Why are these tabbed buttons shifting when it’s displayed perfectly on the DW stage? Secondly, my footer DIV keeps enlarging as I move up and down the page. It’s set to 100%, but it will not increase to 100%. Why?

    Man, it’s like clock work with this. eeeeeckk. I’m getting so tired of everyone saying how "easy" CSS is. If CSS is easy, why are there thousands of tutorials online. I’ve been using CSS for almost 4 years and there are still many occassions where this becomes completely frustrating and trying! I don’t know if it’s IE 6 of 7, or just the way CSS was made. It can drive a person crazy! I’ll post my code below:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <style type="text/css">
    #container{
    width:100%;
    margin:auto;
    text-align:left;
    }
    #NavWrapper{
    width:100%;
    height:50px;
    background-color: #670707;
    }
    #nav{
    width:300px;
    height:35px;
    }
    #banner{
    width:100%;
    height:250px;
    background-color: #670707;
    }
    #flash{
    margin:auto;
    width:800px;
    height:250px;
    background-color: #CCCC99;
    }
    #wrapper{
    width:800px;
    height:350px;
    margin:auto;
    }
    #OneColumn{
    width:245px;
    float:left;
    background-color: #999999;
    padding-left: 10px;
    padding-top: 10px;
    height: 350px;
    padding-right: 10px;
    }
    p {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: 20px;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    color: #333333;
    text-decoration: none;
    }
    #TwoColumn{
    width:255px;
    background-color: #999999;
    float:left;
    padding-left: 10px;
    padding-top: 10px;
    height: 350px;
    padding-right: 10px;
    }
    #ThreeColumn{
    width:240px;
    float:left;
    background-color: #999999;
    padding-left: 10px;
    padding-top: 10px;
    height: 350px;
    padding-right: 10px;
    }

    #footer{
    width:100%;
    background-color: #670707;
    clear: both;
    height: 200px;
    }
    .style1 {color: #FFFFFF}
    #apDiv1 {
    position:absolute;
    left:0px;
    top:0px;
    width:377px;
    height:300px;
    z-index:1;
    }
    #apDiv2 {
    position:absolute;
    left:0px;
    top:0px;
    width:377px;
    height:200px;
    z-index:1;
    }
    #apDiv3 {
    position:absolute;
    left:0px;
    top:0px;
    width:250px;
    height:250px;
    z-index:1;
    }
    #apDiv4 {
    position:absolute;
    left:0px;
    top:0px;
    width:250px;
    height:250px;
    z-index:1;
    }
    #home {
    position:absolute;
    left:471px;
    top:20px;
    width:100px;
    height:30px;
    z-index:1;
    background-color: #666600;
    cursor:crosshair;
    }
    .nav {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    font-weight: normal;
    font-variant: small-caps;
    text-transform: none;
    color: #000000;
    text-decoration: none;
    }
    #portfolio {
    position:absolute;
    left:581px;
    top:20px;
    width:100px;
    height:30px;
    z-index:2;
    background-color: #666600;
    }
    #resume {
    position:absolute;
    left:691px;
    top:20px;
    width:100px;
    height:30px;
    z-index:3;
    background-color: #666600;
    }
    #contact {
    position:absolute;
    top:20px;
    width:100px;
    height:30px;
    z-index:4;
    background-color: #666600;
    left: 800px;
    }
    a {
    font-family: Times New Roman, Times, serif;
    font-size: 16px;
    color: #000000;
    }
    a:link {
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: underline;
    color: #FFFFFF;
    }
    a:active {
    text-decoration: none;
    }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>RWS Designs</title>
    </head>

    <body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
    <div id="home">
    <div align="center"><a href="index.html">HOME</a></div>
    </div>
    <div id="portfolio">
    <div align="center"><a href="portfolio.html">PORTFOLIO</a></div>
    </div>
    <div id="resume">
    <div align="center"><a href="resume.html">RESUME</a></div>
    </div>
    <div id="contact">
    <div align="center"><a href="contact.html">CONTACT</a></div>
    </div>
    <div id="container">
    <div id="NavWrapper"></div>
    <div id="banner">
    <div id="flash">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    <div id="wrapper">
    <div id="OneColumn">
    <p>Welcome to my site!<br />
    My name is Rob Stathem and I’m a dedicated and passionate designer that enjoys all things web related. I started my own business because I’m serious about creating professional websites for clients of mine. I’m also dedicated and committed to CSS, which is both rewarding and challenging!</p>
    <p>&nbsp;</p>
    </div>
    <div id="TwoColumn">
    <p>History<br />
    RWS Designs is a new business owned and operated by Rob Stathem. Rob brings his passion for design as well as his knowledge for clean and accessible website designs. What you get at RWS Designs is pure excellence!</p>
    </div>
    <div id="ThreeColumn">
    <p>Services<br />
    RWS Designs offers design services including:</p>
    <p>Graphic Design<br />
    Photography<br />
    Logo Design<br />
    Corporate Branding<br />
    Dynamic Web Page Design</p>
    <p>&nbsp;</p>
    </div>
    <div id="footer">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </div>
    </div>
    </div>
    </body>
    </html>

    Thanks,
    rob

    # January 23, 2009 at 4:18 am

    Well its kinda hard to know what your talking about considering we can’t really see what you do…

    one thing i noticed is your nav elements are positioned absolute relative to the browser window and your content isnt…. If you launch it in a browser and resize the window the issue should be very apparent

    In addition you don’t have any resets ( *{margin: 0; padding: 0;} basic but helps )

    Any program "preview" is really useless, test in popular browsers… it helps

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".