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

Bisherige Arbeit checken

Sylnois

Sylnois

Mitglied
Heyho
Ich wusste nicht genau, wohin mit diesen Thread. Zuerst dachte ich, ich eröffne in im Forum "Webseit Check". Nur ist meine Homepage noch nicht fertig. Ich habe einige Fragen und bitte um einen Check meiner bisherigen Arbeit. Früher, wie einige sicherlich schon wissen, habe ich meine Layouts mit Tabellen und ohne CSS gestaltet. Nun habe ich einen weiteren Versuch gestartet und ein Layout mit DIVs und CSS erstellt. Darum tauchen einige Fragen auf.

1. Warum wird im IE mein Layout nicht zentriert?
2. Wenn ich im Firefox Prozentangaben angebe, dann definiert, auch wenn ich keinen Text habe, einfach eine Grösse? Bei IE siehst für mich "richtig" aus.

Ich werde noch einige Fragen stellen, falls das keine Umstände macht.

LG
Sylnois

Homepage: http://worldofheroes.bplaced.net/default.htm
 
<!DOCTYPE> fehlt. Du machst den Fehler zuerst auf das Design zu achten. Schreibe zuerst den Text, schreibe ihn semantisch mit HTML aus, und dann das CSS. <div>-Namen wie -> <div class="rightbackbox"> erschweren dir die Wartung für die Zukunft. da wären neutralere Namen angebrachter. Du kannst übrigens sehr viele <divs> weglassen, indem du z.B für den div#header <h1> nimmst, und dort dann den Hintergrund anpasst etc.
 
Erstmals Danke, dass du antwortest.
Text hab ich schon. Einfach in einem anderen File. :S
Das mit dem Text muss ich noch genauer anschauen.
Aber weist du eine Antwort auf Frage 1 und 2?

Sylnois
 
Wie Silar schon gesagt hat, ist das der falsche weg.

Schön und richtig ist, dass du vom Tabellenlayout weggegangen bist, falsch ist aber, das Layout nun mit divs zu machen. Layout macht man mit CSS und nicht mit irgendeinem HTML-Tag. Ein div ist nur zum gruppieren mehrerer Elemente vorgesehen.

Jedes Tag hat in HTML eine Bedeutung, welches du gerade verwenden musst, hängt von der Bedeutung deines Inhaltes ab. So gehört eine Überschrift z.B. in ein <h1> bis <h6>, je nach Ebene der Überschrift und nicht in ein <div>, ein Textabsatz gehört in ein <p>, ein Menü ist eine Liste und kein div...

Dazu kannst du sehr viel lesen, wenn du hier im Forum mal nach "semantisch + HTML" suchst.

Sich jetzt um die Fehler im Layout zu kümmern, wäre unnütze Arbeit, da du dein HTML komplett überarbeiten musst und somit auch das CSS.

Zeichne zuerst deinen Inhalt aus, verwende dafür die Tags, die deinen Inhalt am besten beschreiben und kümmer dich nicht um das Layout.

Ob das Menü dann horizontal oder vertikal sein soll, legt man im CSS fest, es bleibt aber immer eine Liste.
 
Könntet ihr vielleicht nur kurz den Header von meinem Layout ins CSS schreiben oder was auch immer :S?
Somit bekomme ich einen kleinen Überblick, wie das etwa aussehen soll.

Sylnois
 
HTML: 
<h1>Inhalt</h1>

Code: 
h1 {
  background: #ff0000;
 /*Hier weiterer Inhalt rein, z.B der vom #header (Auch ggf. anpassen)*/
}
 
Schon viel besser. Was immer noch fehlt ist der Doctype. Danach kannst du da wo du denkst mehrere Tags zu benutzen ein <div> hinzufügen. Sinnvoll für z.B den Haupttext, wo <p>,<em> etc zu finden sein wird. Denn <div> fasst verschiedene Elemente zusammen. <div> gibst du dann die KLasse <div class="inhalt">(Oder anderes). Dies ist dafür gedacht irgendwann den Hauptinhalt mit CSS anzusprechen.
 
