CODEWITHSUNDEEP
htmlcssstylesheet
Spike Lee
Spike Lee

Reputation: 411

css align table

i'm new to html and i'm having problems moving the table down the page. http://tinypic.com/view.php?pic=eqdpjb&s=7 . I tried setting the 'margin-top: 400;' which works however the navigation bar at the top (i created in dreamweaver using the navigation 'wizard') moves as well to the bottom of the page!. How can i fix this? i want to move only the table without affecting the navigation bar been driving me nuts!

css

table{
    background: whitesmoke;
    border-collapse: collapse;
    margin-right: auto;
    margin-bottom: 0;
    margin-left: auto;
}

Upvotes: 0

Views: 141

Answers (5)

user912083
user912083

Reputation:

Make sure the table and the navigation bar are in two separate tags, which are both in a third div.

By using margin-top on the div with the table, you will force that entire div down from the top of that third container div. Make sure to get rid of the margin-top stuff in the table css declaration.

Eg. Navigation code here. Table here

Upvotes: 0

user466764
user466764

Reputation: 1176

Longer term, I advise you to learn to hand code using an ide such as netbeans or a simple editor such as notepad++. Using dreamweaver is all very well but unless you understand how the code works you will always encounter similar frustrations. A great resource to learn html and css is w3schools www.w3schools.com

A very good book on css is css the missing manual (o'reilly)

You may find all this slower in the beginning but you will end up writing cleaner and faster code as a result.

Upvotes: 0

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

Your problem is that your navigation is positioned relatively to your table so when you add a margin also the navigation gets the margin.

The solution would be to add a minus margin to your navigation, as shown here:

#navigationId {
    margin-top: -400px;
}

Upvotes: 1

Akos
Akos

Reputation: 2007

Try this:

 table {
 background: whitesmoke;
 border-collapse: collapse;
 margin-right: auto;
 vertical-align: bottom;
 margin-left: auto;
 }

Hope it works for you! :)

Upvotes: 0

Kokos
Kokos

Reputation: 9121

If you are adding margin-top: 400px; to table and it also moves the navigation, then that either means the navigation is also a table or the navigation is within the table.

If the navigation is also a table you will have to give the bottom table a unique id and then add the margin to that id only.

If the navigation is within the table, put it in its own div.

If it's none of the above you will have to post some HTML.

Upvotes: 0

Related Questions