veritas762 Posted January 5, 2013 Share Posted January 5, 2013 I am wondering if you guys could help me with a little something. I'm very new to the coding area of everything and I was wondering how to get the nav bar on top of the website. img{position:left,top;}body { background-color:#333333; }<!--#navbar ul { float:center; margin:1; padding: 5px; list-style-type: none; text-align: center; background-color:purple; } #navbar ul li { height:50px; float:center; display:inline; } #navbar ul li a { float:center; text-decoration: none; padding: .2em 1em; color: #fff; background-color: #000; } #navbar ul li a:hover { float:center; color: #000; background-color: #fff; } --> This is the style code for what I am working on. I'm trying to find out if there is a way to get the nav bar to push to the top of the page, sorta like invision board has with the profile bar. Link to comment Share on other sites More sharing options...
Labtec Posted January 5, 2013 Share Posted January 5, 2013 Can you post the HTML which goes with it please? There are some errors such as float: center which isn't correct. If you post the HTML i'd be more than happy to sort it out for you. Regards, Lab. Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 <!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><link rel="stylesheet" href="sample.css" type="text/css" /></head><body><div id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul></div></body></html> Here you go. Constructive criticism is welcome as I am VERY new to this but please be nice Link to comment Share on other sites More sharing options...
scout1idf Posted January 5, 2013 Share Posted January 5, 2013 I cleaned up your code a bit and made a few additions. I hope this is what you were after...... html, body{ margin:0; padding:0;}img{ position:left,top;}body{ background-color:#333333;}#navbar ul { margin:1px; padding: 5px; list-style-type: none; text-align: center; background-color:purple;}#navbar ul li { height:50px; display:inline;}#navbar ul li a { text-decoration: none; padding: .2em 1em; color: #fff; background-color: #000;}#navbar ul li a:hover { color: #000; background-color: #fff;} <!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><link rel="stylesheet" href="sample.css" type="text/css" /></head><body> <div id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> </div></body></html> Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 Yes that was exactly what I was going for may you tell me what you edited that did that? I have been sitting here trying to figure that out and poof! you just did it Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 Also is there a way that i can get the link buttons to the right while leaving the whole bar stretch across the top? I would like to try and get a logo inside the nav bar. I just tried the float option but i think im doing it wrong. Link to comment Share on other sites More sharing options...
Labtec Posted January 5, 2013 Share Posted January 5, 2013 He took out your float: center declarations. Also on the html,body element, he took off the margin and padding. Either html or body has a slight margin by default. Kind regards, LC. Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 How do i get the buttons that are the link to go to the right? I want to put a logo on the left and put the link button for the pages while leaving the bar to stretch from side to side and leave it pushed on top. Link to comment Share on other sites More sharing options...
Labtec Posted January 5, 2013 Share Posted January 5, 2013 You can float your image left and then set your UL to display text to the right: html, body{ margin:0; padding:0;}img{ position:left,top;}body{ background-color:#333333;}#navbar{ background-color: purple;}#logo{ float: left;}#navbar ul { margin:1px; padding: 5px; list-style-type: none; text-align: right;}#navbar ul li { height:50px; display:inline;}#navbar ul li a { text-decoration: none; padding: .2em 1em; color: #fff; background-color: #000;}#navbar ul li a:hover { color: #000; background-color: #fff;} HTML: <div id="navbar"> <img src="yourlogo.png" alt="Logo" id="logo" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> <li><a href="#">...</a></li> </ul> </div> Hope this helps. Regards, Lab. Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 Thank very much! I appreciate the help for a beginner like me. Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 Sorry for all the questions. Is there a way to increase the size of the link buttons? I have tried already and i feel stupid Link to comment Share on other sites More sharing options...
Labtec Posted January 5, 2013 Share Posted January 5, 2013 (edited) Yes you can edit the padding values on the anchors (<a>): #navbar ul li a { text-decoration: none; padding: 1em 2em; color: #fff; background-color: #000;} Try these values and see what you think. Regards, Lab. Edited January 5, 2013 by Labtec Link to comment Share on other sites More sharing options...
veritas762 Posted January 5, 2013 Author Share Posted January 5, 2013 Yes you can edit the padding values on the anchors (<a>):#navbar ul li a { text-decoration: none; padding: 1em 2em; color: #fff; background-color: #000;} Try these values and see what you think. Regards, Lab. Thanks that worked. Where would I edit the text size? Link to comment Share on other sites More sharing options...
Labtec Posted January 5, 2013 Share Posted January 5, 2013 (edited) You can do it in the exact same place. #navbar ul li a { text-decoration: none; padding: 1em 2em; font-size: 16pt; /*for example*/ color: #fff; background-color: #000;} Regards, Lab. Edited January 5, 2013 by Labtec Link to comment Share on other sites More sharing options...
veritas762 Posted January 6, 2013 Author Share Posted January 6, 2013 Thanks. I will give you guys a preview of the site when i get done 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