PDA

Click to See Complete Forum and Search --> : Align a logo & nav in one div?

ne_plus_ultra
03-26-2008, 08:43 AM
What is the best way to align a logo & right-navigation in one div? I am stumped on this because the nav consists of 4 image rollovers as show in the table design.

- The table design is here (http://s215038318.onlinehome.us/design.html).

- The redesign of this using css is here (http://s215038318.onlinehome.us/main-html).

- The redesign css is here (http://s215038318.onlinehome.us/main-css.css).
KDLA
03-26-2008, 12:16 PM
This should get you started:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
ul#nav {float: right; width: 400px; margin-left: 5px;}
ul#nav li {float:right; list-style-type: none; height: 50px; width: 100px;}
ul#nav li a {display: block; width: 92px; height: 50px; border: 1px solid #000; margin-top: 49px;}
ul#nav li a.one {background yellow: url(image1.jpg) no-repeat;}
ul#nav li a.two {background: yellow url(image2.jpg) no-repeat;}
ul#nav li a.three {background: yellow url(image3.jpg) no-repeat;}
ul#nav li a.four {background: yellow url(image4.jpg) no-repeat;}
img.logo {float: left; height: 100px; width: 395px; height: 100px; background: pink;}
</style>
</head>

<body style="text-align: center;">
<div style="width: 800px; margin: 0 auto;">
<img src="logo.jpg" alt="logo" class="logo" />
<ul id="nav">
<li><a href="" class="one">text</a></li>
<li><a href="" class="two">text</a></li>
<li><a href="" class="three">text</a></li>
<li><a href="" class="four">text</a></li>
</ul>
</div>
</body>
</html>
WebJoel
03-26-2008, 12:33 PM
ul#nav li a.one {background yellow: url(image1.jpg) no-repeat;}
ul#nav li a.one {background:yellow url(image1.jpg) no-repeat;}
typo :)
ne_plus_ultra
03-26-2008, 10:04 PM
This should get you started:

<!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {margin: 0; padding: 0;}
ul#nav {float: right; width: 400px; margin-left: 5px;}
ul#nav li {float:right; list-style-type: none; height: 50px; width: 100px;}
ul#nav li a {display: block; width: 92px; height: 50px; border: 1px solid #000; margin-top: 49px;}
ul#nav li a.one {background yellow: url(image1.jpg) no-repeat;}
ul#nav li a.two {background: yellow url(image2.jpg) no-repeat;}
ul#nav li a.three {background: yellow url(image3.jpg) no-repeat;}
ul#nav li a.four {background: yellow url(image4.jpg) no-repeat;}
img.logo {float: left; height: 100px; width: 395px; height: 100px; background: pink;}
</style>
</head>

<body style="text-align: center;">
<div style="width: 800px; margin: 0 auto;">
<img src="logo.jpg" alt="logo" class="logo" />
<ul id="nav">
<li><a href="" class="one">text</a></li>
<li><a href="" class="two">text</a></li>
<li><a href="" class="three">text</a></li>
<li><a href="" class="four">text</a></li>
</ul>
</div>
</body>
</html>



Don't I have to apply some type of a:hover coding to the css for this to work as an image rollover?
KDLA
03-27-2008, 06:22 AM
Don't I have to apply some type of a:hover coding to the css for this to work as an image rollover?
Yes. As I stated, that coding was to get you started on the positioning. :rolleyes:

Helpful reference: http://www.w3schools.com/css/css_pseudo_classes.asp
ne_plus_ultra
03-27-2008, 02:10 PM
The feedback was very helpful. Now for some reason the logo runs into the content below -- and setting a margin-bottom doesn't work? Any suggestions...

- HTML is here (http://s215038318.onlinehome.us/main-html).

- CSS is here (http://s215038318.onlinehome.us/main-css).
ray326
03-27-2008, 02:32 PM
I think it's a float clearing problem. On work around is to add overflow:hidden to the div containing the image.
ne_plus_ultra
03-27-2008, 02:55 PM
I think it's a float clearing problem. On work around is to add overflow:hidden to the div containing the image.

Thanks - that did the trick.