Header image/menu spacing issues css-html

Forum Moderators: not2easy

Message Too Old, No Replies

Header image/menu spacing issues css-html

Bowdii

2:15 am on Jun 30, 2011 (gmt 0)

Okay! I first of all I have to say I suck pretty hard at html/css.

Here is my problem:

The top left - have an image about 250 px wide. To the right I have the menu bar which is done in css.

I am having trouble with the spacing. The menu bar is done with a list format.

<html>

<img src="images/logo/florence advertising logo with bevel.gif" width="250" height="96"

<nav id="menu">
<ul>

<li >
<li id="menu_work"><a href="portfolio.html" title="Work"
target="_parent">Portfolio</a></li>
<li id="menu_services"><a href="#" title="Disciplines"
target="_parent">FAQ's</a></li>
<li id="menu_insidefa"><a href="contactus.html" title="Profile"
target="_parent">Contact Us</a></li><li id="menu_exposure"></li>
<li id="menu_collaborate"></li>

</ul>

</html>

Right now the image is right beside the menu. I wanted it nicely spaced for most browsers etc etc...

Any help would be greatly appreciated!

[edited by: alt131 at 7:48 pm (utc) on Jun 30, 2011]
[edit reason] Side Scroll [/edit]

penders

10:05 am on Jun 30, 2011 (gmt 0)

Hello again :) I think the HTML/CSS I posted in your HTML thread is still relevant, at least as a start...

Add an id to your img element...

<img id="logo" src="...

Then in your CSS, give it some spacing...

#logo {  
margin-right:40px;  
}

rocknbil

4:20 pm on Jun 30, 2011 (gmt 0)

The top left - have an image about 250 px wide.

Don't leave the image bare naked - put it in a container. A better method might be to make it a link to home (likely your intent, or should be - that upper left is well understood as the home link and a logo should always link to home.)

Second, try to avoid spaces in file names. Long story short, they will usually work, but sometimes they don't.

Then, float the logo left, the menu right, and add a clearing element (or float the header div with it) to make sure elements following it don't overlap it (or, ignore the floats and just use the margin method suggested.) I'll use a clearing div in the example, though I'd prefer to use the floated parent method to avoid the extra element . . . either way.

'When floating elements, always have your left-floated ones first in the source code. Otherwise you have to put your right-floats first and no float on the lefties, and it messes with the SOC . . .


<div id="header"> 
 <p><a href="/">Home</a></p> 
 <nav id="menu"> 
 <ul> 
 <li id="menu_work"><a href="portfolio.html" title="Work"  
target="_parent">Portfolio</a></li> 
 <li id="menu_services"><a href="#" title="Disciplines"  
target="_parent">FAQ's</a></li> 
 <li id="menu_insidefa"><a href="contactus.html" title="Profile"  
target="_parent">Contact Us</a></li> 
 <li id="menu_exposure"></li> 
 <li id="menu_collaborate"></li> 
</ul> 
 </nav>  
 <div class="clear-div></div>


#header {  
 width: 700px;  
 margin: 12px auto;  
} 
/* Its' the text-indent propery combined with outline:none that  
allows us to use plain text in the link itself */ 
#header p, #header p a {  
 width: 250px; 
 height: 96px;  
 display: block;  
 padding:0;  
 border:none;  
 outline: none;  
 text-decoration:none;  
 text-indent: -50000px;  
} 
#header p {  
 float: left;  
 margin 12px 0;  
} /* or just 0 */ 
#header p a {  
 background: url(/images/logo/florence-advertising-logo-with- 
bevel.gif) top left no-repeat;  
} 
#menu {  
 width: 450px;  
 float: right;  
} 
#menu ul {  
 margin: 12px 0 9px 0;  
 padding:0;  
} 
#menu ul li {  
 display: inline;  
 list-style:none;  
 margin:0;  
 padding-left: 8px;  
} 
/* using the same concept for image-based navs . . . 
#menu li a {  
 height: 15px;  
 background-position: top left;  
 background-repeat: no-repeat;  
 text-decoration:none;  
 display: block;  
 outline: none;  
 border: none;  
 text-indent:-50000px;  
} 
#menu li a:hover{  
 background-position:  
 bottom-left;  
}  
/* widths for example */ 
#menu_work { width: 60px; background-image:url(/images/menu- 
work.gif); } 
#menu_services { width: 100px; background-image:url(/images/menu- 
services.gif); } 
#menuinsidefa { width:90px; background-image:url(/images/menu- 
contact.gif); }

The previous scenario relies on using CSS sprites for menus: your actual image is 60px high with the non-mouseover state on top, mouseover on bottom:

normal
--------
mouseover

And shows through the 30px element container.

If you want to use the images as backgrounds and utilize the actual text, remove the text-indent property and add styles for the text to both a and a:hover (color, text-decoration, whatever . . . )

[edited by: alt131 at 7:50 pm (utc) on Jun 30, 2011]
[edit reason] Side Scroll [/edit]

Bowdii

12:56 am on Jul 6, 2011 (gmt 0)

rocknbil! wow! amazing help! Thank you both!