Jump to content
powie.de Tech Forum
Sign in to follow this  
otti_mania

mehrere gleichnamige klassen in verschiedenen divs?

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?

Share this post


Link to post
Share on other sites
Guest
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

CSS Selektoren

Share this post


Link to post
Share on other sites

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 {
   ...
}

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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?

Share this post


Link to post
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.


 

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
Guest
You are commenting as a guest. If you have an account, please sign in.
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.

Sign in to follow this  

×