Juhu.. ;ugl
DOCTYPE verstehe ich noch nicht ganz. Habs mal aktualliesiert bzw. hinzugefügt, jedoch verstehe ich den Sinn der Sache nicht ganz.

Stimmts?
<em> "markiert" wichtige Wörter?

Sylnois
 
Sylnois schrieb:
DOCTYPE verstehe ich noch nicht ganz. Habs mal aktualliesiert bzw. hinzugefügt, jedoch verstehe ich den Sinn der Sache nicht ganz.
Zum Vergrößern anklicken....
Der Doctype gibt vor, welche Elemente im HTML erlaubt sind und wie der Browser mit den CSS-Anweisungen umgehen soll. Fehlt der Doctype, macht es jeder Browser wie er es will, das kann zu unterschiedlichen Darstellungen führen.

Stimmts?
<em> "markiert" wichtige Wörter?
Zum Vergrößern anklicken....
Das ist richtig.
 
Na gut.
Nun möchte ich mein Layout mit dem CSS erstellen.
Habe schon ein bisschen rechechiert. Ich denke, dass ichs schaffe. :S

Kann man den Thread noch offen lassen, bis meine Seite einigermasse korrekt dargestellt wird ?

Sylnois
 
Sylnois meldet sich wieder ;ugl

Seite: Xoltec Studios - Startseite

Ihr werdet sicherlich tausende Fehler finden. xD
Aber ich hab jetzt hauptsächlich 1 Problem, dass mich stört.
Guckt die Seite mit Firefox an. Die zwei Boxen entsprechen nicht meiner Wunschgrösse. Die Boxen schneiden sich komischweise zu unterst mit dem Balken. Bei IE ist das nicht so.. Kennt jemand ne Lösung auf das Problem?

PS: Wenn ich <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> im Header hinzufüge, verschwindet das ganze Layout. <- ??

Sylnois :D
 
Da sind immer noch zuviele <div>'s drinn. Wie wäre es mit dem Vorschlag statt <div class="header"> -> <h1> zu nehmen? Und es wäre besser Text zu nehmen, und diesen mit HTML auszuzeichnen.(Hm. Wurde eigentlich schon gesagt, hattest du neu gut begonnen, bist nun aber wieder soweit wie am Anfang. Kannst wieder von vorne anfangen, wenn du kein Backup hast. :I)
 
Na gut.. Das mit dem h1 kann ich mal probieren. Aber kann ich denn, den Text später nicht einfach hinzufügen?
Welche DIVs könnte ich sonst noch auswechseln?

Sylnois
 
Das div für den normalen Text kannst du drinnlassen, weil du da ja auch andere Formatierungen wie <em> mitzunimmst. Du könntest den Footer in einem <p> Tag stecken, diesen mit einer Klasse ausstatten, und mit CSS bearbeiten. Falls du immer noch nicht weißt, was ich meine, mache ich mal ein Beispiel. (Füge ich in meinem Post gleich hinzu)

[EDIT] Doctype kannst du übernehmen. In diesem Beispiel siehst du, dass kein <div> nötig ist, um ein Hintergrund zu erzeugen.

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
    <title>Titel</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <style type="text/css">
        h1 {
            background: #666666;
            height: 100px;
            width: auto;
            text-align:center;
        }

        .footer {
            background: #999999;
            height: 20px;
            width: 500px;
            text-align:center;
            margin: 0 0 0 25%;
        }
        </style>
</head>

<body>
    <h1><img src="logo.png" alt="SilarWebdesign" /></h1>
    <p class="footer">Dies ist ein Footer ohne 'div'</p>
</body>
</html>
 
Zuletzt bearbeitet:
Also hab header mit h1-tag und footer mit dem p-Tag ersetzt.

Jetzt habe ich eben noch dieses Problem:



So siehts in Firefox aus.



So im IE.

Ich möchte, dass es im Firefox genau so wie im IE aussehen soll.

Sylnois
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben