Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 6 of 6
  1. #1
    Junior Member
    Join Date
    Feb 2011
    Posts
    4
    Member #
    27017
    Hello,

    I am not much of a web designer but I decided that I would give it a go. I've mainly been using some basic HTML & CSS and reverse-engineering a few tutorials I've seen on the internet.

    I used a tutorial to create rounded corners for my CSS container, which houses the main content. The corners are made purely in CSS and don't use any images, and I'm starting to think I made a big mistake. However, I would like to finish this just for pride reasons.

    The main problem is that the navigation bar images are being cut off at the top by the margins that are used to create the corners. If I try to edit the margins, then the corners will suffer. I keep thinking there must be a way for my Home button to overlap onto the margin somehow.

    I would really appreciate it if someone could help me with this, it's driving me nuts.

    Here's the HTML:
    HTML 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">
    <head>
    <meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
    <title>Greg Mayes' Personal Website</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    <body>
    <div id="header"><img src="images/Gregmayesnet.png" alt="Gregmayes.net" /></div>
    <div class="navbar">
    <b class="rtop"><b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b></b>
    <div id="navbar_content">
    <img src="images/Home.png">
    </div>
    </div>
     
    <div class="container">
    <hr style="width:100%;margin:0;" />
    <div id="content">
    <p class="main">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium condimentum sapien. Quisque vel fringilla neque. Maecenas ut leo mi. Morbi vel tristique libero. Maecenas sapien nisi, facilisis ut sagittis nec, rhoncus ac justo. Maecenas venenatis hendrerit nulla, a sodales magna pretium sit amet. Proin in tellus ac eros tempor laoreet a ac justo. Donec auctor metus sit amet mi vestibulum interdum. Nam condimentum suscipit tortor, in luctus est condimentum sit amet. Nullam vestibulum, sem eu egestas eleifend, dui ante suscipit dolor, a adipiscing ipsum lorem malesuada nunc.</p>
    <p class="main">Nulla arcu nunc, iaculis ut mattis eget, dignissim et lorem. Vestibulum eu quam lectus, nec pulvinar odio. Aenean eu leo velit. Mauris quis odio ut enim sollicitudin suscipit. Aenean feugiat consectetur ultricies. Maecenas vestibulum, nisi quis consectetur vehicula, ligula diam placerat purus, sit amet aliquam arcu augue ac augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec vel mauris eget dolor lacinia tempor. Aenean bibendum, nisl in commodo condimentum, urna turpis tincidunt nulla, a pellentesque turpis turpis id purus. Vestibulum vestibulum consectetur erat, sed hendrerit elit malesuada sit amet. Cras et mi urna. Ut scelerisque quam quis turpis faucibus non sagittis erat rhoncus. Vivamus in nisl et risus porttitor facilisis at vitae leo. Nullam egestas pellentesque enim ut facilisis. Donec posuere dignissim mauris, non ornare tellus ultrices sed. Fusce mollis lacus sagittis nisi semper at malesuada metus tempus.</p>
    <p class="main">Duis blandit feugiat orci ut viverra. Fusce cursus magna at nulla luctus feugiat. Mauris dictum purus ac ante rhoncus eget elementum neque sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam pellentesque egestas tincidunt. Nunc sed leo tincidunt erat ultrices euismod feugiat faucibus odio. In tristique fringilla quam vitae tempor. Fusce vitae felis quis felis varius scelerisque sed at elit. Vivamus non lectus vel lectus venenatis sagittis. Vestibulum eu nulla mauris.</p>
    <p class="main">Vivamus pretium urna id nulla aliquet interdum. Curabitur eu sem vel libero porta porta non ac turpis. Integer id sem sem, a sodales nisi. Donec ac malesuada risus. Curabitur eget metus odio. Cras accumsan, eros eu adipiscing scelerisque, nulla magna malesuada diam, nec cursus risus nisi sed lacus. Ut tellus felis, volutpat sed feugiat a, pretium quis velit. Phasellus congue risus quis ligula malesuada egestas. Aenean sagittis, diam nec malesuada aliquet, lacus lacus tempus libero, sed dapibus nibh tellus id ante. Cras luctus fermentum leo sit amet volutpat. Morbi varius risus at nunc viverra tempor.</p>
    <p class="main">Sed quis massa id ante tempus scelerisque. Proin quis sem non velit aliquet egestas in quis nunc. Morbi placerat erat at turpis ultrices rutrum. Donec eleifend pulvinar pharetra. In varius consequat velit fringilla ultrices. Nam malesuada, libero ac molestie vulputate, lacus nibh dictum augue, ut hendrerit nulla purus eu magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum non ipsum augue, ut malesuada elit. Mauris blandit leo id metus gravida iaculis. Sed mauris turpis, varius in faucibus at, gravida vel sapien. Integer vitae nisl quis magna rutrum luctus lacinia non felis. Praesent eget nisi eu nisi ullamcorper tincidunt at ac est. Suspendisse sed arcu quis tortor aliquam varius. Pellentesque lobortis tristique ipsum, sed bibendum quam accumsan ac. In eget ipsum enim. Praesent condimentum odio vitae ligula malesuada interdum. Aliquam in est leo. Cras ante leo, blandit vitae sollicitudin convallis, hendrerit ut nulla.</p>
     </div>
    <b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b>
    </div>
    <div id="footer">&#169; Greg Mayes 2010
    <p>
        <a href="http://validator.w3.org/check?uri=referer"><img
            src="http://www.w3.org/Icons/valid-xhtml10"
            alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
     
    <a href="http://jigsaw.w3.org/css-validator/check/referer">
        <img style="border:0;width:88px;height:31px"
            src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
            alt="Valid CSS!" />
    </a>
    </p>
     
    </div>
    </body>
    </html>
    The CSS:
    Code:
    .container {
    background:#fff;
    overflow: hidden;
    margin: 0 auto;
    width: 80%;
    }
     
    .navbar {
    background:#fff;
    overflow: hidden;
    width: 80%;
    height: 50px;
    margin: 0 auto;
    }
    
    #navbar_content {
    padding:0 25px 0 25px;
    color: black;
    width: auto;
    overflow: visible;
    }
    
    #content {
    padding:0 25px 0 25px;
    width: auto;
    }
    
    .rtop, .rbottom{
    display: block;
    background:#ccc;
    }
    
     .rtop *, .rbottom *{
    display: block;
    height: 1px;
    background:#fff;
    }
    
     .r1{
    margin: 0 5px;
    }
    
     .r2{
    margin: 0 3px;
    }
    
     .r3{
    margin: 0 2px;
    }
    
     .r4{
    margin: 0 1px;
    height: 2px;
    }
    
    p.main{
    color: black;
    text-align: left;
    }
    
    body {
    text-align: center;
    background:#ccc;
    }
    
    #footer {
    width: 100%;
    }
    
    #header {
    width: 100%;
    margin: 0 auto;
    }

  2.  

  3. #2
    Member surfbouy's Avatar
    Join Date
    Dec 2010
    Location
    Noosa, Sunshine Coast, Queensland, Australia
    Posts
    46
    Member #
    25747
    Liked
    3 times
    It certainly looks that way.
    I changed height for .navbar to auto and it appears to set div to the height of the image..
    I also added dimensions to image so it knows what size the image is
    <div id="navbar_content">
    <img src="images/Home.png" height="50" width="300" alt="aaaaa">
    </div>
    cheers

  4. #3
    Junior Member
    Join Date
    Feb 2011
    Posts
    4
    Member #
    27017
    Thank you for your reply. I guess I should have been more specific about what I was trying to achieve; I don't want any gap at the top or bottom of the Home image. I can get the bottom gap to close, but not the top.

    Sorry for that, it was a bit of a waste of your time.

  5. #4
    Member surfbouy's Avatar
    Join Date
    Dec 2010
    Location
    Noosa, Sunshine Coast, Queensland, Australia
    Posts
    46
    Member #
    25747
    Liked
    3 times
    You could try giving your image a class and use position with a negative value to move it up
    ie.
    <img src="images/Home.png" height="50" width="300" alt="aaaaa" class="imageFix">
    .imageFix{ top: -5px; position: relative; margin:0; padding:0; }
    cheers

  6. #5
    Junior Member
    Join Date
    Feb 2011
    Posts
    4
    Member #
    27017
    I tried something similar to that before, and all that happens is that the image moves up but doesn't move past the gap.

    www.gregmayes.net to show you with a -15px movement to the top.

    Thank you for your efforts, though.

  7. #6
    Junior Member
    Join Date
    Feb 2011
    Posts
    4
    Member #
    27017
    I succumbed to using images for the corners instead, it's so much easier and less problematic. You can close this thread now, cheers.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:45 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com