css - Float and Height -
I have a div named footerWrap, in which there are 3 unordered lists, I left all unchanged lists.
My intention was to raise the footprint in height according to the height of the Anarchold inventory. However ... in all browsers (IE6 exept) ... unordered lists passed on div ... like they had z-index subscriptions!
I tried to place a div in the end, with clear: Everyone, and I also tried to float: none on div # footer wrap
This is my docotype Is:
& lt ;! DOCTYPE html public "- // W3C / / DTT XHTML 1.0 Transcription // N" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This is my complete CSS code:
div # footerwrap {height: 180px; Background color: # 5c5c5c; Background Image: URL ('../../img/bgFooter.png'); Background repeat: repeat-x; Background position: top; Padded-top: 20px; Padding-left: 15px; Margin Top: 20px; } / * Menu Footer * / div # Open footer # Main menu, div # footer wall ul # My menu, div # Footer wall ul # Others menu {width: 180px; Float: left;} div # footer wrap ul # main menu li, div # footerWrap ul # myMenu li a, div # footerWrap ul # othersMenu li a {color: #dadada; Text-decoration: none; Padding: 5px; } Div # footerWrap ul # mainMenu li a, div # footerWrap ul #otherMenu li {padding: 5px 10px;} / * hover * / div # footerWrap ul # mainMenu li a: hover, div # footerWrap ul # othersMenu li a: hover {Color: #fff; Background-color: # 666;} / * menu principal / div # footerWrap ul # main menu {margin-top: -10px;} div # footerWrap ul # mainMenu li {row-height: 24px;} / * / menu principal * / / * O menu menu * / div # footerWrap ul # myMenu {margin-left: 15px;} div # footerWrap ul # myMenu li {color: #fff; Line-height: 22px;} div # footerWrap ul # myMenu li.myMenuItem {background-image: url ('../../img / smallArrow.gif'); Background repeat: do not repeat; Background-position: left 7px; Padding-left: 15px; Paddle-right: 20px; } Div # footerWrap ul # myMenu li.myMenuItem a: hover {color: #fff; Background-color: # 666;} / * / o menu menu * / / * outsource menu * / div # footer vertical ul # other menu {margin-left: 300px; Width: 340px;} div # footerWrap ul # othersMenu li {color: #fff; Line-height: 22px; } Div # footerWrap ul # othersMenu li {margin-left: 5px;} div # footerWrap ul # othersMenu li span {margin-left: -5px;} / * / outros menu * /
And this is my XHTML code:
& lt; Div id = "footerwrap" & gt; & Lt ;! - Menu Principal - & gt; & Lt; Ul id = "main menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt ;! O Menu Menu - & gt; & Lt; Ul id = "myMenu" & gt; & Lt; Li & gt; Menu menu & lt; / Li & gt; & Lt; Li class = "myMenuItem slideMenuItem" & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt ;! - Out menu - & gt; & Lt; Ul id = "other menu" & gt; & Lt; Li & gt; & Lt; Period & gt; For outros & lt; / Span & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Item & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Div & gt;
you height: 180px;
is not required #footerWrap
. Floating on 3 ul is good, but you have to clean them.
Add . Clear {clear: both;}
on your CSS Before closing the #footerwrap
div & lt; Div class = "clear" & gt; & Lt; / Div & gt; Add
.
You Status: Relative; Adding
. #footerwrap
and div # footerWrap ul {display: block;}
to your CSS from
Comments
Post a Comment