PDA

View Full Version : Css Layout Troubles


ashmat
04-24-2014, 07:32 PM
I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:

this is the div coding:

<div id=Nav>
<ul class="dropdown" id="Bar"; width: 879px" name="Bar">
<li class="style16" style="width: 161px; height: 22px">
<a href="default.html" style="width: 146px">Home</a></li>
<li class="style10" style="width: 169px; height: 23px">
<a href="about.html" style="width: 153px">About</a></li>
<li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
<a href="Equipment.html" class="style18">
<div class="style10" style="width: 156px; height: 20px;">
Equipment</div>
</a> <ul class="sub_menu">
<li><a href="compressor.html">Air Compressors</a></li>
<li><a href="compactions.html">Compaction</a></li>
<li><a href="concrete.html">Concrete Equipment</a></li>
<li><a href="forklifts.html">Fork Lifts</a></li>
<li><a href="generators.html">Generators</a></li>
<li><a href="groundthawing.html">Ground Thawing</a></li>
<li><a href="heaters.html">Heaters</a></li>
<li><a href="scissorlifts.html">Scissor Lifts</a></li>
<li><a href="boomlifts.html">Boom Lifts</a></li>
<li><a href="lighttowes.html">Light Towers</a></li>
<li><a href="misc.html">Misc.</a></li>
<li><a href="dirtequipment.html">Dirt Equipment</a></li>
<li><a href="powertools.html">Power Tools</a></li>
<li><a href="pumps.html">Pumps | Saws | Welders</a></li>
</ul>
</li>
<li style="width: 165px"><a href="locations.html">
<div class="style10" style="width: 154px">
Locations</div>
</a>
</li>
<li style="width: 180px"><a href="contact.html">
<div class="style16" style="height: 24px">
Contact Us</div>
</a> </li>
</ul>
</div>

This is the css coding:

#wrapper {
width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #f4f4f4;
}
#Navigation {
background-image: url(Images/NAvigation%20BAr.jpg);
background-repeat: no-repeat;
width: 880px;
visibility: visible;
height: 3-px;
vertical-align: top;
}
Nav {
vertical-align: top;
margin: 0px;
padding: 0px;
clear: both;
height: 20px !important;
}

#wrapper1 {
width: 876px;
margin-right: auto;
margin-left: auto;
color: #F4F4F4;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
}
#Bar {
background-repeat: no-repeat;
width: 880px;
height: 28pt;
overflow: visible;
background-image: url(Images/NAvigation%20BAr.jpg);
position: relative;
vertical-align: top;
}
#container {
width: 880px;
color: #000;
background-color: #EDEDED;
dominant-baseline: 578px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
}
#content {
float: left;
color: #090;
width: 580px;
padding-right: 6px;
background-color: #033;
margin-top: 20px;
}
.container {
color: #000;
background-color: #ff6;
width: 876px;
}
#expect {
height: 164px;
width: 294px;
float: right;
position: relative;
background-color: #C90;
margin-left: 582px;
padding-top: 10px;
}
#hours {
float: left;
height: 55px;
width: 294px;
line-height: 4px;
word-spacing: normal;
white-space: normal;
display: inline;
letter-spacing: normal;
padding-top: 10px;
font-size: 13pt;
color: #000;
margin-left: 586px;
background-color: #F99;
}
#footer {
height: 76px;
width: 880px;
background-color: #CC0;
clear: both;
}

#cards {
float: right;
height: 31px;
width: 294px;
margin-left: 582px;
padding-top: 10px;
background-color: #F36;
}
#contact {
float: left;
height: 328px;
width: 293px;
word-spacing: normal;
white-space: normal;
line-height: 1px;
color: #000;
display: inline;
font-size: 14pt;
background-color: #FFF;
padding-top: 10px;
margin-top: 20px;
}
#header {
background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 885px;
height: 126px;
background-color: #000;
margin-right: 2.5px;
margin-left: 0px;
}
#wrapper #container #contact p strong {
color: #800000;
font-size: 14pt;
}
#wrapper #container #contact blockquote p a {
color: #000;
}
#wrapper #container #expect div {
color: #900;
font-size: 14pt;
font-weight: bold;
}
#wrapper #container #hours div {
color: #900;
font-size: 14pt;
font-weight: bold;
}
#box2 {
background-image: url(Images/Option%201/Services/whitebox2.jpg);
}
#box3 {
background-image:url(Images/Option%201/Services/redbox2.jpg);
background-repeat:no-repeat;
background-position: center center;
}
#gold {
background-image:url(Images/Option%201/Logos/gold.gif);
background-repeat:no-repeat;
}
#white {
background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
background-repeat:no repeat;
}
#forklift {
background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
background-repeat:no-repeat;
}
#scissorlift {
background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts -21.jpg);
background-repeat:no-repeat;
}
/* Navigation Menu- Level one */
ul {
list-style: none
}
ul.dropdown {
font-size: 13pt;
color: #000000;
height: 25px;
text-decoration: none !important;
width: 860px;
position: relative;
vertical-align: top;
}
ul#Bar.dropdown {
width: 878px;
position: relative;
vertical-align: top;
}
ul.dropdown li {
font-weight: 600;
float: left;
zoom: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
display: block;
width: 175px;
color: #000000;
top: 25px;
text-decoration: none !important;
text-align: center;
}
ul.dropdown a:hover {
color:#cc0000;
}
ul.dropdown a:active {
color: #000000;
}
ul.dropdown li a {
display: block;
border-right: 1px solid#333;
color: #000000;
border-right-width: 1px;
text-decoration: none !important;
text-align: center;
}
ul.dropdown li:last-child a {
border-right:none; /* does not wotk in IE */
text-decoration:none !important; }
ul.dropdown li.hover,
ul.dropdown li.hover {
color: #000000;
position: relative;
height: 28px;
top: 0px;
}
ul.dropdown li.hover a {
color:#800000;
}
/* Level Two Navigation */
ul.dropdown ul {
width: 180px;
visibility: hidden;
position: absolute;
top: 100%;
left: 36%;
display: block;
float: left;
color: #000000;
text-decoration: none !important;
height: 25px;
}
ul.dropdown ul li {
font-weight: normal;
color: #000000;
border-bottom: 1px solid #ccc;
float: left;
border-bottom-color: #c0c0c0;
border-bottom-style: groove;
display: block;
background-color: #dbdbdb;
text-decoration:none !important;
}
/* IE 6&7 needs inline block */
ul.dropdown ul li a {
border-right: none;
display: inline-block;
height: 18px;
line-height: 16px;
color: #000000;
width: 100%;
text-decoration: none !important;
}
/* Level Three Navigation */
ul.dropdown ul ul {
top: 100%;
color: #000000;
text-decoration: none !important;
}
ul.dropdown li:hover>ul {
visibility: visible;
color: #000000;
top: 30px;
text-decoration: none !important;
}

edbr
04-25-2014, 07:21 AM
<div id=Nav> <div id="Nav">
style your >li> dont use <li class="style10" style="width: 169px; height: 23px">