• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] Html-Elemente nicht mehr richtig ansteuerbar

Status
Für weitere Antworten geschlossen.
N

naeooo

Mitglied
Hi,

hab auf einer Seite mehrere Elemente (1 Überschrift und 1 Textfeld), hab denen auch beide ein eigene id zugewiesen. Aber wenn ich jetzt z.B. die Überschrift über Css verschieben will, verschiebt sich das Textfeld mit und ich versteh nicht warum. Dieses Problem tritt auch erst seit kurzem auf..

Hier mal der Code-Ausschnitt:

Code: 
<div id="Zimmerh1">
            <h1>Zimmer</h1>
        </div>
      
        <div id="Zimmer_Text">
            In unserem Hotel haben wir 12 moderne und komfortable Zimmer.
            Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite
            Sie werden sich in den bequemen eingerichteten Zimmern schnell wohl f&uuml;hlen.
            Alle Zimmer verf&uuml;gen &uuml;ber einen Fernseher inkl. Sat.
            Sie k&ouml;nnen auch ohne weiteres Haustiere mitnehmen,
            da unser Hotel sehr tierfreundlich eingerichtet ist.
        </div>

Code: 
#Zimmerh1{
    margin-top: 80px;
    margin-left: 300px;
    text-decoration: underline;
    color: #FF8000;
    font-size: 15px;
}

#Zimmer_Text {
    margin-left: 300px;
    font-size: 17px;
    margin-right: 800px;
    text-align: justify;
    margin-top: 30px;
}

Hier z.B. wenn ich margin-top: bei "Zimmerh1" ändere verschiebt sich der "Zimmer_Text" auch.
Was kann der Grund dafür sein?
 
Werbung:
Werbung:
#Zimmer_Text folgt nach #Zimmerh1. Erhält #Zimmerh1 ein größeres margin-top, wird #Zimmer_Text automatisch mit nach unten verschoben. Andernfalls müsste dessen margin-top entsprechend verringert werden.
 
Verstehe, danke :)
Zählt das auch fürs Negative? Also wenn jetzt #Zimmer_h1 einen margin-Wert von 80px hat und und #Zimmer_Text einen margin-Wert von -100px?
 
Werbung:
Hallo

Grundsätzlich solltest du zunächst einen korrekten Quelltext erstellen. Ansonsten wirst du immer wieder Probleme mit CSS-Angaben erhalten.

Also HTML:

Code: 
<article class="zimmer">
   <h1>Zimmer</h1>
   <p>In unserem Hotel haben wir 12 moderne und komfortable Zimmer. Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite Sie werden sich in den bequemen eingerichteten Zimmern schnell wohl fühlen. Alle Zimmer verfügen über einen Fernseher inklusiv Sat-Fernsehen. Sie können auch ohne weiteres Haustiere mitnehmen, da unser Hotel sehr tierfreundlich eingerichtet ist.</p>
</article>

Und die CSS-Selektoren dazu:

Code: 
.zimmer h1 {
}
.zimmer p {
}

Gruss

MrMurphy
 
Zuletzt bearbeitet:
MrMurphy schrieb:
Code: 
<article class="zimmer">
   <h1>Zimmer</h1>
   <p>In unserem Hotel haben wir 12 moderne und komfortable Zimmer. Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite Sie werden sich in den bequemen eingerichteten Zimmern schnell wohl fühlen. Alle Zimmer verfügen über einen Fernseher inklusiv Sat-Fernsehen. Sie können auch ohne weiteres Haustiere mitnehmen, da unser Hotel sehr tierfreundlich eingerichtet ist.</p>
</div>
Zum Vergrößern anklicken....
<article> schliessen wir selbstverständlich mit </article> ;)
 
Werbung:
MrMurphy schrieb:
Hallo

Grundsätzlich solltest du zunächst einen korrekten Quelltext erstellen. Ansonsten wirst du immer wieder Probleme mit CSS-Angaben erhalten.

Also HTML:

Code: 
<article class="zimmer">
   <h1>Zimmer</h1>
   <p>In unserem Hotel haben wir 12 moderne und komfortable Zimmer. Wir haben Einzelzimmer, Doppelzimmer, Dreierzimmer, sowie eine Luxussuite Sie werden sich in den bequemen eingerichteten Zimmern schnell wohl fühlen. Alle Zimmer verfügen über einen Fernseher inklusiv Sat-Fernsehen. Sie können auch ohne weiteres Haustiere mitnehmen, da unser Hotel sehr tierfreundlich eingerichtet ist.</p>
</div>

Und die CSS-Selektoren dazu:

Code: 
.zimmer h1 {
}
.zimmer p {
}

Gruss

MrMurphy
Zum Vergrößern anklicken....
Ok, danke :)
 
naeooo schrieb:
Ja, das schon, aber #Zimmerh1 würe an gleicher Stelle bleiben, obwohl der margin-Wert sozusagen höher wäre.
Zum Vergrößern anklicken....
Wir reden hier von margin-top (Außenabstand nach oben zum Eltern- oder Nachbarelement, in diesem Fall letzteres) ;)

Besitzt nun das nachfolgende Element #Zimmer_Text einen negativen margin-top-Wert, rutscht es nach oben. Da spielt der positive (höhere) margin-top-Wert des vorangegangenen Elements #Zimmerh1 keine Rolle.

Einfach mal das Ganze ausprobieren und im Browser betrachten, wie sich die Gesetzmäßigkeiten verhalten.
 
Werbung:
Spicelab schrieb:
Wir reden hier von margin-top (Außenabstand nach oben zum Eltern- oder Nachbarelement, in diesem Fall letzteres) ;)

Besitzt nun das nachfolgende Element #Zimmer_Text einen negativen margin-top-Wert, rutscht es nach oben. Da spielt der positive (höhere) margin-top-Wert des vorangegangenen Elements #Zimmerh1 keine Rolle.

Einfach mal das Ganze ausprobieren und im Browser betrachten, wie sich die Gesetzmäßigkeiten verhalten.
Zum Vergrößern anklicken....
Jo, habs getestet, bei margin-top: -100px wird nur ein Element verschoben.
 
Werbung:
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben