mehrere gleichnamige klassen in verschiedenen divs?

CSS Forum und Frameworks wie BootStrap oder MaterializeCSS
Antworten
otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

mehrere gleichnamige klassen in verschiedenen divs?

Beitrag von otti_mania » 20. Juli 2007, 09:00

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?
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

mahe
Administrator
Beiträge: 5287
Registriert: 16. August 2002, 18:54
Wohnort: Wien
Kontaktdaten:

mehrere gleichnamige klassen in verschiedenen divs?

Beitrag von mahe » 20. Juli 2007, 16:57

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

in der CSS dann:

Code: Alles auswählen

#left .panel {
    ...
}
#right .panel {
    ...
}
Bild
Ja, diese Signatur dient zur Werbung!
Und dass ich meine Posts wiederfinde ...

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

mehrere gleichnamige klassen in verschiedenen divs?

Beitrag von otti_mania » 21. Juli 2007, 03:14

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.
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

mehrere gleichnamige klassen in verschiedenen divs?

Beitrag von otti_mania » 21. Juli 2007, 04:26

schau dir bitte mal das hier an mahe

Code: Alles auswählen

#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?
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

mehrere gleichnamige klassen in verschiedenen divs?

Beitrag von otti_mania » 21. Juli 2007, 06:35

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-C ... 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.

Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

otti_mania
Beiträge: 424
Registriert: 5. November 2004, 11:08
Kontaktdaten:

mehrere gleichnamige klassen in verschiedenen divs?

Beitrag von otti_mania » 21. Juli 2007, 09:28

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?
Gruß Otti

#########WICHTIG###########
if (IQ > Raum - °C) echo $post
else exit ();
##########################

[img]http://www.ottimania.de/banner1.gif[/img]

Antworten