- This topic is empty.
-
AuthorPosts
-
May 18, 2009 at 7:27 pm #24881
nchipping
MemberI am having trouble getting my navigation lists in my header to space properly, so that they can be viewable and used correctly. Here’s a screen shot of the problem:
http://meandmyback.com/provident-living … messed.bmp
Any help would be appreciated – I have tried a bunch of things and just can’t figure it out. Here’s the HTML, and then the CSS:
Code:
Provident Money
3 STEPS
TO YOUR
SUCCESS…1. TRACK
“You cannot improve that
which you do not track.”Take control of your finances with
our easy-to-use tracking and
budgeting software and begin the
journey to financial freedom.By the way, we thought it only
fair to tell you that this is the only
step our competitors provide. But
there are still 2 vital steps…2. EVALUATE
- Over 100 powerful calculators created by our team of highly-specialized mathematicians gives you ultimate ability to see “what if” situations.
- Solid, provident advice in all major aspects of your financial life, provided by experts.
What is it? Learn about this powerful concept, and why it is the foundation of our provident philosophy, and your financial success!
NOW FOR THE CSS
Code:* {
margin:0;
padding:0;
}
#background {
background-color: #364565;
}
#container {
margin: 0 auto;
padding-top: 70px;
width: 910px;
padding-bottom:inherit;
}
#header {
height: 100px;
width: 647px;
font-family:Arial, Helvetica, sans-serif;
font-size:large;
background-color:#FFF;
}
#header ul {
list-style:none;
display:block;
float:right;
width: 300px;
}
#header ul li {
list-style:none;
float: right;
display:block;
font-size:10px;
margin-top: -30px;
width: 70px;
padding-left: 5px;
padding-right: 5px;
}
#headerimage {
margin:25px;
}
#header-login {
float:right;
margin: 0 auto;
margin-top: 36px;
}
#header-login ul li {
margin: 10px;
padding: 5px;
}
#main {
float: left;
width: 638px;
padding: 5px;
margin-top: 12px;
background-color:#FFF;
}
#main1 {
float:left;
width: 190px;
padding:5px;
margin: 5px;
text-align:right;
}
#main2 {
float: left;
width: 190px;
padding: 5px;
margin: 5px;
border-left: solid 1px #364565;
border-right: solid 1px #364565;
text-align:center;
}
#main2 ul li{
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
}
#main3 {
float:right;
width:190px;
padding: 5px;
margin: 5px;
text-align:left;
}#main-right {
float: right;
width:249px;
height:410px;
margin-top: -103px;
background-color: #FFF;
}
#main-right2 {
float:right;
width: 219px;
height:120px;
margin-left: 5px;
margin-top: 12px;
padding: 15px;
background-color: #E8A722;
font-family:Arial, Helvetica, sans-serif;
color: #364565;
}
#main-right2 p {
font-weight:500;
}
#align {
margin-left: 150px;
}
#align2 {
margin-left: 5px;
}
#main-right2 p b a {
text-decoration:none;
color: #364565;
border:none;
}
#main-right2 p b a:hover {
text-decoration: underline;
color: #999;
}
#main-right2 p b a:visited {
color: #364565;
text-decoration:none;
}
#h1 {
font-family: Arial, Helvetica, sans-serif;
margin-left:310px;
margin-top:-140px;
margin-bottom:12px;
}
.clear {
clear:both;
}
p {
font-family:Arial, Helvetica, sans-serif;
font-size: 11px;
}
img {
border:none;
}May 18, 2009 at 9:01 pm #57754John Harris
MemberYour problem is
Code:margin-top: -30px;it would make more sense to use
Code:margin-bottom: 30px;OR
Code:margin:0px 0px 30px 0px;Also once the spacing is corrected you will notice that your navigation will appear "backwards" like
Code:ABOUT US FAQS FEATURES HOMETo fix this u will need to change
Code:#header ul {
float:right;
}
#header ul li {
float: right;
}TO
Code:#header ul {
float:left;
}
#header ul li {
float: left;
}You may want to clean up the code some more though. It will definitely fix some of your problems down the road.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.