HTML/CSS Problemchen

Retro92

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

Code

<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

Code

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

Dirk

Code

#Navi a
#Navi a:link
#Navi a:visited {}
#Navi a:hover, a:active {
text-decoration:underline;
}

CHRiSNEW

Code

#Navi a {
text-decoration: none;
color: #abc;
}

Retro92

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.

mrshadowtux

Bitte verwende für sowas nicht <p>. Es gibt dafür das <nav>-Tag! Ich würde das ganze auch noch in eine <ul> packen innerhalb des <nav>.

Code

<nav>
        <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>
</nav>

Die Wunschformate musst du den Links dann noch geben. Der Selektor wäre dann also nav a. Für so Sachen wie hovern oder anklicken gibt es Pseudoklassen wie :hover und :active. Beispiel-CSS:

Code

nav a
{
	text-decoration: none;
}


nav a:hover
{
	color: #00ff00;
}


nav a:active
{
	color: #ff0000;
}

Alles anzeigen

Retro92

Danke dir Wusste noch gar nicht, dass man aus

Code

#Navi a

noch ein

Code

#navi a: hover

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

Code

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

CHRiSNEW

Zitat von Retro92
Wusste noch gar nicht, dass man aus
Code
#Navi a
noch ein
Code
#navi a: hover
machen kann, also, dass noch etwas drangehängt wird.
[/code]

https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Ansonsten noch auf mrshadowtux seinem Ratschlag mit den NAVs und UL hören.

Retro92

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

Retro92

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

HTML

<!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>

Alles anzeigen

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

Das ist das CSS dazu:

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;
}
#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;
}

Alles anzeigen

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

mrshadowtux

Bitte <p> nur für Absätze verwenden. HTML5 bietet schöne Semantik-Tags. <br> bitte nicht für Abstände verwenden, dazu lieber in CSS Margins setzen. Da du ja auch einen Newsbereich ansprichst, bietet sich hier für die einzelnen Beiträge <article> an. Für die einzelnen Bereiche der Seite nimm am besten <section>. Das meta charset geht inzwischen kürzer.

Neues HTML: http://pastebin.com/Pj8nBqwm

Das CSS kann generell nahezu so bleiben. Ein Hinweis: Wenn du nur auf etwas bestimmtes verweisen willst, nutze > im Selektor. So würde "header" alle Header aufgreifen, während "body > header" nur den Header vom body und nicht von späterem nutzen kann.

Neues CSS: http://pastebin.com/Sc5m3RCY

Sehr lesenswert: http://html5doctor.com/element-index/ (Einfach mal bei ein paar Sachen auf "Our Prognosis" klicken für Beispiele)
Beispiel für <article>: http://html5doctor.com/the-article-element/

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>

Alles anzeigen

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;
}

Alles anzeigen

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?

HTML/CSS Problemchen

Jetzt mitmachen!

Benutzer online in diesem Thema