html - CSS doesnt show part of code -
im learning html & css , after few tutorials decided write webpage nothing. i've got problem. when add "display: inline" in css .nav, ignores .nav css properties, including "display: inline".
here's code:
html
<!doctype html> <html> <head> <link href="main.css" rel="stylesheet"> <title>neni okurka, nebudou caciky</title> </head> <body> <div class="nav"> <ul> <li class="active"><a href="#">navigation 1</a></li> <li><a href="#">navigation 2</a></li> <li><a href="#">navigation 3</a></li> <li><a href="#">navigation 4</a></li> <li><a href="#">navigation 5</a></li> </ul> </div> <div class="nav2"> <ul> <li class="active"><a href="#">navi 1</a></li> <li><a href="#">navi 2</a></li> <li><a href="#">navi 3</a></li> <li><a href="#">navi 4</a></li> <li><a href="#">navi 5</a></li> </ul> </div> </body> </html> css
body { background-image: url("background.png"); width: 1000px; margin-left: auto; margin-right: auto; border: 25px solid rgba(0, 0, 0, 0.3); } .nav { display: inline; width: 500px; background: #fff; }
if want background(image) need have in container give width , height because body "base" can give margin: 0; padding: 0; reset , can add background but not height , width. inside containeryou have created can play height , width like.
html, body { margin: 0; padding: 0; background-color: cadetblue; } .container { width: 1050px; height: 100vh; margin: 0 auto; position: relative; background-size: 100% 100%; background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center; } .nav { width: 1000px; height: 50px; margin: 0 auto; background: beige; border: 25px solid rgba(0, 0, 0, 0.3); } .nav ul { margin: 0; padding: 0; list-style-type: none; } .nav ul li { margin-left: 12px; } .nav ul li { float: left; font-size: 16px; font-weight: lighter; text-decoration: none; font-family: sans-serif; margin: 10px 0px 10px 0px; padding: 8px 15px 8px 15px; } .nav ul li a:hover { color: #fff; border-radius: 3px; background: cadetblue; }<div class="container"> <div class="wrapper"> <div class="nav"> <ul> <li class="active"><a href="#">navigation 1</a> </li> <li><a href="#">navigation 2</a> </li> <li><a href="#">navigation 3</a> </li> <li><a href="#">navigation 4</a> </li> <li><a href="#">navigation 5</a> </li> </ul> <ul> <li class="active"><a href="#">navi 1</a> </li> <li><a href="#">navi 2</a> </li> <li><a href="#">navi 3</a> </li> <li><a href="#">navi 4</a> </li> <li><a href="#">navi 5</a> </li> </ul> </div> </div> </div>this code without
display:inline;ordisplay :inline-block;works it's way align nabbar in nice way compatible browsers too.
i hope , helps you, let me know if have question.
Comments
Post a Comment