darkofman Posted October 20, 2014 Share Posted October 20, 2014 Hi, this time Ive made my nav tabs using li and ul tags instead of the table (dsonesuk advice) <!doctype html><html><head><meta charset="utf-8"><link href="style.css" rel="stylesheet" ><title>test company website</title></head><body><div id="menu" ><form class="search"><input type="text" id="writehere"><input type="submit" id="submit" ></form><!-- nav !--><ul class="nav"><li><a href="#home">Home</a></li><li><a href="#OurProducts">Our Products</a></li><li><a href="#OurCompany">Our Company</a></li><li><a href="#ContactUs">Contact Us </a></li></ul></div></body></html> and here is the css I made for it .search { float:right;}.nav ,a ,li { display: inline; text-decoration: none; color: black; text-align:center; vertical-align: middle; }a{ height:40px;}a:hover{ background-color: #6AA2F8; color: white; } the problem is that I cant resize the tabs, I tried height/min-height on <a> , but no result, I tried the same on <li> , still no result , tried it on them both at the same time and still no result, tried it on mother class, still no result I used padding and it gave results, but the problem with padding is each nav get a different size, while I need them to be the same size,I can cheat by making some spaces in textes to make their size the same or giving each <a> an id , but I want to learn the real way Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2014 Share Posted October 20, 2014 inline elements can't have a height. You can give a height to inline-blocks and blocks. Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2014 Share Posted October 20, 2014 Unordered list for menu should be styled to .nav ul, .nav li {margin: 0; padding: 0; list-style-type: none; text-indent: 0;} to make it same in all browsers. Link to comment Share on other sites More sharing options...
darkofman Posted October 20, 2014 Author Share Posted October 20, 2014 Ok , I have switched it to block and fellowed dsonesuk looks like this now , also found a tuto il w3school, if someone has the same problem check here http://www.w3schools.com/css/css_navbar.asp .search { float:right;}.nav{ list-style-type: none; margin: 0; padding: 0; overflow: hidden;}li{ float:left;}a:link, a:visited { display: block; width: 120px; height:30px; text-align: center; horizontal-align:middle; vertical-align: middle; text-decoration:none; color:black; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif}a:hover, a:active { background-color:#5AB9FF; color:white; } Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2014 Share Posted October 20, 2014 you need to target ALL ul and li .nav, .nav ul, .nav li {margin: 0; padding: 0; list-style-type: none; text-indent: 0;} this .nav{ list-style-type: none; margin: 0;padding: 0;overflow: hidden;} Will only affect the ul with class 'nav' other submenu ul, li will still show bullets, and have default margins, padding AND text-indent which are different in every browser, that is why you use this to set it the same in all browsers and then style it from this point. The tutorial does not take into account of the inconsistencies between all the different browsers. Link to comment Share on other sites More sharing options...
darkofman Posted October 20, 2014 Author Share Posted October 20, 2014 ahaa ,ill do it , thank you sense :3 Link to comment Share on other sites More sharing options...
darkofman Posted October 20, 2014 Author Share Posted October 20, 2014 (edited) uh when I did it , the nav bar has dissapeared, then I deleted the positioning css and it appeared again, it seemes it has a limit now where I can move it down Edited October 20, 2014 by darkofman Link to comment Share on other sites More sharing options...
dsonesuk Posted October 20, 2014 Share Posted October 20, 2014 Like i have already said positioning causes more problems, than benefit when used. #menu {background-color: #9ff;} /* just to see area of menu*/ .search { float:right; line-height: 30px; /* vertically align by matching height of element (30px)*/ } .nav, .nav ul, .nav li {margin: 0; padding: 0; list-style-type: none; text-indent: 0;} .nav { overflow: hidden; } .nav li{ float:left; } /*a:link, a:visited will target all anchor elements in page*/ .nav a, .nav a:link, .nav a:visited { display: block; width: 120px; height:30px; text-align: center; /*horizontal-align:middle; no such declaration */ /*vertical-align: middle; only works for tables, elements using display: table-cell;*/ line-height: 30px; /* vertically align by matching height of element (30px)*/ text-decoration:none; color:black; font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif } .nav a:hover, .nav a:active { background-color:#5AB9FF; color:white; } 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