Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    stuck on css coding and div layout

    Hi everyone,

    I am stuck on my current design project. I've attached my HTML and CSS coding as well as a .jpg of the web comp.

    Here is my issue - I cant get the nav links over the grey nav bar. Ive tried various float and position codings, with no luck.

    Any suggestions to make this happen, please?!

    Thanks in advance!

    Paul

    p.s. - dreamweaver seems to have stopped previewing in browser correctly for me, in both safari and firefox. it was working and then stopped. i make changes in dreamweaver and the dont update to the browser preview. Mac OSX 10.6.8. any thoughts?
    Attached Thumbnails Attached Thumbnails stuck on css coding and div layout-screen-shot-2011-11-20-11.15.43-pm.jpg   stuck on css coding and div layout-screen-shot-2011-11-20-11.15.53-pm.jpg   stuck on css coding and div layout-screen-shot-2011-11-20-11.16.02-pm.jpg   stuck on css coding and div layout-screen-shot-2011-11-20-11.15.25-pm.jpg  

  • #2

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    post the code, not going to squint at the images

    https://www.google.com/search?rlz=1C...iewing+firefox

  • #4
    New to the CF scene
    Join Date
    Nov 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thx, Sammy!

    HTML

    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Monarch Welding & Engineering, Inc.</title>


    <meta name="description" content="Monarch Welding & Engineering, Inc. Boiler Repair, ASME Shop Fabrication, Structural Erection, and Mechanical Installation" />

    <link href="styles.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

    <div id="container">
    <div id="header" class="clear">
    <h1><a href="#"><img src="images/logo.png" /></a></h1>
    </div>

    <div id="picbar">
    <ul id="picbarul">
    <li><img src="images/pic1.jpg" /></li>
    <li><img src="images/pic2.jpg" /></li>
    <li><img src="images/pic3.jpg" /></li>
    <li><img src="images/pic4.jpg" /></li>
    </ul>
    </div>

    <div id="navcontainer">
    <div id="navbar"><img src="images/navbar.png" />

    <ul id="nav">

    <li><img src="images/history.png" /></li>
    <li><img src="images/experience.png" /></li>
    <li><img src="images/certifications.png" /></li>
    <li><img src="images/safety.png" /></li>
    <li><img src="images/services.png" /></li>
    <li><img src="images/contactus.png" /></li>

    </ul>
    </div>

    </div>
    <div id="body content">
    <p>Monarch Welding and Engineering is Michigan's premier
    industrial construction expert.


    A family owned and operated business, Monarch Welding and
    Engineering is proud to have been serving our community for
    over 80 years. With a rich history and vast experience
    Monarch Welding and Engineering is willing and able to
    support any and all projects.* Our team of experts are
    committed to insuring each project is executed safely and
    efficiently. Monarch Welding and Engineering looks forward to the opportunity to support your company and its needs.
    </p>
    <br />


    <p>
    The areas we service are diverse and ever growing:
    <br/>
    - Engineering Firms <br />
    - General Contractors <br />
    - Chemical <br />
    - Petroleum <br />
    - Automotive <br />
    - Steel Mills <br />
    - Utilities <br />
    - Manufactures <br />
    </p>

    </div>

    <div id="body content 2">
    <p>
    Areas of expertise: <br />
    - ASME Shop fabrication <br />
    - Boiler Repair / maintenance / fabrication <br />
    - Refinery Repair <br />
    - Steel fabrication <br />
    - Structural steel <br />
    - Piping systems <br />
    - Conveyors / material handling systems <br />
    - Duct work <br />
    - Cooling towers <br />
    - Heat exchangers <br />
    - General contracting <br />
    - Turnkey project management <br />
    - Engineering consulting <br />
    <br />
    Only to a name a few ...
    </div>

    <div id="logodupe">
    <img src="images/logodupe.png" />
    </div>
    *
    <div id="footer-container">
    <div id="footer">
    <div id="footerbar">
    <img src=/>
    </div>

    <div id="footer contact">
    <img src="images/footercontact.png" />
    </div>
    </div>

    </div>

    </div>

    </body>
    </html>


    CSS:

    <style href="styles.css" rel="styelsheet">@charset "UTF-8";
    /* CSS Document */


    .clear:after {
    content: ""; display: block; clear: both;
    }

    .clear { zoom: 1; }


    body {
    font-family: Arial, Helvetica, sans-serif;
    font-size:small;
    background: #fff;
    text-decoration: none;
    text-align: center;
    background-image:url('images/bkg.png');
    background-repeat:repeat-x;

    }


    #container
    {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    text-align: left;

    }

    #header {
    padding: 0px;
    margin: 0px;
    position: relative;
    top: 10px;

    }

    #picbar {
    list-style: none;
    margin-left: 120px;
    position: relative;
    top: 3.5px;

    }

    #picbarul li {
    display: inline;

    #navcontainer {
    list-style: none;
    margin-top: 40px;

    }

    #navbar {



    }


    #nav li {
    list-style: none;
    }

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    wrap your code with [code] [/code] next time


    [code]
    <html>

    </html>
    [/code]

    [code]
    html {
    height: 100%;
    }
    [/code]


    so you want #nav ON TOP of the image? have you ever considered setting the image as a background to the #nav instead of using <img>?
    Code:
    #nav {
       background: url('/images/navbar.png');
    }
    if not, then set
    Code:
    #navbar img {
       width: 100%;
       height: 200px;
       position: absolute;
       left: 0;
       top: 0;
    }
    Last edited by Sammy12; 11-21-2011 at 11:55 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •