table-less e lista

[luca7]

sto provando a costruire una pagina table-less e ho impostato un div che fa da header e due sotto tipo colonne

ho trovato questa lista su listamatic (http://css.maxdesign.com.au/listamatic/horizontal15.htm )e apparte i colori che poi modificherò, non riesco a capire come posso fare a mettere la lista in basso del div header e non in alto

la pagina è questa

[herrel]

posta la parte del css relativa al div!

[luca7]

body {
  background-color: #CCCCCC;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

table, tr, td {
  table-layout: fixed;
}

div#main {
  width: 750px;
  height: 750px;
  background-color: #000000;
}

#header {
  width: 750px;
  height: 100px;
  background-color: #FF0000;
}

#left {
  width: 120px;
  height: 650px;
  background-color: #00FF00;
  float: left;
}

#right {
  width: 630px;
  height: 650px;
  background-color: #0000FF;
  float: right;
}

#navcontainer
{
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana;
}

#navlist
{
list-style: none outside none;
margin: 0;
padding: 0;
}

@media all {
#navlist {
text-align: center
}
}

#navlist li
{
bottom: 11px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

html>body #navlist li
{
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited
{
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover
{
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

#navlist a:active
{
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active
{
background: #369;
bottom: 13px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}

html>body #navlist li#active
{
background: #000;
margin: 0 4px 0 4px;
}

#navlist #active a, #navlist #active a:link, #navlist #active
 a:visited, #navlist #active a:hover
{
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

[herrel]

ho dato una occhiata ed ho corretto qualcosa...dipendeva da un margin a 0px che ho messo a 15 e da un paio di bottom che facevano alzare i tasti....sai qualcosa di css? se si dovresti capire...altrimenti chiedimi pure...

body {
  background-color: #CCCCCC;
  margin: 0;
  padding: 0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

table, tr, td {
  table-layout: fixed;
}

div#main {
  width: 750px;
  height: 750px;
  background-color: #000000;
}

#header {
  width: 750px;
  height: 100px;
  background-color: #FF0000;
}

#left {
  width: 120px;
  height: 650px;
  background-color: #00FF00;
  float: left;
}

#right {
  width: 630px;
  height: 650px;
  background-color: #0000FF;
  float: right;
}

#navcontainer
{
background: #369;
border-top: 1px solid #9CC;
font: normal normal 11px Verdana;
}

#navlist
{
list-style: none outside none;
margin: 15;
padding: 0;
}

@media all {
#navlist {
text-align: center
}
}

#navlist li
{
bottom: 5px;
display: inline;
line-height: 1.2em;
margin: 0;
padding: 0;
position: relative;
}

body #navlist li
{
background: #000;
margin: 0 3px 0 0;
padding: 4px 0px 4px 0;
}

#navlist a, #navlist a:link, #navlist a:visited
{
background: #900;
border: 1px solid #FFF;
bottom: 2px;
color: #FFF;
cursor: pointer;
display: inline;
height: 1em;
margin: 0;
padding: 3px 5px 3px 5px;
position: relative;
right: 2px;
text-decoration: none;
}

#navlist a:hover
{
background: #C00;
bottom: 1px;
color: #FFF;
position: relative;
right: 1px;
}

#navlist a:active
{
background: #999;
bottom: 0px;
color: #FFF;
position: relative;
right: 0px;
}

#navlist li#active
{
background: #369;
bottom: 5px;
display: inline;
margin: 0 3px 0 0;
padding: 0;
position: relative;
}

html>body #navlist li#active
{
background: #000;
margin: 0 4px 0 4px;
}

#navlist #active a, #navlist #active a:link, #navlist #active
 a:visited, #navlist #active a:hover
{
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

[luca7]

sì sono una via di mezzo tra un newbbie e uno che ci capisce!
ora funziona, grazie

[herrel]

Originariamente inviato da luca7
sì sono una via di mezzo tra un newbbie e uno che ci capisce!
ora funziona, grazie

non volevo sfottere!! era per sapere se dovevo spiegarti le modifiche

[luca7]

perdonami ma c'è stato un malinteso, io non ho mai pensato che mi volessi sfottere, forse hai interpretato male la mia frase, sono davvero quello che ho detto di essere ma non volevo darti contro!

rinnovo i miei ringraziamenti

[herrel]

html>body #navlist li#active <----togli html>
{
background: #000;
margin: 0 4px 0 4px;
}

#navlist #active a, #navlist #active a:link, #navlist #active
a:visited, #navlist #active a:hover
{
background: #369;
border-bottom: none;
border-left: 1px solid #9CC;
border-right: 1px solid #9CC;
border-top: 1px solid #9CC;
bottom: 0;
color: #FFF;
cursor: text;
margin: 0;
padding: 2px 5px 0 5px;
position: relative;
right: 0;
}

scusa ma ho notato un errore...

[luca7]

si lo avevo tolto mentre modificavo dimensioni e colore