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

[Anfängerfrage]: Falsche Anzeige?

P

Panthera Negra

Neues Mitglied
Hallo,

Folgendes:
Seit einigen Tagen beschäftige ich mit wieder intensiver mit HTML, hatte schon vorher mir das ein oder andere Tutorial angeschaut, das allerdings auch nur so la la ;-)
Jetzt bin ich dabei, mir selbst eine Homepage mit Hilfe von HTML & CSS aufzubauen.
Das Grundgerüst steht schon, allerdings gab es wohl einen Fehler, den ich so weit nicht erkennen kann. Deshalb wollte ich mal bei euch um Hilfe bitten :-)

HTML: 
<html><head><title>Panthera´s Blog</title><link href="style.css type="text/css rel="stylesheet" /><meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /><meta name="descritpion" content="Panthera Negra´s Blog. Alle Infos rund um mich, meine Aktivitäten, und yoooha.mixxt.com. /><meta name="autor" content="Panthera Negra" /><meta name="keywords" content="..." /></head><body><div id="header">Header</div><div id="navi"><a href="index.html" class="Home"></a><a href="#" class="About me"></a><a href="#" class="Mein Blog"></a><a href="#" class="yoooha"></a><a href="#" class="Meine Projekte"></a></div><div id="content">Content</div><div id="footer">Footer</div></body>

</html>

Entschuldigt bitte die Unübersichtlichkeit des Codes. Woran liegt das? ^^
Das ist erst einmal der HTML Code.

Hier noch der zugehörige CSS Code, der natürlich auch erst einmal das Grundgerüst ist. Bilder etc. möchte ich erst später beifügen.
Code: 
body {margin-top:0px;
font-size:14px;
font-family:Verdana;
}


#all {
width:1000px;
height:1500px;
margin-left:auto;
margin-right:auto;
}


#header {
background-color:gray;
width:1000px;
height:400px;
}


#navi {
background-color:gray;
width:400px;
height:900px;
float:left;
}


#Content {
background-color:gray;
width:600px;
height:900px;
margin-left:400px;

}


Wäre nett, wenn ihr mir bisschen helfen könnten :-)

mfg,
P.N
 
Und wie sieht das Problem aus? Mit Fehlerbeschreibung lässt sich besser helfen ;)
Beim kurzen Überfliegen des Quelltextes ist mir der fehlende Doctype aufgefallen...
Zu dem Unübersichtlichen Code, was nutzt du für einen Editor?
 
Folgendes:
Wenn ich die index.html aufrufe, erscheinen genau drei Wörter:
-Header
-Content
-Footer
Nur diese drei Wörter. Dabei habe ich in der CSS-Datei doch schon grafische Werte eingegeben, nicht?
Von der Navi ist gar nichts zu sehen.

Das mit dem Code tut mir wie gesagt leid. Aber das hat das Forum hier so gemacht, gecodet habe ich alles ordentlich gegliedert. Mit Notepad++.

mfg,
P.N
 
Hallo,

bitte lies mal den Abschnitt interne Links - HTML lernen - HTML Kurs / Seminar und vergleiche was du bei deinen Links vergessen hast.

Verwende am Anfang unterschiedliche Hintergrundfarben, damit machst du dir das Leben leichter.

Du kannst folgenden Header benutzen:
HTML: 
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset=ISO-8859-1" />        
        <title>Panthera´s Blog
        </title>
        <link href="style.css type="text/css rel="stylesheet" />
        <meta name="descritpion" content="Panthera Negra´s Blog. Alle Infos rund um mich, meine Aktivitäten, und yoooha.mixxt.com. />
   <head>

... hier folgt der <body>
 
Danke für eure Antworten.
Ich habe das ganze soweit auch schon verbessert, allerdings habe ich immer noch das Problem, dass weder irgendwelche Grafiken, noch irgendwelche Farben angezeigt werden. Woran liegt das?
 
Am fehlerhaften HTML Code. Schau mal in die Quelltextansicht z.b. im Firefox, dann siehst du was falsch ist
 
