HTML/CSS Problemchen

[Retro92]

Vielen Dank für deine Mühe Einiges verstehe ich auf Anhieb, bei

Code:

section {
margin-bottom: 2em;
}

verstehe ich es aber nicht. Denn Sections haben wir doch zwei, aber nur die untere (mit der id "News", welche die News enthält, wandert runter. Wie das?

[mrshadowtux]

Weil der Margin ja bottom ist, sprich untendrunter. Mach nen margin-top draus, wenn du ihn lieber drüber haben willst.

[Retro92]

Auch mit margin-top, wandert der untere section Teil runter, je größer em wird. Wieso wandert überhaupt der zweite und nicht auch der erste? Heißen doch beide section.

[mrshadowtux]

Ja, das sollte sich definitiv auf beide auswirken. Mach mal in Chrome einen Rechtsklick und sag "Element untersuchen". Dann kannst du im neuen Bereich über die section-Einträge wandern und Chrome zeigt dir live, wie die Margins verlaufen.

[Retro92]

Prima! Jetzt verstehe ich das viel besser Ich habe auch gleich verstanden, was los ist. Ich habe mir selbst das Leben schwer gemacht und die erste section, die ja die id "welcome" hat, bereits mit einer margin versehen.

[mrshadowtux]

Dieses Menü von Chrome ist eh super. Du kannst oben rechts einfahc mal live mit Werten rumspielen, bevor du sie in der CSS-Datei implementierst.

[Retro92]

Habe noch ein paar Sachen ausprobiert, die soweit auch ganz gut funktioniert haben. Beim Thema Bilder und "float" komme ich jedoch nicht weiter.

Code:

<article>
          <header>
            <h3>Bilder einfügen</h3>
              <p>Veröffentlicht am <time datetime="2015-08-09">09.08.2015</time></p>
          </header>
            <img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Urall375_gelaende.jpg" alt="Dingens" width="240" height="200" />
            <p>Eigentlich könnten hier auch ein paar Bilder auf die Startseite, allerdings weiß ich noch nicht, wie das mit dem Verdrängen funktioniert. Denn einfach so geht das auch nicht.
              In den 1950er-Jahren beschloss die Sowjetarmee, neue mobile Raketensysteme in die Armee einzuführen. Dieses Vorhaben erforderte die Entwicklung eines neuen mobilen Raketenstartfahrzeugs,
              das diesen Anforderungen gerecht werden konnte.</p>
            <!--<p>Noch was Inhalt</p>-->
        </article>
      </section>
    </main>
    <hr>
    <footer>
        <!--<p class="Ende">Letzte Änderung: 09/08/2015</p>-->
        <p class="Ende">Copyright 2015 Retros-Retroecke.de</p>
    </footer>

</body>

</html>

Ich habe da nun ein Bild gefügt (irgendeines) Das Bild ist nun prima an der rechten Seite und zoomt auch prima mit, wenn ich die Seite vergrößere. Aber was ist das in der normalen Ansicht? Gefühlt hängt es mittendrin und verdrängt alles Andere..



Kann das Bild noch verschoben werden? Oder habe ich das einfach nur doof gemacht mit der nicht-anpassbaren <hr> darunter?

Was ich auch noch fragen wollte: Wie kann ich im css eigentlich eine ganz bestimmte HTML-Sache erreichen? Ich habe nun zwei <sections>, beide mit Headern etc. Jetzt möchte ich in der zweiten Section im ersten Paragraphen das zweite Bild formatieren. Kann ich dem Bild eine Klasse geben? Oder ist das per ">" erreichbar?

Danke

[mrshadowtux]

Generell empfehle ich immer, Bilder in das Tag <figure> mit reinzupacken. Dann kann man bei Bedarf auch mit <figcaption> Untertitel machen und so.

Zitat:Jetzt möchte ich in der zweiten Section im ersten Paragraphen das zweite Bild formatieren. Kann ich dem Bild eine Klasse geben? Oder ist das per ">" erreichbar?

Dafür gibts die Pseudoklasse nth-of-type:
section:nth-of-type(2) > p:nt-of-type(1) > figure:nth-of-type(2)
Du kannst auch etwa mit odd und even statt ner Zahl gerade und ungerade Vorkommen ansprechen.

Für die Bildfrage brauche ich mal dein aktuelles CSS, damit ich sehe was genau drinsteht. Was ich jedoch sehe: Bitte kein width= und height= mehr verwenden, das ist inzwischen veraltet, da das designbezogene Sachen sind. Dafür gibts CSS. Spätestens wenn du später mal dynamische Größen in CSS machst, machst du dir mit so festen Werten sonst alles kaputt.

[Retro92]

Danke dir! Mit figure setze ich mich nachher auseinander, bin gleich erstmal weg. Hier auf die schnelle das CSS:

Code:

body {
    background-image: url("light-tile.gif");
    line-height: 150%;
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 100px;
    margin-bottom: 100px;
    text-align: justify;
    font-size: 1em;
    font-family: serif;
}
body > header > h1 {
    text-align: center;
    font-size: 2.50em;
    font-family: fantasy;
    font-weight: bold;
}
nav {
    text-align: center;
}
nav a {
    font-family: monospace;
    font-weight: bold;
    text-decoration: none;
    color: #DC143C;
}
nav a:hover {
    color: #008000;
}
section {
    margin-top: 4em;
  }

.Ende {
    text-align: center;
    margin-top: 1em;
}
/*#Rechte {
    text-align: center;
}*/
section > h2 {
  font-family: fantasy;
}
img {
  float: right;
  margin-left: 15px;
}

Das img-Zeug habe ich erstmal ganz pauschal gemacht, daher auch meine Frage dem Erreichen von verschachtelten Elementen.

[Alpha]

Ich hab den Sinn von <figure> nicht verstanden. Was genau wird dann besser, wenn ich da die Bilder reinwerfe?