Results 1 to 3 of 3

Thread: Problems with margins and link colours not working

  1. #1
    Join Date
    Oct 2007
    Posts
    46
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Problems with margins and link colours not working

    I am trying to get my new website to look like this basic mockup http://www.wellnesswarriorcoaching.c...andingpage.jpg

    When I style my website in Dreamweaver, it looks perfect but when I upload to my ftp site, the white border shows on the left and right of the upper and lower boxes but it does not show on the top or bottom of both boxes. I've added margins to the top and bottom but it doesn't seem to be working and I can't figure out where I've gone wrong. Also, I've styled my links to have an orange colour but they show up blue in both Safari and Firefox (I'm on a Mac). I cannot figure out why the colour will not show either.

    Here is a link to the live working site http://wellnesswarriorcoaching.com/ to show the missing white borders (top and bottom for both boxes) and the wrong coloured link text. As you can see when comparing the jpg mockup and the live site, things just don't look the same.

    Thanks for any help!

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,448
    Thanks
    1
    Thanked 246 Times in 241 Posts

    Default

    Hi there ozzie123,

    check out this example, for a simplified version of your page...
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <!-- this is for coothead testing and may be removed -->
    <base href="http://wellnesswarriorcoaching.com/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    
    <title>Wellness Warrior Coaching: Eat Well, Train Well, Live Well.</title>
    
    <!--<link rel="stylesheet" type="text/css" href="wwstylesheet.css">-->
    
    <style type="text/css">
    * {
        padding:0;
        margin:0;
        border:0;
        list-style-type:none;
     }
    a:link {
        color:#f37e21;
        text-decoration:none;
     }
    a:visited {
        color:#ff9;
     }
    a:hover,a:active{
        text-decoration:underline;
     }
    body {
        background-color:#000;
        background-image:url(images/cyclist.jpg);
        background-repeat:no-repeat;
        background-position:0 147px;
        font-family:arial,helvetica,sans-serif;
        font-size:13px;
     }
    #wrapper {
        width:982px;
        margin:auto;
      }
    #logo {
        float:left;
        width:242px;
        height:106px;
     }
    #icons {
        float:right;
        width:136px;
        height:26px;
        margin-top:70px;
     }
    #icons li {
        float:left;
     }
    #navigation {
        clear:both;
        height:35px;
        margin-bottom:6px;
        background-image:url(images/navbar.png);
        text-align:center;
     }
    #navigation li {
        display:inline;
        line-height:35px;
        margin:0 15px;    
     }
    #top-box {
        border:12px solid #fff;
        margin-bottom:12px;
        background-color:#1c305e;
        color:#fff;
        text-align:center;
     }
    #top-box img {
        display:block;
        width:535px;
        height:342px;
        margin:0 auto 48px;
     }
    #top-box p {
        margin:16px 0;
        font-size:110%;
     }
    #top-box #p-one {
        font-size:140%;
        font-weight:bold;
     }
    #bottom-box {
        padding:16px;
        border:12px solid #fff;
        background-color:#000;
        color:#fff;
     }
    #bottom-box p {
        margin:16px 0;
        font-size:110%;
     }
    </style>
    
    </head>
    <body>
    
    <div id="wrapper">
    
    <a href="index.html"><img id="logo" src="images/WWlogo.png" alt="Wellness Warrior Coaching logo"></a>
    
    <ul id="icons">
     <li><a href="#"><img src="images/facebook.png" alt="Facebook"></a></li>
     <li><a href="#"><img src="images/twitter.png" alt="Twitter"></a></li>
     <li><a href="#"><img src="images/youtube.png" alt="Youtube"></a></li>
     <li><a href="#"><img src="images/RSS.png" alt="RSS"></a></li>
     <li><a href="#"><img src="images/picassa.png" alt="Picassa"></a></li>
    </ul>
    
    <ul id="navigation">
     <li><a href="#">What we Offer Your Coaches</a></li>
     <li><a href="#">Programs</a></li>
     <li><a href="#">Classes/Events</a></li>
     <li><a href="#">Testimonials</a></li>
     <li><a href="#">FAQ</a></li>
     <li><a href="#">Resources</a></li>
     <li><a href="#">Shop</a></li>
     <li><a href="#">Gallery</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">Blog</a></li>
    </ul>
    
    <div id="top-box">
    
    <img src="images/eatwell.png" alt="eat well">
    
    <p id="p-one">Website coming soon.</p>
    <p>Contact us at <a href="mailto:info@wellnesswarriorcoaching.com">info@wellnesswarriorcoaching.com</a></p>
    <p>More info at our <a href="http://www.wellnesswarriorcoaching.com/blog/">blog</a></p>
    </div><!-- end #top-box -->
    
    <div id="bottom-box">
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras volutpat, purus ac 
    pellentesque adipiscing, mauris ligula convallis metus, vitae scelerisque nibh 
    orci quis mi. Cum sociis natoque penatibus et magnis dis parturient montes, 
    nascetur ridiculus mus. Curabitur porttitor aliquam libero. Quisque molestie ornare 
    sem. Nam euismod sem lacinia ipsum. In pharetra metus ut dolor cursus aliquam. 
    Maecenas eu ante quis enim tincidunt laoreet. Pellentesque varius nunc in ipsum 
    pulvinar sollicitudin. Nunc et mi. Donec auctor dignissim orci. Aliquam sed magna. 
    Pellentesque in dui. In eget elit. Praesent eu lorem.
    </p><p>
    Cras cursus varius pede. Cras dolor lorem, convallis sed, venenatis ac, aliquam vitae, 
    orci. Duis diam massa, adipiscing quis, aliquam eget, ornare eu, lectus. Sed rutrum 
    augue non purus. Integer vel mauris. Nam suscipit molestie lectus. Fusce laoreet 
    interdum eros. Pellentesque sit amet enim id nunc adipiscing ultricies. Quisque 
    lobortis eleifend elit. Sed eu augue sed felis vulputate iaculis. Cras lorem felis, 
    lobortis id, accumsan vel, facilisis quis, dolor. Curabitur aliquet. Nulla facilisi. 
    Proin nunc velit, posuere sit amet, porttitor et, volutpat a, massa. Maecenas elementum 
    volutpat justo. Pellentesque magna neque, dictum id, rhoncus a, fringilla et, nulla. 
    Phasellus placerat gravida purus. Pellentesque odio. Sed volutpat vehicula nulla. Quisque 
    metus urna, semper eget, aliquam ac, feugiat nec, massa.
    </p>
    </div><!-- end #bottom-box -->
    
    </div><!-- end #wrapper -->
    
    </body>
    </html>
    
    coothead

  3. The Following User Says Thank You to coothead For This Useful Post:

    ozzie123 (04-28-2011)

  4. #3
    Join Date
    Oct 2007
    Posts
    46
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    Thank you, thank you, thank you! That's alot of work you put into that response. It hasn't gone unnoticed.

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
  •