Top Menu in Div's Not Space right

I Can't seem to get this in position

Page 1 of 1

8 Replies - 2290 Views - Last Post: 30 December 2010 - 01:51 PM

#1 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Top Menu in Div's Not Space right

Posted 24 December 2010 - 05:45 PM

Hi,

I'm having problems getting my TOP MENU into position with my Div Tags

HTML

<!--Menu Top Horizontal-->
<div id="Menu">
<div id="navcontainer">
<ul id="navlist">
<li><a href="#">Web Site Packages</a></li>
<li><a href="#">About Mr. Web</a></li>
<li><a href="#">Web Site Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ink & Toner</a></li>
<li><a href="#">Customer Management Systems</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
</div>


CSS


#Menu {
	margin:0 auto;
	background-image:url(../images/Menu.png);
	width: 1038px;
	height: 66px;
}


#navlist li {
	width:1038px;
	height:66px;
        display: inline;
}

#navlist li a {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
	padding:10px 10px 10px 10px;
}

#navlist li a:hover {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0075ac;
	text-decoration:none;
	padding:10px 10px 10px 10px;
}

#navcontainer {
	margin:0;
	width:1038px;
	height:66px;
}



I've been playing around with margins and padding but it only seems to look godd with that <BR> in the HTML.


Can someone please have a look and see what I'm doing wrong?

Thanks,
Bmcc

Is This A Good Question/Topic? 0
  • +

Replies To: Top Menu in Div's Not Space right

#2 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 789
  • View blog
  • Posts: 1,676
  • Joined: 30-January 09

Re: Top Menu in Div's Not Space right

Posted 24 December 2010 - 06:03 PM

Firstly, you'll need to provide the background image you're using for the menu.

Secondly, what <br> tag? :)
Was This Post Helpful? 1
  • +
  • -

#3 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Top Menu in Div's Not Space right

Posted 25 December 2010 - 12:14 AM

thanks for the reply :)

Ya I left out the <br> tag because I'm all F'd up with changing stuff so much. (pardon My Francais)

But really I'm almost there... but not.

So sorry I pasted the code with my "probably not right fix" <br>

Seen here in HTML

<!--Menu Top Horizontal-->
<div id="Menu">

<div id="navcontainer"><br />
<ul id="navlist">
<li><a href="#">Web Site Packages</a></li>
<li><a href="#">About Mr. Web</a></li>
<li><a href="#">Web Site Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ink & Toner</a></li>
<li><a href="#">Customer Management Systems</a></li>
<li><a href="#">Hosting</a></li>
</ul>
</div>
</div>



And my CSS:

	
#Menu {
	margin:0 auto;
	background-image:url(../images/Menu.png);
	width: 1038px;
	height: 66px;
}

#navlist li {
	width:1038px;
	height:66px;
    display: inline;
}

#navlist li a {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
	padding:10px 10px 10px 10px;
}

#navlist li a:hover {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0075ac;
	text-decoration:none;
	padding:10px 10px 10px 10px;
}

#navcontainer {
	margin:0;
	width:1038px;
	height:66px;
}




I know I'm overlooking something, but I know my (Horizontal "Menu") is off!

Might be Margins or Padding, but it feels like I've tried it all. I could really use some Xmas Spirit.

Thanks for the comments and Happy Holidays

P.S. I can't believe I'm working on Xmas :)

I guess you gotta love what you do!!!

-bmcc81
Was This Post Helpful? 0
  • +
  • -

#4 singularity  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 17
  • View blog
  • Posts: 184
  • Joined: 17-October 08

Re: Top Menu in Div's Not Space right

Posted 27 December 2010 - 04:36 AM

It looks perfectly fine, Just remove your background image to see it in action. Your image is probably creating problems for you.
Was This Post Helpful? 1
  • +
  • -

#5 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 789
  • View blog
  • Posts: 1,676
  • Joined: 30-January 09

Re: Top Menu in Div's Not Space right

Posted 27 December 2010 - 05:44 PM

Yeah as the previous poster said, it's probably your background image that's being difficult. The CSS can be fixed to accomodate, but without seeing what that image is, I can't really help there.

As for your CSS, you should be able to trim it down to this, as (I think) :hover takes on the attribnutes of the parent CSS item:

	
#Menu {
	margin:0 auto;
	background-image:url(../images/Menu.png);
	width: 1038px;
	height: 66px;
}

#navlist li {
	width:1038px;
	height:66px;
    display: inline;
}

#navlist li a {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
	padding:10px 10px 10px 10px;
}

#navlist li a:hover {
	color:#0075ac;
}

#navcontainer {
	margin:0;
	width:1038px;
	height:66px;
}



Was This Post Helpful? 0
  • +
  • -

#6 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Top Menu in Div's Not Space right

Posted 30 December 2010 - 12:23 PM

Hi,


So I'm still having that problem with my Horizontal menu being off... I'm not really sure why? I've attached my web pages so that you can look at it.

I really just want the menu to be centered and look like the picture I've attached.

