coco243 Posted June 22, 2013 Share Posted June 22, 2013 Hi, I have a problem with list elements that don't want to stay within a border. The problem apears when I add the float:leftto the <li> elements, because I want that the list elements to be arranged horisontaly, I attach and the code. The .php code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><link rel="stylesheet" type="text/css" href="border.css" > </head> <body> <div class="big"> <ul id="menu"><li> <a href="#"> abc </a> </li><li> <a href="#"> abc </a> </li> </ul> </div> </body> </html> the .css code: *{margin: 0px;padding:0px;} html,body {background-color:pink} .big {margin: 10% 20% 20% 20%;background-color:blue;} #menu {list-style:none;border-style:solid; }#menu li {float:left;} Thank you in advance Link to comment Share on other sites More sharing options...
niche Posted June 22, 2013 Share Posted June 22, 2013 I'm not sure what you really want. So I gave your menu a height and width to give you something that might be close to what you need. Hopefully, you'll be able to take it from there. If not, keep posting. <!DOCTYPE html><html><head><style>*{margin: 0px;padding:0px;}html,body {background-color:pink}.big {margin: 10% 20% 20% 20%;background-color:blue;}#menu {float:left;list-style:none;border-style:solid;height:100px;width:30px;}#menu li {float:left;}</style></head><body><div class="big"><ul id="menu"><li> <a href="#"> abc </a> </li><li> <a href="#"> abc </a> </li></ul></div></body></html> Link to comment Share on other sites More sharing options...
coco243 Posted June 22, 2013 Author Share Posted June 22, 2013 Thank you, it resolved my problem. But I have a question. Why <ul> was not contained in the div "big"? Because when I wasn't had height and width at the ".menu" class, the blue background was not appeared.The <ul> <li> aren't wrapped in nothing? Link to comment Share on other sites More sharing options...
niche Posted June 22, 2013 Share Posted June 22, 2013 (edited) Think about it. What does the menu (now) have that the big is missing? EDIT. You'll get it. If not just check back. Edited June 22, 2013 by niche Link to comment Share on other sites More sharing options...
coco243 Posted June 22, 2013 Author Share Posted June 22, 2013 I don't understand what you are asking me. Maybe because of my english skills Link to comment Share on other sites More sharing options...
niche Posted June 22, 2013 Share Posted June 22, 2013 (edited) See the difference? <!DOCTYPE html><html><head><style>*{margin: 0px;padding:0px;} html,body {background-color:pink} .big {margin: 10% 20% 20% 20%;background-color:blue;height:100px;width:300px;} #menu {float:left;list-style:none;border-style:solid;height:50px;width:30px;background-color:pink;}#menu li {float:left;}</style></head><body><div class="big"> <ul id="menu"><li> <a href="#"> abc </a> </li><li> <a href="#"> abc </a> </li> </ul> </div></body></html> Edited June 22, 2013 by niche Link to comment Share on other sites More sharing options...
coco243 Posted June 22, 2013 Author Share Posted June 22, 2013 you modified the color for the div "menu" ? but I don't understand why? Link to comment Share on other sites More sharing options...
niche Posted June 22, 2013 Share Posted June 22, 2013 (edited) So you could see it. You also can use developers tools like firebug. to "see the structure" of your code. I usually temporarily insert a background-color when I'm writing or debugging code just so I can see what's really happening in my code. Then when I don't need color any more I delete it and viola! I'm certain that my code is working the way I expect it to because I was able to observe the way it actually worked. EDIT: Using color that way helps keep my code fun especially when I'm tired. The more garish the color, the more fun I have. I also learn how different colors go together and should never be put together. Edited June 22, 2013 by niche Link to comment Share on other sites More sharing options...
coco243 Posted June 22, 2013 Author Share Posted June 22, 2013 I think that is a real deal to know what colors to use and make nice layouts. But still I don't have a clear image about the unordered list <ul>. Why the <ul>is not wraped in in the div named "big". Or with other words, why the <ul> doesn't respect that the div named "big" is the parent div for it. I observed that fact , because the background of the <ul> wasn't the same with the background of the div "big", in the momment that the list was exceeded the border limits. Link to comment Share on other sites More sharing options...
niche Posted June 22, 2013 Share Posted June 22, 2013 (edited) The code from #6 puts the list items within the unordered list (pink area) within the blue div just as requested in your #1. Edited June 22, 2013 by niche Link to comment Share on other sites More sharing options...
coco243 Posted June 22, 2013 Author Share Posted June 22, 2013 I have the impression that the code at #6 just enlarging the menu height background and overlapping with the list elements and I have a suspicion that the list elements aren't included in the div "big". I am right? Link to comment Share on other sites More sharing options...
niche Posted June 22, 2013 Share Posted June 22, 2013 (edited) Wrong. Your code was written so the the list would be inside the menu and the menu would be inside the div. All you were missing were heights and widths which I provided. Plus I gave the menu a color for demonstration purposes. The "over-lapping" is inherent to the layout you established. EDIT: I expect that you will edit the heights and widths to your taste. The big take-away from this topic is that divs need heights and widths. Obviously, your menu id doesn't. I just gave the menu ID a height and width to make the list stack one in top of the other. Else the list items would be side by side. Edited June 22, 2013 by niche Link to comment Share on other sites More sharing options...
dsonesuk Posted June 22, 2013 Share Posted June 22, 2013 The outer container elements cannot detect the area of floated child elements, so these became zero, height, usually in this case you would use overflow hidden, but this would not be ideal for submenus of a menu as they would become hidden, so one option is to define a fixed height for these collapsing outer container elements. 1 Link to comment Share on other sites More sharing options...
coco243 Posted June 23, 2013 Author Share Posted June 23, 2013 Thank you for your attention.I supposed that a container element ( a div in this case ) modifies his dimensions in concordance with his contained elements. But now I realize that I was rong. P.S.: Can you please tell me a good practice for floating on horisontal, text (elements) inside of a div without going out from this div? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 23, 2013 Share Posted June 23, 2013 (edited) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title> <style type="text/css"> #wrapper {width: 1024px; margin:0 auto; overflow:hidden; min-height:800px; background-color:#CCC;} ul, li {margin:0; padding:0; text-indent:0; list-style-type:none;} /*zero all margins/padding and text indent b4 u start*/.menu { margin: 40px;}.menu ul{border: 3px solid navy; height: 30px;}.menu.leftnav {float: left;}.menu.rightnav{float: right;}.menu.middlenav{left: 50%; position: relative; float:left; clear:both; }.menu.middlenav div{left: -50%; position:relative;} .menu ul li {position:relative; float:left;} /*float: left; IE7 / safari*/ .menu ul ul {border:none; position: absolute; left: -99999em; top:30px; width: 200px; z-index:50;}.menu ul ul li:first-child {border-top: 2px solid red; }.menu ul ul li:last-child {border-bottom: 2px solid red; }.menu ul li li {width:100%; border-left: 2px solid red; border-right: 2px solid red;}.menu ul li a {display:block; float: left; background-color:#CC99FF; text-decoration:none; padding:0 20px; line-height:30px;}.menu ul li li a {width:100%; padding:0; text-indent: 20px;}.menu ul li a:hover { background-color:#CC9966;} .menu ul li:hover ul {left: 0;} </style></head><body> <div id="wrapper"><div class="menu leftnav"> <ul><li><a href="#">Parent menu 1</a></li><li><a href="#">Parent menu 2</a> <ul> <li><a href="#">Parent menu 2 - sub1</a></li> <li><a href="#">Parent menu 2 - sub2</a></li> <li><a href="#">Parent menu 2 - sub3</a></li> </ul></li><li><a href="#">Parent menu 3</a></li></ul> </div><div class="menu rightnav"><ul><li><a href="#">Parent menu 1</a></li><li><a href="#">Parent menu 2</a> <ul> <li><a href="#">Parent menu 2 - sub1</a></li> <li><a href="#">Parent menu 2 - sub2</a></li> <li><a href="#">Parent menu 2 - sub3</a></li> </ul></li><li><a href="#">Parent menu 3</a></li></ul> </div><div class="menu middlenav"><div><ul><li><a href="#">Parent menu 1</a></li><li><a href="#">Parent menu 2</a> <ul> <li><a href="#">Parent menu 2 - sub1</a></li> <li><a href="#">Parent menu 2 - sub2</a></li> <li><a href="#">Parent menu 2 - sub3</a></li> </ul></li><li><a href="#">Parent menu 3</a></li></ul></div></div></div></body></html> Edited June 23, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
coco243 Posted June 24, 2013 Author Share Posted June 24, 2013 Thanks. It works Link to comment Share on other sites More sharing options...
dsonesuk Posted June 24, 2013 Share Posted June 24, 2013 Agggrrh IE7 does not support last-child, duh i just set up support for first child in ie7, do you think i should do the same for last child, duh no, who in their right mind would want support for last-child, duh ok! then beautiful crappy IE7 is ready to go out. #wrapper {width: 1024px; margin:0 auto; overflow:hidden; min-height:800px; background-color:#CCC;}ul, li {margin:0; padding:0; text-indent:0; list-style-type:none;} /*zero all margins/padding and text indent b4 u start*/.menu { margin: 40px; position:relative;} .menu ul{height: 30px;border: 3px solid navy;}.menu.leftnav{float: left;}.menu.rightnav{float: right;}.menu.middlenav {clear:both; float:left; }.menu.middlenav { margin: 40px 0; float: none; }.menu.middlenav div { float:left;left: 50%; position: relative;}.menu.middlenav div ul {left: -50%; position:relative;} .menu ul li {position:relative; float:left; } /*float: left; IE7 / safari*/.menu ul ul, .menu.middlenav ul ul {position: absolute; left: -99999em; top:30px; width: 200px; z-index:50; border: 2px solid red;height:auto;}.menu ul li li {width:100%;}.menu ul li a {display:block; float: left; background-color:#CC99FF; text-decoration:none; padding:0 20px; line-height:30px; }.menu ul li li a {width:100%; padding:0; text-indent: 20px; }.menu ul li a:hover { background-color:#CC9966;}.menu ul li:hover ul {left: 0;} Link to comment Share on other sites More sharing options...
coco243 Posted June 24, 2013 Author Share Posted June 24, 2013 I have a similary problem with the image of a shoping chart, that is displayed with a unwanted background in IE6.If fou can help me I would be gratefull because I have absolutely no ideea about resolving this problem. I will attach the code. The .php: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="clothes.css" > </head> <body> <div class="big"> <div id="antet"> <!-- ****************here is the image with the problem********************************* --> <div style="float:right;margin:0px 10px;"> <a href="#" style="text-decoration:none"> <img src="clothespicture/shopping_chart.jpg" width="20" style="padding-right:5px;margin-top:4px;"> <span style="vertical-align:top"> cucurigu </span></a> </div> <!-- ****************here is the image with the problem********************************* --> <div style="float:left"> <span id="firma"> AB </span> </div><div style="float:left;padding-top:16px;background-color:red">AB FASHION </p> </div> </div> <!-- end antet --> <div id="top"> <ul id="menu"> <li> <a href="#"> HOME </a> <ul> <li> <a href="#"> abc </a> </li> <li> <a href="#"> abc </a> </li> </ul> </li> <li> <a href="#"> COLLECTIONS </a> </li> <li> <a href="#"> BLOG </a> </li> <li> <a href="#"> ABOUT US </a> </li> </ul> </div> <!-- end top --> <div id="content"> <p> asd </p> </div> <!-- end content --> </div> <!-- end big --> </body> </html> and the .css *{ margin: 0px; padding:0px; } html,body { background-color:pink } .big { margin: 10% 20% 20% 20%; background-color:FFFFF; } #menu { list-style:none; height:15px;/*border-style:solid; */ /* in caz ca se doreste ca border-ul sa contina doar lista ul */display:inline-block; /* ca sa faca un fel de container, sa nu iasa elementele din border *//*margin-bottom:0;*//* display:inline-block; *//* padding-bottom:20px; */ /* sau ii putem da acestei clase, respectiv listei ul la care ii asociem aceasta clasa width:Xpx; height:Ypx; se pare ca listele nu sunt continute in border */ } #menu li { position:relative; /* se pune pentru ca lista dropdown sa fie aliniata vertical cu elementele parinte */margin-left:10px;float:left; } #menu ul li { float:none; /* ca sa anuleze float:left-ul precizat in #menu li, care s-ar fi rasfrant si asupra acestor elemente */list-style:none;margin-left:0; } #menu ul { /* ascunde lista drop down */ position:absolute;left:-9999px;margin:0; } #menu li a { padding: 0px 4px 0px 4px; } #menu li:hover ul { /* afisaza link-urile dropdown */ left:0; } #menu a:hover{ /* culoarea backgroundului elementului in momentul in care treci cu mouse-ul peste ele */ background-color:white;color:black; } #menu ul li a{ /* padding-ul pentru elementele din dropdown */ background-color:blue;padding: 0px 20px; } #menu a { /* scoate underlineurile din toate linkurile din clasa menu */ text-decoration:none; } #content { background-color:green; } #top { background-color:#FFFFFF; /* la codurile astea trebuie neaparat pus in fata # */border-style:dotted;border-width:1.5px;border-right-color:#ffffff;border-left-color:#ffffff; } #antet { background-color:#ffffff;height:90px;padding-top:10px; } #antet a:hover { color:red;padding:0px; } a { padding:0px; } #firma {font-size:250%;background-color:black;color:white;margin: 0px 10px; } Thank you. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 24, 2013 Share Posted June 24, 2013 What unwanted background? all i see is a border, which crappy IE thinks everyone wants by default, but to stupid to realise that they actually don't. Link to comment Share on other sites More sharing options...
coco243 Posted June 24, 2013 Author Share Posted June 24, 2013 yes, to this border I speak about, it appears just in IE, and I don't want it, how I loose it? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 24, 2013 Share Posted June 24, 2013 border: none; applied to img img {border:none;} Link to comment Share on other sites More sharing options...
coco243 Posted June 25, 2013 Author Share Posted June 25, 2013 what difficult it wasit workedmany thanks ( but the image looks very nasty and I wandering why ) Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now