Div Layout: Navigation & Columns Options

[ShizukaHio]

I've got 2 questions.

1. How do you do the navigation code to where its lined up one under the other and you can change the colors for the navigation background and letters and change the writing to the type and size you want?

2. How do you put more than one columns in the div layout?

[Mickey]

If you're doing a navigation code vertically, create a class with a block display like this:

CODE

<style>
.navlinks {display:block;}
</style>

Then use that class for all the links you want to display vertically like this:

CODE

<a href="URL" class="navlinks">LINK</a>
<a href="URL" class="navlinks">LINK</a>
<a href="URL" class="navlinks">LINK</a>
<a href="URL" class="navlinks">LINK</a>
<a href="URL" class="navlinks">LINK</a>

If you want to put more than one column in a DIV, I suggest just adding another DIV on your page using a code like this:

CODE

<div style="position:absolute; left:50%; margin-left:-400px; top:250px; height:800px; width:300px;">
CONTENT
</div>

Just adjust the margin-left and top property values to position the DIV where you want it to be. Adjust the height and width to fix its size.

[ShizukaHio]

Okay thank you so much that helps alot. If I want to have a border and different background color for the columns, how do I do that?

[Mickey]

On this bit:

CODE

<div style="position:absolute; left:50%; margin-left:-400px; top:250px; height:800px; width:300px;">

Add border and background properties so it looks like this:

CODE

<div style="position:absolute; left:50%; margin-left:-400px; top:250px; height:800px; width:300px; border:1px solid; border-color:000000; background-color:ffffff;">

Then just edit them according to the style you want.

[ShizukaHio]

Okay I thought that would be the end of my questions and I'm really hoping this is the very last thing now but how do you do a border for the headings and background, I'm sure its similar to the above code for the columns but what else am I missing to do it for the headers?

[Mickey]

For headings, you'd have to create a class like this:

CODE

<style>
.header {border:1px solid; border-color:black; background-color:white;}
</style>

Then use that class for whenever you want to style up a header like this:

CODE

<h1 class="header">Header</h1>

Just play around with the properties to get your desired look.

[ShizukaHio]

Okay well I think I got it, thank you but I'm not as sure yet. I can't seem to fix something else but I'm not sure it might just be my computer.

[Mickey]

Alright, well I'm gonna go ahead and close this. PM me if you need it reopened. Topic closed & moved.