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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Encountered a problem coding my first website

    After adding some floats, and clearing them my text is still coming onto the "billboard" section and my background disappeared.

    This is what's happening in my HTML & CSS version http://imageshack.us/f/543/htmlcssdesign.png/
    And this is what I'd like to happen http://imageshack.us/f/706/fwdesign.png/

    HTML
    <!DOCTYPE html>

    <html>

    <head>
    <title>Millionhairs Dog Grooming |</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
    <!-- HEADER -->
    <header>
    <div id="header_container">
    <div id="header_container2">
    <div id="logo"> <a href="index.html"><img src="images/logo.png"></a> </div>
    <nav id="nav">
    <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="services.html">Services</a></li>
    <li><a href="gallery.html">Gallery</a></li>
    <li><a href="testimonial.html">Testimonials</a></li>
    <li><a href="contact.html">Contact</a></li>
    </ul>

    <div class="clear"></div>
    </nav>
    </div>
    </div>
    </header>
    <!-- /HEADER -->

    <!-- BILLBOARD -->
    <div id="billboard_container">
    <div id="billboard_container_image"><img src="images/home_image.jpg" alt="Grooming Room"> </div>
    <div id="billboard_cta_container">
    <div id="container_line1"><p>Top quality</p></div>
    <div id="container_line2"><p>Dog grooming</p></div>
    <div id="container_line3"><p>From as little</p></div>
    <div id="container_line4"><p>As</p></div>
    <div id="container_line5"><p>&pound;15</p></div>

    <div class="clear"></div>

    <div id="container_line6"> <a href="services.html"><img src="images/btn_services.png"></a> </div>
    </div>
    </div>
    <!-- /BILLBOARD -->

    <!-- BOXES -->
    <div id="boxes_top_description">
    <p>&quot;Where Every Dog is Special&quot;</p>
    </div>

    <div>
    <p>Welcome to my website, my name is Karen, I&apos;m a City &amp; Guilds qualified dog groomer living in Shevington, Wigan. My home based salon - affectionately known as &lsquo;The Millionhairs Club&rsquo; is purpose built to cater for all your dogs grooming requirements. I offer both salon based and mobile dog grooming services.</p>
    </div>
    <!-- /BOXES -->
    </body>

    </html>

    CSS

    /* RESET */

    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
    margin:0;
    padding:0;
    }
    table {
    border-collapse:collapse;
    border-spacing:0;
    }
    fieldset,img {
    border:0;
    }
    address,caption,cite,code,dfn,em,strong,th,var {
    font-style:normal;
    font-weight:normal;
    }
    ol,ul {
    list-style:none;
    }
    caption,th {
    text-align:left;
    }
    h1,h2,h3,h4,h5,h6 {
    font-size:100%;
    font-weight:normal;
    }
    q:before,q:after {
    content:'';
    }
    abbr,acronym { border:0;
    }

    /* GLOBAL STYLES */

    body {
    background: url(../images/white_bg.jpg);
    }

    .clear {
    clear: both;
    }

    #header_container {
    background: url(../images/bg_header.jpg) repeat-x top;
    height: 100px;
    }

    #header_container2 {
    margin: 0 auto;
    width: 960px;
    }

    #logo {
    position: absolute;
    }

    #nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
    }

    #nav ul li {
    float: left;
    }

    #nav ul li a {
    display: block;
    padding: 0 15px;
    color: #fff;
    font-size: 14px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 100px;
    font-family: arial;
    }

    #nav ul li a:hover {
    background: #000;
    color: #fff;
    zoom: 1;
    filter: alpha(opacity=50);
    opacity: 0.5;
    }

    #billboard_container {
    margin: 0 auto;
    width: 960px;
    }

    #billboard_container_image {
    width: 620px;
    margin-top: 15px;
    float: left;
    }

    #billboard_cta_container {
    float: right;
    width: 300px;
    padding: 10px;
    padding-right: 30px;
    }

    #container_line1 {
    text-transform: uppercase;
    font-family: arial, helvetica, sans-serif;
    font-size: 30px;
    color: #666;
    margin-bottom: 10px;
    }

    #container_line2 {
    text-transform: uppercase;
    font-family: arial, helvetica, sans-serif;
    font-size: 35px;
    color: #333;
    margin-bottom: 10px;
    }

    #container_line3 {
    text-transform: uppercase;
    font-family: arial, helvetica, sans-serif;
    font-size: 20px;
    color: #666;
    margin-bottom: 10px;
    }

    #container_line4 {
    text-transform: uppercase;
    font-family: arial, helvetica, sans-serif;
    font-size: 10px;
    color: #666;
    margin-bottom: 10px;
    float: left;
    }

    #container_line5 {
    text-transform: uppercase;
    font-family: arial, helvetica, sans-serif;
    font-size: 35px;
    color: #333;
    margin-bottom: 10px;
    margin-left: 10px;
    float: left;

    }

    #container_line6 {
    text-align: left;
    }

    #boxes_top_description {

    }

    Thanks for your time!

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,466
    Thanks
    23
    Thanked 634 Times in 633 Posts
    Use the # in the Message: toolbar to put your code in [code] tags.

    Can't see you images so can not work with them. If you have a site a link would work better for us.
    Here are a couple of things:
    In the css file I changed the color so I could see it on my white background.
    Code:
    #nav ul li a {color: #000;}
    Important, changed float
    Code:
    #billboard_cta_container {float: left;}
    Put your boxes section into it's own div and floated:
    Code:
    <!-- BOXES -->
    <div style="float:left;">
    	<div id="boxes_top_description">
    	<p>&quot;Where Every Dog is Special&quot;</p>
    	</div>
    	<div>
    	<p>Welcome to my website, my name is Karen, I&apos;m a City &amp; Guilds qualified dog groomer living in Shevington, Wigan. My home based salon - affectionately known as &lsquo;The Millionhairs Club&rsquo; is purpose built to cater for all your dogs grooming requirements. I offer both salon based and mobile dog grooming services.</p>
    	</div>
    </div>
    <!-- /BOXES -->
    Not important but you can combine
    <div id="header_container">
    <div id="header_container2">
    styles and only have one div.

    Any way a start
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #3
    Senior Coder
    Join Date
    Sep 2010
    Posts
    2,223
    Thanks
    15
    Thanked 253 Times in 253 Posts
    You're dealing with divs, so put this at the bottom of your style statements.
    Code:
    div {border: 1px solid magenta}
    or whatever color will show up on your page. Then the div borders will light up like a Christmas tree. And like the man said, please use the code tags.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

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