Sun, 2013-08-04 21:36
Here is my markup and styling. This is just for testing and learning how float works.
If I run this code in a browser my horizontel navigation is not within the red background.
So what I don't understand is that a solution to get my horizontel navigation within the red background is to add this style to float:left; to #nav a declaration so I get this complete styling for #nav a
#nav a { float:left; margin:0; padding:40px 40px; color:#333; text-decoration:none; border:1px solid #9B8748; border-bottom:none; background:blue; background:#F9E9A9; }
Can somebody why that is a solution.
<!DOCTYPE html> <html> <head> <style type="text/css"> body { font-family:Arial, sans-serif; font-size:small; width:720px; margin:0; padding:0; } #nav { float:left; width:100%; margin:0; padding:10px 0 0 46px; list-style:none; background:red; } #nav li { float:left; margin:0 8px 0 0; padding:0; font-family:"Lucida Grande", "sans-serif"; font-size:80%; } #nav a { /* float:left;*/ margin:0; padding:40px 40px; color:#333; text-decoration:none; border:1px solid #9B8748; border-bottom:none; background:blue; background:#F9E9A9; } #nav a:hover { color:#333; padding-bottom:5px; border-color:#727377; background:#fff; } </style> <meta charset="utf-8" /> <title>Chapter 3</title> </head> <body> <ul id="nav"> <li id="t-intro"><a href="/">Introduction</a></li> <li id="t-about"><a href="about.html">About Lance</a></li> <li id="t-news"><a href="news.html">News & Events</a></li> <li id="t-sponsors"><a href="sponsors.html">Sponsors</a></li> </ul> </body> </html>
//Tony
Mon, 2013-08-05 01:23
#1
List-items usually display
List-items usually display each on a separate line, vertically.
Adding float: left or changing the display value to inline or inline-block will cause them to display across the page, horizontally.
Mon, 2013-08-05 11:55
#2
why do I need the float : left in #nav a
Can you explain why I need the float:left do keep my tab within the red
background ?
//Tony
Mon, 2013-08-05 14:15
#3
