Jump to content
libraryatnight

Text aligning under, not beside other element

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by niche

Share this post


Link to post
Share on other sites

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; } 

Share this post


Link to post
Share on other sites

How bout the html too.

Share this post


Link to post
Share on other sites

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> 

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...