h1 und p bei einzelnen containern definieren

[Gabi]

Hallo, ich stehe gerade auf dem Schlauch und finde nicht den passenden Hinweis im web.

wenn ich h1 im css-datei definieren will schreib ich sowas wie:

h1 {  
    color:red;  
    letter-spacing:30px;  
 }

was ist nun aber wenn ich h1 bei div1 anders als bei div2 haben will? wo pack ich da die gewünschste definition von der jeweiligen h1 hin?

#div1 {  
    border: 1px solid;  
h1: 1.7em;  
 }  
  
  
#div1 {  
    background-color: green;  
 }  
.h1 {font-weight: bold;}

[ChrisB]

Hi,

was ist nun aber wenn ich h1 bei div1 anders als bei div2 haben will?

Dann kannst du bspw. den Nachfahrenselektor benutzen.

MfG ChrisB

[ChrisB]

P.S.,

Dann kannst du bspw. den Nachfahrenselektor benutzen.

Hier auch noch mal mit Beispiel: http://wiki.selfhtml.org/wiki/Doku:CSS/Grundlagen_von_CSS/Ansprechen_von_Elementen_(Selektoren)#Nachfahren_eines_Elements_ansprechen_.28der_Nachfahrenselektor.29

MfG ChrisB

[Gabi]

Nachfahrenselektor - das verstehe ich nicht.
würde gerne einfach in der CSS datei definieren, wie eine h1 o.ä. definiert ist/aussehen soll in der jeweiligen div...
also wenn ich einen container A habe soll da eben h1 dick und riesig sein und bei container (div)B soll die h1 eine ganz andere schrift haben...

muss ich das vielleicht beim body definieren? also bei h1 selbst?

à la:

h1.div1 {color:green;}

[ChrisB]

Hi,

Nachfahrenselektor - das verstehe ich nicht.

*Was* verstehst du daran nicht?
Hast du dir das Beispiel angeschaut?

Ist dir generell klar, was „Selektoren“ in CSS sind und welche Aufgabe sie haben? Falls nicht, lese das bitte zunächst nach.

würde gerne einfach in der CSS datei definieren, wie eine h1 o.ä. definiert ist/aussehen soll in der jeweiligen div...

Das H1-Element ist also ein Nachfahre des „jeweiligen“ Div-Elements – und damit lässt es sich auch über den Nachfahrenselektor gezielt ansprechen.

muss ich das vielleicht beim body definieren?

Nein.

also bei h1 selbst?

Auch nein.

h1.div1 {color:green;}

Das würde ein h1-Element selektieren, dass die Klasse "div1" besitzt. Also überhaupt nicht das, was du willst.

MfG ChrisB

[Gabi]

ich habs verstanden, die Lösung sieht in meinem Falle so aus:

#div1 {border: 1px solid;  
#div1 h1 {1.7em;}  
  
  
#div2 {background-color: green;}  
#div2  h1 {font-weight: bold;}

das war auch das, was du meintest, oder?

[ChrisB]

Hi,

das war auch das, was du meintest, oder?

Grundsätzlich ja.

#div1 h1 {1.7em;}

Das ergibt aber keinen Sinn.

MfG ChrisB

[Gabi]

#div1 h1 {1.7em;}

Das ergibt aber keinen Sinn.

na doch: im container 1 möchte ich dass h1 die schriftgröße... oh, okay, ich hab noch font-size vergessen^^ in der eile ;D

kannst du mir bei der gelegenheit sagen warum das hier nicht klappt:

  #test2{  
  -moz-column-width: 19em; -webkit-column-width: 19em; -moz-column-gap: 1em; -webkit-column-gap: 1em;  
  
 }  
 #test2 h3 { color: red;  
break-before: column;  
break-after: avoid;  
background-color:white;  
}

ich hab meine spalten, ganz hübsch gemacht aber ich will den UMBRUCH erzwingen ... die h2 IST rot, aber hat KEINE weiße hintergrundfarbe und nen umbruch geschieht auch nicht ;(

[Matthias Apsel]

Om nah hoo pez nyeetz, Gabi!

ich hab meine spalten, ganz hübsch gemacht aber ich will den UMBRUCH erzwingen ... die h2 IST rot, aber hat KEINE weiße hintergrundfarbe und nen umbruch geschieht auch nicht ;(

ist wohl ein sicheres Zeichen dafür, dass jetzt noch derzeit ist.

Matthias

[Gabi]

Om nah hoo pez nyeetz, Matthias ;D

ist wohl ein sicheres Zeichen dafür, dass jetzt noch derzeit ist.

achsooooooo ;(

sonst eine prima idee,wie ich den befehl geben kann "spalte die div nicht!!" ...

problem anders ausgedrückt:
ich möchte lauter divs untereinander und nebeneinander anordnen.
mache ich sowas hier:

<div> text </div> <div> text2 </div> werden die divs NEBENEINANDER angeordnet
sind die divs aber unterschiedlich groß, sieht das teilweise sehr doof aus...

ich möchte also dass sie "untereinander" UND "nebeneinander" angeordnet werden, ganz gleich nach welchem prinzig, und bin daher über die spalten-sache gestoßen. klappt gut, aber divs werden teilweise einfach mittendurch getrennt *pffff*

[Gabi]

ähm, hier mal ein Beispiel zur Veranschaulichung

[Matthias Apsel]

Om nah hoo pez nyeetz, Gabi!

ähm, hier mal ein Beispiel zur Veranschaulichung

arbeite dich mal durch die Fehlermeldungen.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Gabi!

ganz gleich nach welchem prinzig,

float oder display: inline-block könnten das erreichen. Allerdings werden sie dann von links nach rechts angeordnet.

Matthias

[ChrisB]

Hi,

problem anders ausgedrückt:
ich möchte lauter divs untereinander und nebeneinander anordnen.

SELFHTML aktuell Weblog: Grundlagen für Spaltenlayout mit CSS
inline-block – eine Alternative zu float

MfG ChrisB