Css Help

[15DAVE15]

K, now, l am new to CSS and l am making a page just to test some of my skills with HTML and CSS, l would like a menu on the left hand side of the page, with Home, etc. Is there any CSS coding l could use for this, or don't they making CSS for this situation???

[BillysProgrammer]

With CSS, you can make almos anything :P

Basically, if you want the navigation bar on the left to be beside the content (on the right), you would set a width for both, float the nav bar to the left, and content to the right.

Example:

/* CSS Structure Code */
#container { margin: 0px auto; width: 1000px; } /* margin: 0px auto; to align the div to the center of the page */
#nav_sidebar { float: left; width: 250px; }
#nav_sidebar ul { list-style: none; }
#content_main { float: right; width: 750px; }

/* (X)HTML */
<div id="container">
  <div id="nav_sidebar">
    <ul>
      <li><a href="">Home</a></li>
    </ul>
  </div>
  <div id="content">
    <h2>This is a test</h2>
    <p>Hey, it works!</p>
  </div>
</div>

[smulse]

If you're going to tell someone about floats, please tell them about clear too.

When you float elements, the container those elements are in will lose height.

Here's an example:

#container {  }
#foo { float: left;  }
#bar { float: right;  }

<div id="container">
  <div id="foo"></div>
  <div id="bar"></div>
</div>

In the above code, the #container won't take into account the heights of #foo or #bar, which is a problem if you wanted to sit any content below these, or a footer, etc.

So, to stop this element losing height we do:

#container {  }
#foo { float: left;  }
#bar { float: right;  }
.clear { clear: both; }

<div id="container">
  <div id="foo"></div>
  <div id="bar"></div>
<div class="clear"></div>
</div>

There are many ways to clear floats, this is an inefficient way of doing so, but it's also the simplest and easiest to understand without going into any CSS hacks or getting too complicated for a beginner.

[15DAVE15]

l was trying to change all of that into HTML and thought that maybe l had jumped a bit far into this stuff. So l am going to go back to the start where l should only need HTML, say l am wanting to make a sidebar with buttons to different pages of the website on it, how would l do this, build it as one whole thing or split it up, (sidebar, button1, button2, etc)... ???

[psicodemon]

Well you can do it with tables or frames to................................... but if you done that and read + understand how to do it in css your going to knock yourself for ever doing it in frames or tables.

but frames is pretty easy to create a side bar, just google for HTML frames, not sure if you understand how it works with 2 websites ( you make 2 html pages one with the navigation and one with the text )

Tables could be done to by creating like one big table that holds 3 horizontal rows, and then add another table to the left one with your menu (so table in a table ) ... It all gets really messy but there are tutorials for it, maybe give it a try and if you get positioning with html you can start css, since css does it faster / better.

good luck

[BillysProgrammer]

At 6/17/09 10:32 AM, smulse wrote: post

I guess your right, but the one thing that a lot of other people do is add extra semantic markup. You don't really need to add a extra div to clear when you can place the footer outside the container and have the clearing on that; Although, sometimes you do need it and it is easier to do.

[smulse]

At 6/18/09 04:02 AM, 15DAVE15 wrote: l was trying to change all of that into HTML and thought that maybe l had jumped a bit far into this stuff. So l am going to go back to the start where l should only need HTML

HTML is used to describe what is on the page, and CSS is used to style and present it. It's not you pick one or the other, you use them both, together, to make a website.

At 6/18/09 08:38 AM, BillysProgrammer wrote: I guess your right, but the one thing that a lot of other people do is add extra semantic markup. You don't really need to add a extra div to clear when you can place the footer outside the container and have the clearing on that; Although, sometimes you do need it and it is easier to do.

Yeah, like I said in my post its an inefficient way of doing it, but it's also the easiest. A lot of times you can be floating things inside, it's not always the main columns of a page you're floating so there's not always a footer to use to clear them.

Either way it's still an important thing to mention when you're telling people about floats, even if you say that the method of clearing you're using isn't the most efficient.

[scratchisthebest]

Try:
#foo { float: left; clear: both; }
#bar { float: right; clear:both; }
I'm not very good at css, so just an idea.

[urbn]

At 6/26/09 05:40 PM, scratchisthebest wrote: I'm not very good at css, so just an idea.

Why are you posting then? Especially when the answer has already been given...

[Wonderful]

At 6/26/09 05:40 PM, scratchisthebest wrote: Try:
#foo { float: left; clear: both; }
#bar { float: right; clear:both; }
I'm not very good at css, so just an idea.

This is exactly how you don't do it. Clearing #foo and #bar will make it so nothing can float next to it.