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

CSS unterscheidet Elemente nicht

C

Curryking

Neues Mitglied
Hallo Zusammen,

ich bin neu im HTML und CSS programmieren und habe auch gleich nach dem Start mein erstes Problem. Hoffe ihr könnt mir helfen:

Habe Folgenden HTML Code als Test erstellt:

<!DOCTYPE HTML>
<html>

<header>

<link rel="stylesheet" href="Fehlersuche.css" type="text/css">

<h1>Halllllllllloooooo</h1>
<p>text</p>
</header>

<body>

<h1>Hallo 2</h1>
<p>text</p>
</body>

</html>


und folgende CSS Datei angelegt:

body{color:green;}


Wenn ich mir dann die Homepage ansehe, sind alle Schriften (also egal ob sie im body oder header ist) grün. Ich habe aber doch nur den body angesprochen! Auch wenn ich in der CSS Datei schreibe body h1{} versteht er das nicht.

Was mache ich falsch?

Vielen Dank für die Hilfe

Curryking
 
Dein HTML-Code ist Schrott. Soetwas
HTML: 
<h1>Halllllllllloooooo</h1>
<p>text</p>
gehört nicht in den Header sondern in Body
 
Danke für deine Antwort. Da hast du Recht, habe es geändert aber auch so unterscheidet er nicht. Habe jetzt den Head-Bereich, einen Header-Bereich, Body und Footer-Bereich. Egal was ich in die CSS Datei schreibe z.B. footer{color:red;}, er macht alles grün und nichts rot.
 
Danke auch dir. Ich werde daraus nicht so ganz schlau, da ich hier ein HTML Lehrbuch habe, den Code 1:1 übernehme und dennoch Probleme habe. Er erkennt im Folgenden Beispiel auch keine von mir angesprochene Einheit wie footer oder header.

HTML Datei:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<header>
<link rel="stylesheet" href="../CSS Dateien/sharky.css" type="text/css">
<h1>Sharky's WebApp</h1>
</header>
<body>

<h1>Herzlich Willkommen!</h1>
<p>Mein Name ist Sharky und ich erschrecke leidenschaftlich gerne Menschen.
Schauen Sie sich dich einfach mal in meinem Zuhause, dem <a href="http://www.html5rockt.de/">Aquarium</a> um.</p>
<h1 class="sharky">Sharky, der Jaguarhai</h1>
<p>Sharky's Eltern waren auch richtige Draufgänger und große Fans des Films "Der weiße Hai".</p>
</body>
<footer>
<h1>Shark's Fußzeile</h1>
</footer>
</html>

CSS Datei:

/*Header*/

header{
border-radius:15px;
background-color:green;
text-algin:center;
}
header h1{
font-size:40px;
color:red;
text-transform:uppercase;
}


Er müsste doch eigentlich nun den kompletten Header verändern und zusätzlich die Überschrift 1 des Headers. Aber er macht in diesem Beispiel keine Änderung. Ist das Buch Müll oder mache ich einen Fehler?
 
hallö,

ich glaube kaum das dies so in einem Buch steht.
da stimmt schon wieder nicht die Grundstruktur der html Datei.
Sachen sin ausserhalb Body.
schau noch mal richtig ins Buch.

cheffchen

ps der Code selber is Chaos pur html5 Elemente aber doctype halt nicht, das steht 100% in keinem Buch :-)
 
Danke für deine Antwort. Stimmt ich habe den Body Teil vergessen aber der Rest ist 1:1. Ich habe nochmal ein kurzes Beispiel aus dem Buch:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<title>Titel</title>
<link rel="stylesheet" href="../CSS Dateien/Haubau HTML.css" type="text/css">

</head>

<body>

<header>
<h1>Das ist der Kopfbereich</h1>
</header>

<h1>Herzlich Willkommen</h1>
<p>Hier steht wieder Text</p>

<footer>

<h1>Hier ist die Fußzeile</h1>
</footer>

</body>
</html>


So passt doch der Aufbau? Ich kann wieder nichts ansteuern, also wenn ich allen h1 eine Farbe gebe aber dann der h1 im Fußbereich eine riesen Schriftgröße geben will (footer h1{font-size:100px;} , nimmt er das nicht. Ich hab mal weiter herum probiert und wenn ich von meinem Buch weggehe und die Überschriften fortlaufend nummeriere (also keine redundanten Bezeichnungen habe), klappt es besser. Aber das Buch von mir mach das mit redundanten Bezeichnungen ( 3 mal h1 in verschiedenen Bereichen).
 
Du solltest nicht unbedingt HTML5-Elemente in HTML4 nutzen :D

HTML: 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titel</title>
<style type='text/css'>
<!--
h1 { color: #ff0000; }
footer h1 { color: #0000ff; }
-->
</style>
</head>
<body>
<header>
<h1>Das ist der Kopfbereich</h1>
</header>
<h1>Herzlich Willkommen</h1>
<p>Hier steht wieder Text</p>
<footer>
<h1>Hier ist die Fußzeile</h1>
</footer>
</body>
</html>
 
Ah ok :) Guter Hinweis, aber es geht immer noch nicht, wenn ich die CSS Befehle ausgelagert habe:

HTML Datei:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Titel</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>

<body>

<header>
<h1>Das ist der Kopfbereich</h1>
</header>

<h1>Herzlich Willkommen</h1>
<p>Hier steht wieder Text</p>

<footer>

<h1>Hier ist die Fußzeile</h1>
</footer>

</body>
</html>

CSS Datei:

@charset "UTF-8"
h1 {color:yellow;}
footer h1 {color:green;}

Ergebnis: Es sind keine Farben zu sehen. Kann mir einer ganz genau sagen woran das liegt (bitte für einen Anfänger). Ich verstehe überhaupt nicht, was da los ist.
 
@btd600: Deine Lösung funktioniert auch nicht :( Wenn ich dein Text kopiere, färbt er alles rot also er erkennt footer h1 nicht.....
 
ok, danke habe das Problem erkannt: Ich arbeite mit Scriptly und Phase 5 und in deren "Vorschau-Modus" wird Header und co. nicht erkannt. Wenn ich die Datei aber mit Chrome öffne, klappts ohne Probleme. Das muss man erstmal wissen :D Aber danke an alle.

P.S. kennt jemand ein guten und kostenlosen HTML Editor für Mac?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben