Beiträge von Retro92

Wenn ich auf den Seiten mal mehr Content habe, wäre es als Besucher ja doof, immer scrollen zu müssen. Könnte man noch ein zweites Navigationsmenü (zum Springen auf der Seite) an der Seite vertikal einrichten? Gibt es bei den "semantic elements" da nicht noch <aside>?

CHRiSNEW: Jop, habe jetzt margins, passt! Der Witz ist, dass ich hier vor der Tastatur sitze und mir nix einfällt, dabei kenne ich das aus einem CSS-Kurs (eigentlich) mehr oder weniger.
mrshadowtux: Ok, passiert nie wieder (mein HTML-Kurs ist wohl eindeutig zu primitiv gewesen)

Ist <br> für das Rücken der Überschriften gebräuchlich? Oder existiert da etwas Besseres?

Gibt es Möglichkeit, noch auf die Position der Elemente einzuwirken? Ich meine jetzt die Position der Überschriften und der Bilder, bspw. die des zweiten Bildes.
Ansonsten bin ich schon wirklich zufrieden Einziges Manko, je weniger Text, desto "willkürlicher" scheinen sich die Bilder auszurichten. Mit wenig Text liegt das untere Bild bspw. unter der <hr> Trennlinie.

Ok. Ich denke, dass ich das verstanden habe. Und um die Artikel dann individuell noch anzupassen, bspw. Farbe etc., dann kann ich ja IDs vergeben, oder?

Wäre das dann

#news > article > figure > img

?
Das nth-of-type odd & even verstehe ich noch nicht. Du hattest ja gepostet, dass ich damit Verschachteltes erreichen kann, aber ich verstehe gerade nicht, wieso du einmal odd UND even machst, wo in beidem doch dasselbe steht. Zum Anderen: Wenn ich später noch einen Artikel mit <figure> mache, wo ist da die Festlegung auf genau diese eine <figure> enthalten?

Ok, habe <figure> direkt in den Beginn von <article> gesetzt. So sieht es aus:

<section id="news">
        <h2>News</h2>
        <article>
          <figure><img src="https://upload.wikimedia.org/wikipedia/commons/8/86/Urall375_gelaende.jpg" alt="Dingens" width="240" height="200" /></figure>
          <header>
            <h3>Entstehung</h3>
              <p>Veröffentlicht am <time datetime="2015-08-09">09.08.2015</time></p>
          </header>
            <p>Nach gefühlt einjährigem Stillstand geht es hier endlich weiter, neue Inhalte entstehen. Ein passendes Design evtl. auch!</p>
            <p>P.S.: Es wurde auch Zeit</p>
        </article>

Meintest du das so? Ich habe allerdings noch die Bildbegrenzung drin...

Css für dieses Bildstück ist jetzt

img {
  float: left;
  margin-left: 2em;
  margin-bottom: 2em;
}

So sieht es nun aus:

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

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.

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

<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

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.

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.

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

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?

So, ich habe mich noch ein wenig durchs Netz gelesen und versucht, eure Tipps zu berücksichtigen. So sieht nun meine Indexseite aus:

<!DOCTYPE html>
<html lang="de">


<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" href="stylesheet.css" type="text/css">
    <title>Index</title>
</head>


<body>
    <p id="Ueschrift">
        Test
    </p>
    <nav>
      <a href="Index.html">|Hauptseite|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Neuigkeiten|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Belege|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Computer|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Rennrad|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Links|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Impressum|</a>
      <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseite">|Kontakt|</a>
    </nav>
    <hr>
    <br>
    <p>Herzlich willkommen!</p>
    <p>Willkommen auf dieser Website. Test. Was jeweils zu erwarten ist, möchte ich kurz darlegen:
      <ul>
        <li>Test.</li>
        <li>Test.</li>
        <li>TEst.</li>
      </ul>
    </p>
    <p>Für diese drei Bereiche gibt es einzelne Kategorien, sowie eine kleine "News"-Abteilung ganz zu Beginn.</p>
    <p>Noch ein kleiner Hinweis am Rande: Test.</p>
    <br>
    <p class="Ende">Nun wünsche ich viel Spaß beim Lesen!</p>
    <br>
    <hr>
    <p class="Ende">Letzte Änderung: 09/08/2015</p>
    <p id="Rechte">Copyright 2015 Test.de</p>
</body>


</html>

Passt der Header so? Hatte vorher einen HTML 4.01 Header, der aber laut W3C Validator nicht passte.

Das ist das CSS dazu:

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;
}
#Ueschrift {
    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;
 }
.Ende {
    text-align: center;
}
#Rechte {
  text-align: center;
  font-size: 0.75em;
}

Freue mich über Kritik & Anregungen, bin ich permanent am Ausprobieren & Lernen.

CHRiSNEW: Das werde ich auch machen. Danke für den Link!

Danke dir Wusste noch gar nicht, dass man aus

#Navi a

noch ein

#navi a: hover

machen kann, also, dass noch etwas drangehängt wird. Nur rein aus Interesse, ginge das auch in "meiner" Form, als

#navi {
color: abc;
hover:
.
.
.

Danke euch beiden Das hat soweit funktioniert. Was kann ich machen, damit der Link beim Anklicken eine andere Farbe bekommt? Geht das nicht auch? (Vlt. sogar per Text-Decoration) Denn ohne text-decoration: none habe ich ja blau, mit rot beim Anklicken.

Hallo zusammen,

ich tüftel mit einem Löffelchen Wissen mal wieder ein wieder an HTML herum und wirklich weit bin ich nicht... aber naja.
Ich habe folgendes Problem: Ich habe eine Navigationsleiste

<p id="Navi">
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Hauptseite|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Neuigkeiten|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Belege|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Computer|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Rennrad|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Links|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Impressum|</a>
        <a href="http://de.wikipedia.org/wiki/Wikipedia:Hauptseitea">|Kontakt|</a>
</p>

erstellt. Das Ganze habe ich mit einer ID versehen und möchte nun mit

#Navi {
    color: #DC143C;
    text-align: center;
    font-family: monospace;
    font-weight: bold;
    text-decoration: none;
}

in meiner CSS (übrigens korrekt im <head> verbunden) beeinflussen. Leider klappt das nicht, zwar ist mit font-family etc. alles in Ordnung, leider sind die Links (wikipedia als ein bsp) nachwievor unterstrichen und haben auch nicht meine Wunschfarbe.

Könnte mir da jemand helfen? Ich danke im Voraus Ich hoffe, dass ihr versteht, was ich meine.

Wenn die Platte gewaschen ist und elektrostatische Aufladung über die Anlage abegeben wird, sowie der Spieler frei von Fusseln ist (und alles gut justiert ist), hast du kein knacken. Alternativ kannst du auch nass abspielen.