Wenn Du den Kopfbereich verwendest den Wustersoss dir empfohlen hat, dann ist es auch logisch, dass ein Validator diese Fehler meldet. HTML5 beendet keine HTML-Elemente mit />. Bei HTML5 reicht >. Das erklärt jedoch keine Darstellungsfehler, da sowas vom Browser meist "überlesen" wird.
 
Ich habe heute meinen sozialen Tag. :mrgreen:

HTML: 
<!DOCTYPE html>
<html>
<head>
<title>Panthera´s Blog</title>
<style type="text/css">
* {
    width: 1000px;
    height: 1500px;
    margin: 0 auto;
}

body {
    margin-top: 0px;
    font-size: 14px;
    font-family: Verdana;
}

#header {
    background-color: gray;
    width: 1000px;
    height: 400px;
}

#navi {
    background-color: gray;
    width: 400px;
    height: 900px;
    float: left;
}

#content {
    background-color: gray;
    width: 600px;
    height: 900px;
    margin-left: 400px;
}
</style>
</head>
<body>
    <div id="header">Header</div>
    <div id="navi">
        <a href="index.html" class="home"></a><a href="#" class="about_me"></a><a
            href="#" class="mein_blog"></a><a href="#" class="yoooha"></a><a
            href="#" class="meine_projekte"></a>
    </div>
    <div id="content">Content</div>
    <div id="footer">Footer</div>
</body>
</html>
 
Du hättest ihm natürlich auch einfach sagen können, was falsch ist. So hat er weder was gelernt, noch ist er in der Lage zukünftig seine Fehler zu finden. Ist das sozial?

Die Fehler stecken in diesem Teil des Quellcode und sind sogar hier im Forum erkennbar (wenn auch schlecht).
Panthera Negra schrieb:
HTML: 
<html>
<head>
<title>Panthera´s Blog</title>
<link href="style.css type="text/css rel="stylesheet" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="descritpion" content="Panthera Negra´s Blog. Alle Infos rund um mich, meine Aktivitäten, und yoooha.mixxt.com. />
<meta name="autor" content="Panthera Negra" />
<meta name="keywords" content="..." />
</head>
<body>...</body>

</html>
Zum Vergrößern anklicken....
 
Hallo,

danke für eure Hilfe.
Ich habe diesen Fehler nun beseitigt.
Des weiteren habe ich mittlerweile schon einige Grafiken fertig.
Ich möchte in den Header einen Facebook Button einbauen.

Dafür hier der Code:
Code: 
<div id="Header">
<div>
<div id="Facebook">
  <div id="div1">
    <img src="Bilder/facebook_button.png" />
  </div>
</div>
<link href="header-style.css" type="text/css" rel="stylesheet" />
</div>
</div>

...und hier die CSS-Datei:
Code: 
#facebook {
}


#div1 {
border-top: 1px black solid;
border-right: 1px black solid;
border-bottom: 1px black solid;
margin-top: 195px;
margin-left: 630px;
padding: 5px;
position: absolute;
}

Das mit den Größen usw stimmt auch soweit.
Nur habe ich ein Problem:
Es erscheint ein riesiger, oranger Balken, der mit dem Facebook-Button erscheint.
Dies liegt nicht an der Grafik.

Vielleicht könnt ihr mir helfen, ich sitze nun schon ein paar Stunden an diesem Problem und finde einfach keine Lösung.

mfg,
P.N
 
Vorab: CSS-Dateien bindet man in den <head> (nicht header oder <div id="header">) ein und Content in den <body>.

1. Baue ein minimales HTML-Grundgerüst mit Doctype, Head und Body. Ohne jegliche Meta-Tags oder CSS-Anweisungen.
2. Validiere deinen Code.
3. Referenziere das Bild im Body.
4. Sollte das Bild tatsächlich angezeigt werden, kannst du es anschließend mit CSS positionieren.
 
Hallo,
das ganze ist natürlich nur der Ausschnitt eines Codes.
Danke für deine Hilfe, ich werde mich gleich mal ransetzen.
Trotzdem: Warum erscheint ein langer, oranger Balken, der alles "durcheinander" Bringt?

mfg,
P.N
 
Warum präsentierst du uns nur einen Ausschnitt?
Daran ist nicht ersichtlich wie der Rest aussieht.
Zeige am besten immer den gesamten Code, also HTML und CSS komplett.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben