mehrere gleichnamige klassen in verschiedenen divs?

[otti_mania]

Mein Problem ist etwas schwerer zu erklären aber ich versuche es mal:
Ich hab eine HTML Tabelle einen Hader linke Navi rechte Navi einen Content und einen Footer.
also ich gehe hin und definiere jeden bereich über einen div.
mein problem ist nun das ich zB ein Pannel von links Navi nach rechts Navi verschieben möchte und es dann automatisch das aussehen des in dem anderem Div/CSS gesetztem Designs bekommen soll
 
Mein gedanke war:
ich gebe ihm zB die Klasse pannel und mache dann im css 2 klassen pannel
geht das so?
links.pannel
rechts.pannel
oder ist das quatsch?
dann kommt ja ein weiteres Problem hinzu.
td.pannel.links wird wohl nicht funktionieren oder?

mein problem ist nun das ich zB ein Pannel von links Navi nach rechts Navi verschieben möchte und es dann automatisch das aussehen des in dem anderem Div/CSS gesetztem Designs bekommen soll[/quote]
http://www.google.de/search?hl=de&q=CSS+Selektoren\" rel=\"external nofollow\">CSS Selektoren

[mahe]

hmmm, ich würds so versuchen:
linkes div hat die id left
das rechte die id right
in der CSS dann:
 

#left .panel {
   ...
}
#right .panel {
   ...
}

[otti_mania]

Danke mahe,
sowas hatten wir auch schon dirskotiert ^^ waren uns aber nicht sicher ob es funzt.
werde das mal versuchen und berichten wie es lief.

[otti_mania]

schau dir bitte mal das hier an mahe
 

#kopf .body {
  background: #FFFFFF;
  background-image: url(http://www.ottimania.de/bg_kachel.jpg);
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 12px;
}
#kopf .table { border: 0px; font-size: 12px; }
#kopf table.content { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#kopf table.head    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#kopf table.info    { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; }
#kopf table.panel   { border-width: 0px; margin-bottom: 5px; padding: 0px; background-color: #000; width: 150px; align: center ; }
#kopf table.panel th {
font-size: 10px;
}
#kopf .th { font-size: 13px; }
#kopf .td { font-size: 13px; }
#kopf .p { font-size: 13px; }
#kopf td.head {
  background-image: url(http://www.ottimania.de/td_head.gif);
  width:100%;
  background-color: #C0C0C0;
  color: #000000;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
}
#kopf th.head {
  background-image: url(http://www.ottimania.de/th_head.jpg); width: 100%;
  background-color: #C0C0C0;
  color: #F0F0F0;
  text-align: left;
  font-weight: bold;
  font-size: 12px;
  padding-left: 10px;
}
#kopf th.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#kopf td.info {
  background-color: #C0C0C0;
  color: #000000;
  font-style: italic;
  font-size : 10px;
}
#kopf th.header { background-color: #D0D0D0; }
#kopf td.header { background-color: #D0D0D0; }
#kopf td.center { background-color: #D0D0D0; }
#kopf td.top { background-color: #D0D0D0; }
#kopf td.bottom { background-color: #D0D0D0; }
#kopf td.left { background-color: #C0C0C0; }
#kopf td.even { background-color: #E0E0E0; }
#kopf td.right { background-color: #F0F0F0; }
#kopf td.odd { background-color: #F0F0F0; }
#kopf table.quote { border: 0px; }
#kopf td.quote {
  font-style: italic;
  border: 1px dashed #0000C0;
  background-color: #D0D0D0;
  padding: 3px;
}
#kopf a:link    { text-decoration: underline; color: #000000; }
#kopf a:visited { text-decoration: underline; color: #202020; }
#kopf a:active  { text-decoration: underline; color: #0C6FC2; }
#kopf a:hover   { text-decoration: underline overline; color: #000080; cursor: pointer; }
#kopf .input       { border-color: #202020; background-color: #E0E0E0; color: #000; }
#kopf input.send  { border-color: #F0F0F0; background-color: #C0C0C0; color: #000; }
#kopf .select      { background-color: #F0F0F0; border-color: #808080; font-family: arial; color: #000; }
#kopf .textarea    { background-color: #E0E0E0; border-color: #202020; font-family: arial; color: #000; font-size: 12px; }
#kopf .fieldset    { border: 1px solid #000; background-color: #E0E0E0; padding: 5px; font-size: 12px; }
#kopf .legend      { 
  border: 1px solid #000;
  background-color: #E0E0E0;
  font-size: 13px;
  font-weight: bold;
  padding: 4px;
  margin-top: 5px;
  margin-bottom: 5px;
}
#kopf .img   { border:0px; }
#kopf div.menu {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#kopf div.content {
border:1px;
border-style:dashed;
margin:5px;
padding:2px;
background-color:#F0E9CE;
}
#kopf .form { display:inline; }
#kopf td.pleft,td.pright {
   width: 150px;
   vertical-align: top;
   margin: 0px;
   padding: 10px 0px;
}
#kopf td.pcontent {
   vertical-align: top;
   text-align: center;
   margin: 0px;
   padding: 8px;
}
#kopf th.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none; color: #ffffff;
}
#kopf td.navigation {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none; color: #ffffff;
}
#kopf td.navigation a:link { text-decoration: none; color: #ffffff; }
#kopf td.navigation a:visited {text-decoration: none; color: #ffffff; }
#kopf td.navigation a:active { text-decoration: none; color: #ffffff; }
#kopf td.navigation a:hover { text-decoration: underline; color: #ffffff; }

 
 
kannst du irgendwelche fehler erkennen?
und jetzt müsste ich nurnoch hingehen und kopf ect mit den anderen in den divs hinterlegten ID Namen anlegen und dann müsste es gehen wenn du keine fehler findest oder?

[otti_mania]

das scheint überhaupt nicht zu funktionieren
der div ist klar in dem stehr id=\"kopf\"
@ statler
das mit den Selectoren verstehe ich nicht hab mir dazu volgendes durchgelesen:
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html\" rel=\"external nofollow\">http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512/kap05.html
aber ich raffe es einfach nicht!
wenn ich die ID im Div setze ist sie doch eigentlich eindeutig und würde doch als Selector dienen! oder verstehe ich da irgendwo was falsch.
 

[otti_mania]

hab da etwas komisches entdeckt!
Kann es sein das innerhalb des ID divs HTML Design elemente (zB align=\"center\") die ID ausser kraft setzen?
beispiel:
so funktionierts

 
 
und so nicht
 

 
 
oder ligt das an etwas anderem?