Can someone show me where I'm going wrong?

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Monsieur Web</title>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
</head>
<body>
 
<!--Header Top-->
<div id="header"></div>
 
<!--Menu Top Horizontal-->
<div id="Menu"><!--Menu Top Horizontal-->  
<div id="Menu">  
<div id="navcontainer">  
<ul id="navlist">  
<li><a href="#">Web Site Packages</a></li>
<li><a href="#">About Mr. Web</a></li>  
<li><a href="#">Web Site Design</a></li>  
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Ink & Toner</a></li>  
<li><a href="#">Customer Management Systems</a></li>  
<li><a href="#">Hosting</a></li>  
</ul>
</div>
</div> 
</div>
 
<!--Wrap 1 is for 4 Packages-->
<div id="wrap1">
<div id="Package1"></div>
<div id="Package2">
<div class="rollover">
<p>
<a href="#"></a>
</p>
</div>
</div>
<div id="Package3">
<div class="rollover">
<p>
<a href="#"></a>
</p>
</div></div>
<div id="Package4">
<div class="rollover">
<p>
<a href="#"></a>
</p>
</div></div>
</div>
 
<!--Wrap 2 is for Ink & Toner Middle Section-->
<div id="wrap2">
<div id="FloatLeft">
<div class="rolloverInk"><a href="#"></a></div>
</div>
</div>
 
<!--Wrap 3 is for Joomla-->
<div id="wrap3">
<div class="Left_Menu"></div>
<div class="Right_Content"></div>
</div>
 
<!-- Footer  -->
<div id="Footer"></div>
 
</body>
</html>




CSS

body {
	text-align:center;
	padding:0px;
	margin:0 auto;
	background-color:#006;
}

#CenterContent {
	text-align:center;
	padding:0px;
	margin:0 auto;
	
	}
#header {
	margin:0 auto;
	background-image:url(../images/header.png);
	width: 1038px;
	height: 190px;
	}
	
#Menu {
	margin:0 auto;
	background-image:url(../images/Menu.png);
	width: 1038px;
	height: 66px;
	}
	
#wrap1 {
	margin:0 auto;
	width: 1038px;
	height: 382px;
	}
	
#Package1 {
	float:left;
	background-image:url(../images/Packages_1.png);
	width: 280px;
	height: 382px;
	}
	
#Package2 {
	float:left;
	background-image:url(../images/Packages_2.png);
	width: 239px;
	height: 382px;
	}
	
#Package3 {
	float:left;
	background-image:url(../images/Packages_3.png);
	width: 239px;
	height: 382px;
	}

#Package4 {
	float:left;
	background-image:url(../images/Packages_4.png);
	width: 280px;
	height: 382px;
	}

	
#wrap2 {
	margin:0 auto;
	background-image:url(../images/Ink_Toner.png);
	width: 1038px;
	height: 261px;
	}
	
#wrap3 {
	margin:0 auto;
	background-image:url(../images/Left_MENU_Right_CONTENT.png);
	width: 1038px;
	height: 519px;
	}
	
.Left_Menu {
	margin:0 0 0 0;
	float:left;
	width: 298px;
	height: 519px;
	}
		
.Right_Content {
	float:left;
	width: 740px;
	height: 519px;
	}
	
#Footer {
	clear:both;
	margin:0 auto;
	background-image:url(../images/Footer.png);
	width: 1038px;
	height: 64px;
	}
	
	
.rollover a {
	margin: 270px 0px 0px 120px;
	display:block;
	width:107px;
	height:29px;
	background-image:url(../images/find_out_more.png);
	background-repeat:no-repeat;
	}
	
.rollover a:hover {
	margin: 270px 0px 0px 120px;
	background-image:url(../images/find_out_more_over.png);
	background-repeat:no-repeat;
	}
	
#FloatLeft {
	float:left;
	width:1038px;
	height:261px;
	}
	
.rolloverInk a {
	margin: 110px 0px 0px 610px;
	width:188px;
	height:51px;
	background-image:url(../images/Click_hereDouble.png);
	background-position:0 0;
	display:block;
	background-repeat:no-repeat;
	}
	
.rolloverInk a:hover {
	background-position:0 -51px;
	background-repeat:no-repeat;
	}
	
#links {
	width:298px;
	height:519px;
}

#links ul{
	margin:14px 0 0 0px;
	padding:2px 0 0 25px;
	list-style:none;
}

#links ul li a {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
}

#links ul li a:hover {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FF0;
	text-decoration:none;
}

#navlist li {
	width:1038px;
	height:66px;
    display: inline;
	padding:5px 10px 0 10px;
}

#navlist li a {
	margin:15px -22px -15px -20;
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
	padding:10px;;
}

#navlist li a:hover {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0075ac;
	text-decoration:none;
}

#navcontainer {
	margin:0 auto;
	width:1038px;
	height:66px;
}





Example of PSD MENU

I'd really like iot if someone could tell me where I'm going wrong.

Thanks,
Brandon
Attached Image

Attached File(s)


Was This Post Helpful? 0
  • +
  • -

