• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 162
  • Last Modified:

CSS problem

http://tinyurl.com/4xzr6xr

I am havig problems spacing my navigation bar.

1)  the contact button breaks to a new line. Is there any way to prevent this?
2) the drop down menus don't align with their parents - is there a way to fix this?

Thanks!
0
lvollmer
Asked:
lvollmer
  • 4
  • 4
1 Solution
 
stu215Systems AnalystCommented:
If you change the text align to left in the following block it will line the dropdowns up with the text.  Or you can move the menus over if you want the text centered but left aligning it will give you more space on the line for additional menu items.

#sddm li a {
      display: block;
      margin: 0 1px 0 0;
      padding: 4px 2px;
      width: 120px;
      background: #bf0802;
      color: #FFF;
      text-align: left; /* changed to left it was centered */
      text-decoration: none
}

The items are wrapping to the next line because they run out of space since each menu item is 920px.  I still need to play with it a little to see about that.
0
 
lvollmerAuthor Commented:
I don't think each menu item needs to me that width, ieally i'd like all the items on one line and centered within the div
0
 
lvollmerAuthor Commented:
ideally*
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
stu215Systems AnalystCommented:
sorry, I meant each menu item is 120px, but you have the max for the line defined as 920px.

#sddm {
      margin: 0;
      padding: 0;
      z-index: 30;
      width:1000px /* changed to 1000 was 920 */
}
0
 
stu215Systems AnalystCommented:
In the following section of CSS:

#sddm li a {
      display: block;
      margin: 0 1px 0 0;
      padding: 4px 2px;
      padding-right:20px; /* play with this var to determine spacing */

/*      width: 120px;   comment or delete this line */
      background: #bf0802;
      color: #FFF;
      text-align: left; /* changed to left it was centered */
      text-decoration: none
}

0
 
lvollmerAuthor Commented:
bingo thanks!
0
 
stu215Systems AnalystCommented:
Heres a copy of your whole CSS file with comments which may be a bit easier for ya:

/* CSS Document */

* {
	margin: 0;
	padding: 0;
}

body {
	
margin:0; padding:0; background:#003768 url('images/body-bg.jpg') repeat-x;	
	
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 20px;
color: #222;
}

a {
text-decoration: none;
color: #bf0802;
}
a:hover {
text-decoration: underline;
color: #4F5D7F;
}

#wrap {
margin: 0 auto 0 auto;
background: #fff;

/* border: 5px solid #000; */

 width:1020px; background:url('images/content-bg-middle.png') repeat-y;

}

#header {
height: 250px;
width:920px;
background: #FFFFFF url(images/banner.jpg) no-repeat;
margin:0 auto;
}
#header h1 { 
font-size: 50px;
letter-spacing: -7px;
padding: 17px 0 0 10px;
color: #FF5500;
}
#header h1 a { 
color: #D1DDEF;
text-decoration: none;
font-weight: 600;
letter-spacing: -7px;
}
#header h1 a:hover {
color: #fff;
}
.social {
	padding-left:640px;
	padding-top:5px
}
#menu {
height: 30px;
line-height: 30px;
background: #63001e;
padding-left:190px;
border-top: 1px solid #d4d4d4;


}
#menu ul {
list-style-type: none;
padding-left: 30px;
}
#menu ul li {
display: block;
float: left;
}
#menu ul li a {
padding: 0 30px 0 0;
text-decoration: none;
font-weight: 600;
font-size: 14px;
color: #fff;
}
#menu ul li a:hover {
color: #aaa;
text-decoration: none;
}

#content {
padding: 0 20px 20px 0;
}

#topnav {
	margin-top:195px;
	width:920px;
		background: #bf0802;

}
#sddm {
	margin: 0;
	padding: 0;
	z-index: 30;
	width:1000px; /* changed from 920 - determines menu width and can stop items from wrapping */
}
#sddm li {
	margin: 0;
	padding: 0;
	list-style: none;
	float: left;
	font: bold 12px arial
}
#sddm li a {
	display: block;
	margin: 0 1px 0 0;
	padding: 4px 2px;
	padding-right:20px; /* Added to space menu items */
/*    width: 120px; */ /* commented out - not needed if you use padding */
	background: #bf0802;
	color: #FFF;
	text-align: left; /* changed to left was centered */
	text-decoration: none
}

#sddm li a:hover {
	background: #bf0802s
}
#sddm div {
	position: absolute;
	visibility: hidden;
	margin: 0;
	padding: 0;
	background: #EAEBD8;
	border: 1px solid #5970B2
}
#sddm div a {
	position: relative;
	display: block;
	margin: 0;
	padding: 5px 2px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	background: #EAEBD8;
	color: #2875DE;
	font: 12px arial
}
#sddm div a:hover {
	background: #49A3FF;
	color: #FFF
}
#wrap #content .right .style1 {
}
.red {
	color: #F00;
	font-weight: bold;
}

.ital {
	color: #000000;
	font-weight: bold;
	text-align:center;
	font-size:26px;
}

.align-right { float:right; margin: 0 0 15px 15px; }

.align-left { float:left; margin: 0 15px 15px 0; }


.right {
margin:0 auto;
width: 920px;
	padding-top: 50px;
	color: #000;
}
.right h2 {
font-size: 18px;
font-weight: 100;
padding: 15px 0 7px 0;
}
.right h2 a {
text-decoration: none;
}
.right h2 a:hover {

}

.left {
float: left;
width: 160px;
padding-top: 10px;
}
.left h2 {
margin: 10px 0 0 0;
padding-left: 10px;
height: 24px;
line-height: 24px;
color: #7988AF;
font-size: 15px;
}
.left ul {
padding: 10px 0 15px 30px;
list-style-type: square;
color: #99AECD;
}
.left ul li a {
text-decoration: none;
font-weight: 600;
}
.left ul li a:hover {

}



#footer {
position:relative; width:1020px; margin:0 auto; padding:0; background:url('images/content-bg-bottom.png') no-repeat 0 0; text-align:center;


font-size: 9px;

}
#footer a { color: #aaa; }
#footer a:hover { color: #111; }

Open in new window

0
 
lvollmerAuthor Commented:
thanks again
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now