Jump to content

mehrere gleichnamige klassen in verschiedenen divs?


otti_mania
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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


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.


 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...