homepage Welcome to WebmasterWorld Guest from 23.22.173.58
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Header image/menu spacing issues css-html
Bowdii

10+ Year Member



 
Msg#: 4332855 posted 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

WebmasterWorld Senior Member penders us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



 
Msg#: 4332855 posted 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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 4332855 posted 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

10+ Year Member



 
Msg#: 4332855 posted 12:56 am on Jul 6, 2011 (gmt 0)

rocknbil! wow! amazing help! Thank you both!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved