We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

CSS problem

lvollmer
lvollmer asked
on
Medium Priority
173 Views
Last Modified: 2012-05-11
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!
Comment
Watch Question

stu215Systems Analyst/Project Manager/Programmer
CERTIFIED EXPERT

Commented:
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.

Author

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

Author

Commented:
ideally*
stu215Systems Analyst/Project Manager/Programmer
CERTIFIED EXPERT

Commented:
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 */
}
Systems Analyst/Project Manager/Programmer
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
bingo thanks!
stu215Systems Analyst/Project Manager/Programmer
CERTIFIED EXPERT

Commented:
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

Author

Commented:
thanks again
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.