PDA

View Full Version : Problem



JJackson
Feb 6th, 2010, 07:22 PM
I'm having trouble figuring out how to get my logo to line up with the navigation. Could someone help me? Also, for some reason, my bread-crumb menu isn't showing up, even when I specified the width and height. Any help would be appreciated. Thanks!

LINK: http://devilpup.net/development/final

XHTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="default.css" rel="stylesheet" type="text/css" />
<title>The Codester - Professional PSD to XHTML/CSS Services</title>
</head>

<body>

<div id="container">
<div id="header">
<div id="logo">
<img src="images/logo.png" />
</div><!--end logo-->
<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--end navigation-->
<div id="bread-crumbs">
<p>Home</p>
</div><!--end bread-crumbs-->
</div><!--end header-->

<div id="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac dolor quam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus dictum sem ut ligula sollicitudin at vehicula mauris mattis. Morbi in dictum sapien. Duis luctus suscipit neque, nec interdum mi euismod nec. Sed quis justo risus, quis porta quam. Sed pharetra ipsum quis purus dignissim lacinia.
</p>
</div><!--end content-->

</div><!--end container-->

</body>
</html>


CSS Code


/* The Codester */

/*======
OVERALL
======*/

#container {
width: 485px;
margin: 0 auto;
padding-top: 50px;
}

/*================
HEADER/NAVIGATION
================*/

#logo {
width: 264px;
height: 100px;
}

#navigation {
width: 485px;
height: 30px;
text-align: right;
}

#navigation li {
margin: 10px 10px 10px 10px;
}

ul {
list-style-type : none;
font-size: 18px;
margin : 0;
padding : 0;
}

li {
display : inline;
}

#bread-crumbs {
float: left;
background: url(images/bread-crumbs.png) no-repeat;
color: #FFFFFF;
}

/*==========
FONTS/LINKS
==========*/

body {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 12px;
color: #ffffff;
text-align: justify;
line-height: 23px;
background-color: #0b2432;
}

a:link {
color: #616161;
text-decoration: underline;
}

a:visited {
color: #616161;
text-decoration: underline;
}

a:hover {
color: #616161;
text-decoration: underline;
}

a:active {
color: #616161;
text-decoration: underline;
}

/*===============
FOOTER/COPYRIGHT
===============*/

#footer-right {
text-align: right;
margin-top: 200px;
}

Excavator
Feb 6th, 2010, 08:30 PM
Hello JJackson,
Your logo is seperated from your menu because they are in seperate divs.

Put the menu and your logo image in #header together.
Delete #logo, you don't need that div. You don't really need #navigation either - see divitis explained here (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/).
Float your logo image left so your menu can go beside it.

Your #breadcrumbs needs a with to be floated.
When I put width: 485; height: 53px on it, the "Home" you have in p tags shows as expected.

JJackson
Feb 6th, 2010, 08:44 PM
Hello JJackson,
Your logo is seperated from your menu because they are in seperate divs.

Put the menu and your logo image in #header together.
Delete #logo, you don't need that div. You don't really need #navigation either - see divitis explained here (http://ahsanity.wordpress.com/2007/05/15/divitis-and-classitis-two-new-words-in-my-css-vocabulary/).
Float your logo image left so your menu can go beside it.

Your #breadcrumbs needs a with to be floated.
When I put width: 485; height: 53px on it, the "Home" you have in p tags shows as expected.

Thank you for the help, I appreciate it! I'll make the changes and see how it works out. :thumbsup: