Homepageprojekt, Problem mit Layout

html.de-Forum HTML, XHTML & CSS
1

Guten Abend allerseits

Auftrag:
Ich habe von der Schule aus den Auftrag bekommen eine Homepage mit ein paar Seiten, mithilfe von HTML & CSS, zu gestalten.

Ich habe mir auch schon Gedanken zum Aussehen, Inhalt und Gestaltung gemacht.
Als ich dann angefangen habe fingen die Probleme an.

Ich würde gerne so etwas machen: (Homepage Layout.jpg im Anhang)
[INDENT] (Ganz oben kommt eine einfache Hintergrundfarbe rein.
In der Mitte der Inhalt und die Navigationsleiste.
Unten nochmal eine einfache Hintergrundfarbe.)
[/INDENT]Ich hab es nun schon 3mal Probiert, einmal mit Tabelle, einmal mit Divs und einmal mit einem iFrame in der Mitte. Leider versagte ich alle 3male auf ganzer Spur und hoffe ihr könnt mir nun weiterhelfen, da mein Lehrer mir auch nicht weiterhelfen kann und ich diese Page doch mal fertigstellen sollte.

Ich bitte euch um Ideen wie man das verwirklichen kann, denn ich weiss efinach nicht weiter. Und das Internet hilft mir zwar wenn ich weiss wonach ich suchen soll, doch bei den ganzen Fehlern die immer wieder auftraten verlor ich einfach den Überblick.

Gruss und Danke
Jason

http://www.html.de/C:\Dokumente%20und%20Einstellungen\bim\Desktop\Homepage%20Layout.jpg

2

So auf die schnelle würde ich so machen.

[HTML]

.header { text-align: center; /*Text Ausrichtung*/ width: 900px; /*Breiter des "Seite"*/ height: 20px; border: solid 1px #000000; /*Schwarzer 1 px rahmen*/ margin: 0px; /*Abstand zu außerhalbliegenden elementen*/ padding: 5px; /*Inennabstand zu dne Inhalten*/ } .content { text-align: center; width: 900px; min-height: 200px; border: solid 1px #000000; margin: 0px; padding: 5px; } .navigation { margin: 30px; /*Aussenabstand zum Content*/ text-align: center; border: solid 1px #000000; padding: 5px; width: auto; height: auto; } .footer { text-align: center; width: 900px; height: 20px; border: solid 1px #000000; margin: 0px; padding: 5px; }
Hier kommmt der Kopf Text
Navigation
Inhalt der seite
Der Fussbereich
[/HTML]ist jetzt so grob zusammen geschnipselt sollte dich aber in die richtige Richtung stossen.

Verfeinern , notfalls korigierren solltest du selbst hinbekommen.

Kann der Lehrer dir nicht helfen oder will/darf er nicht? falls das erstere dann naja Have Fun ;)^^

3

Wahrscheinlich!:mrgreen:

Aber der Lehrer redet sogar schon von CSS, dass ist eine absolute Seltenheit.:mrgreen:

MfG xXxPeterPanxXx

4

Also ertmals vielen Dank ist eine gute Darstellung, eigtentlich genau was ich mir gestelltvor Danke:D

Jetzt noch die Frage, kann ich sagen er soll einen neuen Link in einem der Divs in unserem Fall im „content“ öffnen, wie bei einem iFrame?

Und wie ist der Code im CSS um das Ganze in die Mitte zu schieben, im HTML ist es ja align, aber im CSS gibts anscheinend ziemlich viele.

Gruss Jason

PS: @PeterPan, er kann nicht -.-

5

für body den atributt text-align: center; machen :wink:

body {
text-align: center;
}

6

Ja genau super danke:D
Ich dachte immer die Ausrichtung eines Elements kann doch nicht Text-Align sein, tja so kann man sich täuschen.

Jetzt noch die Frage, kann ich sagen er soll einen neuen Link in einem der Divs in unserem Fall im „content“ öffnen, wie bei einem iFrame?

Gruss Jason

7

Das ist eine CSS-Eigenschaft, kein Attribut.

Damit liegst du auch richtig. Die CSS-Eigenschaft „text-align“ richtet Inline-Elemente und Inhalte von Blockelementen aus. Wenn Du nun deine Seite zentrieren möchtest und diese wird von einem Blockelement wie einem div umgeben wäre „margin: 0px auto;“ bei diesem div der richtige weg (feste Breite vorausgesetzt). Also:

.header, .content { margin: 0px auto;width: 900px; }

Jetzt noch die Frage, kann ich sagen er soll einen neuen Link in einem der Divs in unserem Fall im „content“ öffnen, wie bei einem iFrame?

Mit AJAX wäre das möglich, ja.

8

ok ich hab jetzt ein bisschen ausprobiert, der IE braucht das Text-Align & der Firefox braucht das Margin: 0px Auto.

Ich hab mir noch folgendes überlegt:

[HTML]

.header { text-align: center; /*Text Ausrichtung*/ width: 900px; /*Breiter des "Seite"*/ height: 30px; /*Höhe der Seite*/ border: solid 1px #000000; /*Schwarzer 1 px rahmen*/ margin: 0px; /*Abstand zu außerhalbliegenden elementen*/ padding: 5px; /*Inennabstand zu den Inhalten*/ margin-top: 100px; /*Drückt das Element nach unten (Margin=Abstand T Top = Oben) */ background-color: cyan; margin: 0px auto;

}

.content {
text-align: center; /Text Ausrichtung/
width: 900px; /Breiter des „Seite“/
height: 500px; /Mindesthöhe/
border: solid 1px #000000; /Schwarzer 1 px rahmen/
margin: 0px; /Abstand zu außerhalbliegenden elementen/
padding: 5px; /Inennabstand zu den Inhalten/
background-color: green;
margin: 0px auto;
}

.navigation {
margin: 30px; /Aussenabstand zum Content/
text-align: center; /Text Ausrichtung/
border: solid 1px #000000;
padding: 5px;
width: auto;
height: auto;
background-color: blue;
}

table.NaviLeiste {
Border: solid 2px #000000;
margin: 0px;
text-align:left;
padding: 0px;
}

th.link {
Border: solid 2px #000000;
cell-spacing: 0px;
}

.footer {
text-align: center;
width: 900px;
height: 30px;
border: solid 1px #000000;
margin: 0px;
padding: 5px;
background-color: cyan;
}

body {
background-color: #7fffd4;
text-align: center; /Setzt das ganze Element in die Mitte/
}

.header, .content, .footer, .link{ margin: 0px auto;width: 900px; }

Hier kommmt der Kopf Text
Link 1. Link 2. Link 3. Link 4. Link
Inhalt
Der Fussbereich
[/HTML] Nun würde ich die Navilistenach oben verstzen und einen iFramein den content packen, aber das iFrame macht bei mir einfach was es will, ich kann es nicht schön positionieren.

Gruss Jason

9

Der IE verwendet ebenfalls „margin: 0px auto;“ wenn die Seite einen validen Doctype besitzt. Prüfe mal, ob die von dir erzeugte Seite valide ist.

10

Bei mir steht folgendes:

Ist das den nicht richtig? Tut mir ja leid, aber ich habe keine Ahnung für was diese Atrribute stehen.

Gruss Jason

11

Der ist imho korrekt. Ist die Seite valide? Steht vor dem Doctype evtl. noch etwas (das wird für dich vielleicht auch nicht mal sichtbar sein, der Validator würde es aber anmeckern)?

12

Tut mir leid aber ich weiss nicht was eine valide oder ein Validator ist :frowning:

Aber ich kann dir sagen das vor dem Doctype nichts anderes ist.

Hab jetzt mein Dokument in einem „Validator“ untersuchen lassen, dabei kam folgendes raus:

Ich versteh nix davon :frowning:

Das Dokument ist nicht valides HTML 4.01 Transitional
Benutzte Zeichenkodierung:
utf-8

Quelle:
Fallback

Warnungen
In der Dokumententypdeklaration konnte keine System-ID (URL oder Pfadangabe zur DTD) gefunden werden.
nach oben

Schwerer Fehler
Im Dokument befindet sich in Zeile 8 und Spalte 28 ein ungültiges Zeichen.
Dieses Zeichen ist in der verwendeten Zeichenkodierung (utf-8 ) nicht erlaubt.

13

[HTML][/HTML]
Dieser Doctype führt zum Quirks Mode.

Siehe hier:
DOCTYPE-Switch und seine Auswirkungen