Search the Community
Showing results for tags 'wrap'.
-
Hi, I have created (or better, my intention was to create) a simple navbar by using W3.CSS framework as follows (see photo and code): 1/12 2/12 2/12 2/12 2/12 1/12 1/12 1/12 | MENU | Message || Username | Password | reCAPTCHA | Login || Register | Language | - I would like the height of the navbar to be self-adjusted; when I remove the "height: 55.5px" from, or set "height: inherit/auto" into, <div id="login"> the navbar's height takes the value of 2px and the buttons remain on the air! * What am I doing wrong? * How can I make the highest height of existing elements to inherit its value to the navbar's height? * Does "g-recaptcha" element play any role? I would like the navbar to behave responsively as follows: 2/12 2/12 4/12 4/12 or 3/12 3/12 3/12 3/12 | MENU | Message || Username | Password | | Username | Password | reCAPTCHA | Login | | Register | Language || reCAPTCHA | Login | | Register | Language | | MENU | and finally: 6/12 6/12 | Login | Register | | Menu | Language | How can I make the navbar to get wrapped and elements appear in a second row, by using only existing W3.CSS elements? Please, just give hints and advices. Thanks in advance. login_bar.html
- 6 replies
-
- navbar
- self-adjusted
-
(and 2 more)
Tagged with:
-
Hi! I have a problem with wrapping the zeroes within the 'content' div although i am using the 'white-space' property with a 'pre-line' value . I don't know where I went wrong. Help please. >_< .content{background-color:green;width:750px;height:510;padding-left:5px;padding-right:5px;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;white-space:pre-line;color:black;} <div class="content">CONTENT0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</div> Here is the code for the whole page. <html><head><style type="text/css">a:link {text-decoration:none; color:white; } /* unvisited link */a:visited {text-decoration:none; color:white;} /* visited link */a:hover {text-decoration:underline;color:grey;} /* mouse over link */a:active {text-decoration:underline;color:black;} /* selected link */body{font-family:arial;color:white;}.container{background-color:#191919;font-family:arial;width:1000px;height:1000px;margin-left: auto ;margin-right: auto ;}.logo{background-color:grey;width:190px;padding-top:85;padding-bottom:85px;text-align:center;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;}.banner{background-color:green;width:760px;height:190px;margin-left:10px;margin-top:10px;float:left;border:5px solid gold;}.sidebar{background-color:green;width:100px;height:500;padding:45px;text-align:center;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;}.menu{background-color:red;width:760;padding-top:5;padding-bottom:5;margin-left:10px;margin-top:10px;float:left;border:5px solid gold;}.content{background-color:green;width:750px;height:510;padding-left:5px;padding-right:5px;border:5px solid gold;margin-left:10px;margin-top:10px;float:left;white-space:pre-line;color:black;}ul.online{ word-spacing:100px;list-style-type:none;}li.inline{display:inline; }</style></head><body><div class="container"><div class ="logo">LOGO</div><div class="banner">BANNER</div><div class="sidebar">SIDEBAR</div><div class="menu"> <center><ul class="online"> <li class="inline"><a href="">Home</a></li> <li class="inline"><a href="">Log-In</a></li> </ul></center></div><div class="content">CONTENT0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</div></div></body></html>