Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 160
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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