logo-dw

Go Back   Dreamweaver Club Forums > Hand Coders Forum > HTML and CSS
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 04-24-2014, 07:32 PM   #1
ashmat
 
Join Date: Apr 2014
Posts: 1
Default Css Layout Troubles

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:
Code:
 <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;
}

Last edited by edbr; 04-25-2014 at 01:15 AM..
ashmat is offline   Reply With Quote
Old 04-25-2014, 07:21 AM   #2
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

<div id=Nav> <div id="Nav">
style your >li> dont use <li class="style10" style="width: 169px; height: 23px">
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 08:00 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com