css help for a rookie...

**dtp134** · Jul 7, 2011 19:12

I am really a massage therapist. But since it is my business, I am also the entire IT department. I have centered my logo and want nav buttons (6 or 8 8 of them) below to be centered and evenly spaced. Have tried using floats and a relative position thing I found on another site, but doesn't work. Any help, thoughts and suggestions are greatly appreciated.

Re: BYO website pg 218

I am also having trouble loading the background image in the nav section. All other photos (for gallery so far) have worked no problem. The div-cir image loaded also. I have rearranged the photo in and out of the background folder and still no dice. Please help so I can build my real site soon!

**ralph.m** · Jul 7, 2011 19:30

Hi dtp134. Welcome to SitePoint.

Could you post the code you have so far, or a link to your site, or a screen shot? That would make it easier to understand what you are trying to do.

There are ways to center a menu, but it would be handy to know if the menu is evenly spaced over the full width of the container or not.

Regarding the bg image problems, again, post as much info as you can so we can work out what has gone wrong. The link to the image may be wrong. that is a common problem.

**dnordstrom** · Jul 7, 2011 19:33

Hello there, and welcome to SitePoint again! (I just noticed you registered last year but haven't written for a while—nice that you're back.

)

Now, as for your question, it would be very helpful if you could include (wrapped in CODE tags) any code you have written so far. That way we can easier put the question into context and give you better suggestions.

It's actually past 4 AM here now and I'm off to get some well needed sleep but I wanted to at least give you this suggestion first so that you can get assistance quickly and smoothly—someone else will most likely help you out long before I'm back here.

Good luck with this, enjoy!

EDIT: ralph.m was first!

**Paul O'B** · Jul 8, 2011 02:33

Instead of using floats you cvan use inine-block although you need a small hack for ie7 and below and that will allow you to center multiple block elements quite easily.

Here is an example that centers images and captions but the same technique would be used for a menu. You can find more about the technique here.

If you can't work it out then post your existing code and we'll try and help you fit it in place.

**dtp134** · Jul 8, 2011 09:44

tried playing around with some stuff that I THOUGHT would work, but now i'm totally screwed up and don't know what I did. html is

Code:

<body>
    <div id="header">
      <div id="logo">
       <img src="F:/new website/pics/logo_final.jpg" alt="University Neuromuscular Massage"/>
      </div>
      <div id="tagline">
        <h2>Restoring Balance, One Massage At A Time</h2>
      </div>
    </div> <!-- end of header div -->
    <div id="navigation">
      <ul>
        <li><A HREF="index2.html">Home</A></li>
        <li><A HREF="services.html">Services</A></li>
        <li><A HREF="pricing.html">Pricing</A></li>
        <li><A HREF="contact.html">Contact Us</A></li>
        <li><A HREF="therapists.html">Meet Our Therapists</A></li>
      </ul>
    </div> <!--end of navigation div -->

css looks like this:

Code:

#navigation {
 float:right;
 position:relative;
 left:-50%;
 text-align:left;
 }
 #navigation ul{
 list-style:none; 
position:relative;
 left:50%;
 } 

#navigation li{
  float:left;
  position:relative;
}
/* ie needs position:relative here*/

#navigation a{
 text-decoration:none;
 margin:10px;
 background:red;
 float:left;
 border:2px outset blue;
 color:#fff;
 padding:2px 5px;
 text-align:center;
 white-space:nowrap;

}
 #navigation a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
 #content{overflow:hidden}/* hide horizontal scrollbar*/


/*-----------------------
END OF NAVIGATION STUFF
*/-----------------------


/*------------------
logo and tag line position
*/------------------

#header {
  width: 100%;
}


#logo, #tagline {
  position: absolute;
}

#logo {
  left: 50%;
  }

#tagline {
  text-align: center;
  top: 75%;
}

I got the nav stuff off a link on here. This is not a live site, still only on my flash drive so you won't be able to see the pic. Not sure if it will help you at all, but thank you to all try to help get me out of the woods.

**dresden_phoenix** · Jul 8, 2011 12:41

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>OW MY BACK!!!</title>
		<style type="text/css">
#navigation {
 float:right;
 position:relative;
 left:-50%;
 text-align:left;
 }

#navigation li{
  list-style: none;
  float:left;
  position:relative;
 left:50%;
}
/* ie needs position:relative here*/

#navigation a{
 text-decoration:none;
 margin:10px;
 background:red;
 float:left;
 border:2px outset blue;
 color:#fff;
 padding:2px 5px;
 text-align:center;

}
 #navigation a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
 #content{overflow:hidden}/* hide horizontal scrollbar*/


/*------------------
logo and tag line position
*/


#tagline{ text-align: center; }
#tagline br {display:none;}
#tagline img {display:block; margin:0 auto;}
</style>

	</head>
    <h2 id="tagline"><img src="F:/new website/pics/logo_final.jpg" alt="University Neuromuscular Massage"/><br>Restoring Balance, One Massage At A Time</h2>
    <p> text</p>
      <ul id="navigation">
        <li><a HREF="index2.html">Home</a></li>
        <li><a HREF="services.html">Services</a></li>
        <li><a HREF="pricing.html">Pricing</a></li>
        <li><a HREF="contact.html">Contact Us</a></li>
        <li><a HREF="therapists.html">Meet Our Therapists</a></li>
      </ul>
	</body>
</html>

This should set you on your way.

#1) some of your CSS didnt work simply because of the way you commented it :"*/------------------" is no good! anything after the "*/" is no longer part of the comment and may confuse some UAs

#2) I corrected your centering method for the navigation, you were on the right track, just applying it to the wrong element ( you needed to position the LIs relatively not the UL). Paul method, of course , is even more elegant, but I didnt want to change your momentum too much.

#3) incidentally, you don't need to wrap a div around the nav UL, unless you were going to a BG graphic that would stretch longer than the UL itself. I eliminated that and and moved the #navigation ID to the UL tag

#4) AP is is fun, but really try to avoid absolute positioning unless ABSOLUTELY necessary. So I re did your header as well.

#5) Same deal with the navigation. the H2 is a block element, if you move the image into the h2 and give it a display:block. you can essentially get rid of all the other wrapping divs ( again, unless you needed extra hooks for more than one bg... remember you can still add another BG to your h2)

#6) just in case you were worried about having it on the same4 line as the h2 i added a BR for when CSS is off

#7) BTW, your image HREF is set to a location on your hard drive.... this means it will be missing when when you upload your page to your server. You really should change that to a directory path that is relative to your HTML document.

Hope that helps

**dtp134** · Jul 8, 2011 22:40

THANK YOU SO MUCH! I knew the pic is on my flash drive. Site not live yet. Have one up, but got new logo, so new site. Will try all this in morning. Thank you. If you are in charlotte NC and need a massage, just let me know. chronic pain and sports injuries are my specialty.