libraryatnight Posted September 30, 2012 Share Posted September 30, 2012 Hi there, I'm a total CSS newbie, and to experiment and learn I've been working on a cheesy/fun site for me and my girlfriend. Anyway, I've been using the W3Schools CSS reference, and I have been trying to make a vertical navigation bar/list. That's going ok, but I want the bar on the left and the text of each page to the right of that bar. The content text is to the right ( i set it to be more pixels from the left than the nav bar) but it also is below the navigation bar text, so as I add to the nav bar the content text will gradually move down. I tried the "float" option, but it moves it all the way to the right, cramming it into my border. How can I make it so the two items exist side by side and not before/after each other? my test site is loveyouthemost.com if you'd like to see what I mean. I considered I may need another div, but I also read a bit that a lot of people go div crazy and that's not necessary. Sorry if this is an obvious thing I'm just not understanding. I'm also not really certain if i've coded the page layout in the best way, but it is so far looking like how I hoped. Link to comment Share on other sites More sharing options...
niche Posted September 30, 2012 Share Posted September 30, 2012 (edited) Withou your code you may be talking about the difference between inline and block: http://www.w3schools...ass_display.asp If still needed, please post your code using the code tags. Edited September 30, 2012 by niche Link to comment Share on other sites More sharing options...
libraryatnight Posted September 30, 2012 Author Share Posted September 30, 2012 I changed the display to inline but it seems to be doing the same thing. My CSS so far: body {background-color:#ffffff;text-align:center;} div.main { width:1024px;height:90%;border:0px;padding:0px;margin-left: auto;margin-right: auto;background-color:#ffffff;white-space:nowrap;outline-color:#000000;outline-style:dotted;} h1.title { font-family: 'Griffy', cursive;color:#00000;text-align:right;font-size:50px;position:relative;right:10px;white-space:nowrap;margin:0px;} h2.subtitle {color:#000000;font-size:14px;text-align:right;position:relative;right:15px;top:0px;white-space:nowrap;margin:0px;} ul.navigation { list-style-type:none;margin:5px;padding:0;text-align:left;} a.navigation { display:inline;width:150px;left:5px;} div.content { position:relative;left:225px;width:550px;border:0;padding:0;margin:5px; } Link to comment Share on other sites More sharing options...
niche Posted September 30, 2012 Share Posted September 30, 2012 How bout the html too. Link to comment Share on other sites More sharing options...
libraryatnight Posted October 1, 2012 Author Share Posted October 1, 2012 oops, sorry. <html><head><Title>I love you the most.</title><link rel="stylesheet" type="text/css" href="lovestyle.css" /><link href='http://fonts.googleapis.com/css?family=Griffy' rel='stylesheet' type='text/css'> </head><body><div class="main"><h1 class="title">I love you the most.</h1><h2 class="subtitle">A website for Mara & Jensen</h2> <ul class="navigation"> <li><a class="navigation" href="mfm.html">Music for Mara</a></li><li><a class="navigation" href="score.html">Score Board</a></li> </ul> <div class="content"><p>this is a test blah blah blah</p> </div> </div> </html> Link to comment Share on other sites More sharing options...
oknoorap Posted October 4, 2012 Share Posted October 4, 2012 Okay try this HTML: <html><head> <Title>I love you the most.</title> <link rel="stylesheet" type="text/css" href="lovestyle.css" /> <link href='http://fonts.googleapis.com/css?family=Griffy' rel='stylesheet' type='text/css' /></head> <body> <div class="main"> <h1 class="title">I love you the most.</h1> <h2 class="subtitle">A website for Mara & Jensen</h2> <ul class="navigation"> <li><a href="mfm.html">Music for Mara</a></li> <li><a href="score.html">Score Board</a></li> </ul> <div class="content"> <p>this is a test blah blah blah</p> </div> <div class="clear"></div> </div></html> CSS: body { background-color:#ffffff;} div.main { width: 1024px; border: none; margin: 0 auto; padding: 0; background-color:#ffffff; white-space:nowrap; outline-color:#000000; outline-style:dotted;} h1.title { font-family: 'Griffy', cursive; color:#00000; text-align:right; font-size:50px; position:relative; right:10px; white-space:nowrap; margin:0px;} h2.subtitle { color:#000000; font-size:14px; text-align:right; position:relative; right:15px; top:0px; white-space:nowrap; margin:0px;} ul.navigation { list-style-type:none; margin:5px; padding:0; text-align:left; float: left; width: 200px;} ul.navigation a { display: block;} div.content { width:550px; border:0; padding:0; margin:5px; float: left} .clear { clear: both;} Link to comment Share on other sites More sharing options...
libraryatnight Posted October 5, 2012 Author Share Posted October 5, 2012 (edited) Awesome! Thank you! That worked perfectly, you're amazing. Edited October 5, 2012 by libraryatnight 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