CSS Forum

**fresh-d** · 03-18-2010, 01:45 AM

ok so here is the mockup: http://img715.imageshack.us/img715/7643/mockup.png

here is the site so far: http://hmgi.info/1/bluesketch/

i want to navigation to be right next to the logo. but instead is aligning below and not all the way to the right

html:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>Blue Sketch Media: Fresno CA, Freelance Web Designer</title>
    
    <link href="main.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
    <div id="header">
<div id="logo">
            BlueSketchMedia: Fresno CA - Freelance Webdesigner
        </div>
        
        <ul id="nav">
            <li class="home"><a class="active" href="#">Home</a></li>
            <li class="services"><a href="#">Services</a></li>
            <li class="portfolio"><a href="#">Portfolio</a></li>
            <li class="about"><a href="#">About</a></li>
            <li class="contact"><a href="#">Contact</a></li>
        </ul>
        
        <div id="feature">
            <div class="picture">
                <div id="pic">
                    Latest Project Picture
                </div>
            </div>
            
            <div class="caption">
                <h1>Latest Project</h1>
                <h3>Dao Vang</h3>
                <p>..a personal website featuring
                   scrolling box, image gallery
                   and transparency effects </p>
            </div>
        </div
    ></div>
    
    <div id="body">
        <div id="services">
            <h2 class="design">Re/Design</h2>
            <p>    BlueSketch Media designs web-
                sites thats focuses on simplicity
                and usability. Enough graphics
                to make it eye-pleasing but not
                too much to decrease load time
                or overwhelm the visitor.</p>
            
            <h2 class="hosting">Hosting</h2>
            <p>    Your website won’t be online
                until you have uploaded it
                onto a web host. BlueSketch 
                Media provideshosting for your 
                websites.</p>
            
            <h2 class="psdtohtml">Hosting</h2>
            <p>    Already have a website designed
                but don’t know how to convert it
                into a live website? BlueSketch Media
                can do it for you.</p>
        </div>
        
        <div id="bsm">
            <h1>What is Blue Sketch Media?</h1>
            <p>    Basically, BlueSketch Media is just a name for a freelance webdesigner located in Fresno, CA. Simplicity 
                and usability are the two main factors that are aimed for when I design. So if you are looking for a 
                personal website or looking to take your company to the next step, Blue Sketch Media is ready to get 
                started on your website, so head over to the “Contact” page and request a quote!</p>
        </div>
    </div>
    
    <div id="footer">
        <div id="lets_get_started">
            <p>Let's get started? Contact Blue Sketch Media..</p>
        </div>
        
        <div id="links">
        <ul id="nav">
            <li class="home"><a class="active" href="#">Home</a></li>
            <li class="services"><a href="#">Services</a></li>
            <li class="portfolio"><a href="#">Portfolio</a></li>
            <li class="about"><a href="#">About</a></li>
            <li class="contact"><a href="#">Contact</a></li>
        </ul>
        </div>
    </div>
</body>
</html>

css:

Code:

body {
    background:#efecca url(graphics/bg.jpg) repeat-x;
    width:700px;
    margin:0 auto;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
}

/*Header*/
 #logo{
    background:url(graphics/logo.png) no-repeat;
    text-indent:-9999px; 
    width:268px;
    height:51px;
    margin-top:25px;
 }
 
 /*--Nav*/
 #nav {
    list-style-type:none;
    padding:0px;
    margin-left:0px;
    width:432px;
    float:right;
 }
 
 #nav li{
    display:inline; 
    padding:5px 5px 5px 5px;
 }

Also if you see something wrong with the way i coded to html part, could u please share. thanks!

**wongpk** · 03-18-2010, 03:12 AM

Kinda complicate.... Well, since you already master the CSS, here is my way to solve it...

1, Take #feature away from #header

2, position: relative the #header

3, position: absolute both the logo and the navigation

That should work...?

**LadynRed** · 03-18-2010, 03:37 PM

Not necessary to use positioning at all for that!

One thing - you're using the ID of "nav" twice -- not allowed. IDls MUST be unique on a page. Change it to a class and then you can re-use the rules multiple times.

Float the logo left (and it doesn't need the div, just float the image).
Float the UL right.
Put a height on #header
Clear the floats in header by adding clear:both to the div that follows the header section - just add clear:both to that div.

This works for your #nav

Quote:

#nav {
float:right;
height:75px;
list-style-type:none;
margin-left:0;
padding:45px 0 0;
text-align:right;
width:432px;

**fresh-d** · 07:35 PM

Thanks for helping guys! LadynRed I went with your suggestion and it works. thanks. I think i cleared the divs correctly.

Code:

body {
    background:#efecca url(graphics/bg.jpg) repeat-x;
    width:700px;
    margin:0 auto;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:13px;
}

/*Header*/
 #header{
    height:75px; 
    width:700px;
    border-bottom:1px solid black;
 }
 
 #logo{
    background:url(graphics/logo.png) no-repeat;
    text-indent:-9999px; 
    width:268px;
    height:51px;
    margin-top:25px;
    float:left;
    clear:both;
 }
 
 /*--Nav*/
 #nav {
    list-style-type:none;
    margin-left:0px;
    width:432px;
    float:right;
    padding:45px 0 0;
    height:75px;
    text-align:right;
 }


 #nav li{
    display:inline; 
    padding:5px 0px 5px 15px;
    height:80px;
 }
 
 #nav li a{
    text-indent:-9999px; 
    height:83px;
 }
 
 #nav li.home a{
    background:url(graphics/nav/home.jpg);
    width:74px;
    height:83px;
    padding:65px 25px 0px 25px;
}

 #nav li.home a{
    background:url(graphics/nav/home.jpg);
    width:74px;
    height:83px;
    padding:65px 20px 0px 20px;
}

oh yea, another issue (gosh im a nub), the text in the links wont go away even when i use text-indent:-9999px. anybody know how to fix this?