#7 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 789
  • View blog
  • Posts: 1,676
  • Joined: 30-January 09

Re: Top Menu in Div's Not Space right

Posted 30 December 2010 - 12:29 PM

Do you have a hyperlink to the site as it stands? The CSS and HTML provided is good, but the CSS references background images, which are most likely the cause of the problem. Without seeing how it looks for you now, I can't provide assistance to get it to look how you want it.
Was This Post Helpful? 0
  • +
  • -

#8 bmcc81  Icon User is offline

  • D.I.C Regular

Reputation: 2
  • View blog
  • Posts: 312
  • Joined: 10-July 07

Re: Top Menu in Div's Not Space right

Posted 30 December 2010 - 12:41 PM

View Poste_i_pi, on 30 December 2010 - 02:29 PM, said:

Do you have a hyperlink to the site as it stands? The CSS and HTML provided is good, but the CSS references background images, which are most likely the cause of the problem. Without seeing how it looks for you now, I can't provide assistance to get it to look how you want it.



Hi and thanks for the fast reply,


Here is a link to the test web site TEST

and I've been playing around with my CSS, so what I have now is:

CSS

body {
	text-align:center;
	padding:0px;
	margin:0 auto;
	background-color:#006;
}

#CenterContent {
	text-align:center;
	padding:0px;
	margin:0 auto;
	
	}
#header {
	margin:0 auto;
	background-image:url(../images/header.png);
	width: 1038px;
	height: 190px;
	}
	
#Menu {
	margin:0 auto;
	background-image:url(../images/Menu.png);
	width: 1038px;
	height: 66px;
	}
	
#wrap1 {
	margin:0 auto;
	width: 1038px;
	height: 382px;
	}
	
#Package1 {
	float:left;
	background-image:url(../images/Packages_1.png);
	width: 280px;
	height: 382px;
	}
	
#Package2 {
	float:left;
	background-image:url(../images/Packages_2.png);
	width: 239px;
	height: 382px;
	}
	
#Package3 {
	float:left;
	background-image:url(../images/Packages_3.png);
	width: 239px;
	height: 382px;
	}

#Package4 {
	float:left;
	background-image:url(../images/Packages_4.png);
	width: 280px;
	height: 382px;
	}

	
#wrap2 {
	margin:0 auto;
	background-image:url(../images/Ink_Toner.png);
	width: 1038px;
	height: 261px;
	}
	
#wrap3 {
	margin:0 auto;
	background-image:url(../images/Left_MENU_Right_CONTENT.png);
	width: 1038px;
	height: 519px;
	}
	
.Left_Menu {
	margin:0 0 0 0;
	float:left;
	width: 298px;
	height: 519px;
	}
		
.Right_Content {
	float:left;
	width: 740px;
	height: 519px;
	}
	
#Footer {
	clear:both;
	margin:0 auto;
	background-image:url(../images/Footer.png);
	width: 1038px;
	height: 64px;
	}
	
	
.rollover a {
	margin: 270px 0px 0px 120px;
	display:block;
	width:107px;
	height:29px;
	background-image:url(../images/find_out_more.png);
	background-repeat:no-repeat;
	}
	
.rollover a:hover {
	margin: 270px 0px 0px 120px;
	background-image:url(../images/find_out_more_over.png);
	background-repeat:no-repeat;
	}
	
#FloatLeft {
	float:left;
	width:1038px;
	height:261px;
	}
	
.rolloverInk a {
	margin: 110px 0px 0px 610px;
	width:188px;
	height:51px;
	background-image:url(../images/Click_hereDouble.png);
	background-position:0 0;
	display:block;
	background-repeat:no-repeat;
	}
	
.rolloverInk a:hover {
	background-position:0 -51px;
	background-repeat:no-repeat;
	}
	
#links {
	width:298px;
	height:519px;
}

#links ul{
	margin:14px 0 0 0px;
	padding:2px 0 0 25px;
	list-style:none;
}

#links ul li a {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FFF;
	text-decoration:none;
}

#links ul li a:hover {
	font-size:14px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#FF0;
	text-decoration:none;
}

#navlist li {
	width:1038px;
	height:66px;
    display: inline;
}

#navlist li a {
	font-size:15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#e12526;
	text-decoration:none;
}

#navlist li a:hover {
	font-size:15px;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:#0075ac;
	text-decoration:none;
}

#navcontainer {
	width:1038px;
	height:66px;
}



Thanks again,
bmcc81
Was This Post Helpful? 0
  • +
  • -

#9 Sadin56  Icon User is offline

  • D.I.C Head

Reputation: 12
  • View blog
  • Posts: 183
  • Joined: 19-December 10

Re: Top Menu in Div's Not Space right

Posted 30 December 2010 - 01:51 PM

If the menu is in the #navcontainer you should try playing around with the padding and margin in that.

If what i think your trying to do is move the nav down so it is shown in the white area not the blue then add something like...
#navcontainer {
padding-top:10px;
width:1038px;
height:66px;
}


Play around with the amount of in the padding and see if that works.

best of luck!
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1