homepage Welcome to WebmasterWorld Guest from 54.205.99.71
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, Moderator: open

CSS Forum

    
Header image/menu spacing issues css-html
Bowdii




msg:4332857
 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




msg:4332968
 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




msg:4333145
 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




msg:4335486
 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