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

Homepage Layout DIV's

J

Jason

Neues Mitglied
Hallo zusammen

Also ich wollte folgendes Layout mit Div's machen, aber diese blöden Dinger machen einfach nicht was ich will, und wenns mal im Firefox klappt, dann nicht im Internet Explorer! :sad:

Könnt ihr mir ein solches Layout wohl erstellen?
Ich weiss nicht weiter und sollte in 3 Wochen fertig sein, habe aber nichteinmal das Layout!:cry:

Das Layout ist im Anhang.


Wir hatten in der Schule HTML und CSS, aber niemand ausser euch kann mir helfen, da der Lehrer in der Schule mir auch nicht hilft!


Danke und Gruss
Jason
 

Anhänge

  • Layout.jpg
    Layout.jpg
    7,5 KB · Aufrufe: 16
Was hast Du denn für Lehrer?

Zuerst mal, du machst Layout nicht mit DIVs sonder wenn dann mit CSS. Divs sollten nur zum Gruppieren von bestimmten Elementen in einem Bereich verwendet werden. Ihr habt doch bestimmt was über HTML-Grundlagen gehabt, oder? Das der IE die Dinge immer etwas anders Interpretiert ist nichts neues, es ist aber auch keine Zauberei, das zu fixen. Also erst mal in Firefox oder Opera entwickeln und später für die IEs ausbessern.

Zuerst solltest du eine ordentliche HTML-Dokumentstruktur aufbauen. Das fängt beim Doctype an (Ich würde HTML4.01 strict, oder XHMTL1.0 strict empfehlen).

Zu deinem Layout: das lässt sich in drei Bereiche gliedern: dem Header (incl. Logo), einer Sidebar (für die Navigation) und der Inhalt. Das HTML Grundgerüst würde also grob so aussehen:

HTML: 
<!DOCTYPE ...>
<html>
<head>
<!-- Charset nicht vergessen! -->
<title>Deine Seite</title>
</head>
<body>
<div id="header">
     <h1>Überschrift</h1>
</div>
<div id="sidebar">
   <ul id="navi">
      <li><a href="">...</a></li>
   </ul>
</div>
<div id="content">
<h2>Zwischenüberschrift</h2>
<p>Text</p>
</div>
</body></html>
Wenn du den Header grafisch gestalten willst, kannst du auf den H1-Tag auch sog. Imagereplacement Techniken anwenden: Ãœbersicht: Image-Replacement-Techniken – Artikel von Jens Meiert oder ein IMG-Tag für das Logo in den Header einbinden.

Um das ganze als Spaltenlayout sichtbar zu machen, kannst du ein Weiteres Div um den gesamten Inhalt legen und dich der Faux Colums Technik bedienen. A List Apart: Articles: Faux Columns
 
Zuletzt bearbeitet:
OK
ich habe hier was:

Leider funktioniert das immer noch nicht ganz so wie ich das gerne hätte...Im IE würde es halbwegs gehen aber nicht im Firefox...

HTML: 
<style>


body    {
    margin: 0px;
    padding: 0px;

}


.LOGO  {

    width: 100px; /*Breiter des "Seite"*/
    height: 100px; 
    border: solid 1px #000000; /*Schwarzer 1 px rahmen*/
    margin: 0px; /*Abstand zu außerhalbliegenden elementen*/
    padding: 5px; /*Inennabstand zu dne Inhalten*/
    margin-top: 10%;
    float:left;
    
}


.header  {

    width: 500px; /*Breiter des "Seite"*/
    height: 100px; 
    border: solid 1px #000000; /*Schwarzer 1 px rahmen*/
    margin: 0px; /*Abstand zu außerhalbliegenden elementen*/
    padding: 5px; /*Inennabstand zu dne Inhalten*/
    margin-top: 10%;
}

.verweise {
    width: 100px;
    height: 400px;
    border: solid 1px #000000;
    margin: 0px;
    padding: 5px;
    clear:left;
    
}


.content  {
    width: 500px;
    height: 400px;
    border: solid 1px #000000;
    margin: 0px;
    padding: 5px;
    

}


</style>

<body>

<div class="LOGO">
LOGO
</div>

<div class="header">
   Hier kommmt der Kopf Text
</div>
<div class="verweise">
    Hier kommen die Verweise (links)
</div>
<div class="content">
 Content
</div>



</body>
 
Ishmael schrieb:
Zuerst mal, du machst Layout nicht mit DIVs sonder wenn dann mit CSS. Divs sollten nur zum Gruppieren von bestimmten Elementen in einem Bereich verwendet werden.
Zum Vergrößern anklicken....
Nicht von bestimmten Elementen, sondern von mehreren (mindestens 2), deshalb solltest du auch die divs um die Überschrift und um die Navigation weglassen, denn die gruppieren nichts...
 
Du hast natürlich recht. Allerdings, wie ich schon schrieb, ist es durchaus denkbar, das der Header ein <img>-Element für das Logo bekommt, odder die Sidebar aus mehreren Listen oder sonstigen Inhalten besteht. Das obige Beispiel sollte nur das grundlegende Schema verdeutlichen. Sorry, wenn das missverständlich rüber kam.

Zu deinem Problem, Jason:
Ich weis nicht, wie weit du in den HTML-Grundlagen drin stehst. Doctype und korrekte Syntax sind von entscheidender Bedeutung für eine korrekte Darstellung in allen Browsern! Dein Code ist schon syntaktisch nicht korrekt, auch wenn es sich nur um einen Ausschnitt handeln sollte. Stell mal bitte die komplette Seite, oder noch besser einen Link rein.
 
Soll heissen ich kann das Bild, und den Text in der Navigation so ausrichten wie ein Div?


Kann ich den so auch Hintergrunsbild einfügen und solche Sachen?
 
Ishmael schrieb:
Allerdings, wie ich schon schrieb, ist es durchaus denkbar, das der Header ein <img>-Element für das Logo bekommt, odder die Sidebar aus mehreren Listen oder sonstigen Inhalten besteht.
Zum Vergrößern anklicken....
Da hast Du sicher auch recht, aber so wie Du es schreibst, wird es ja auch überall verbreitet: Um alles macht man ein <div>. Es würde besser rüberkommen, wenn Du auf die überflüssigen <div>s verzichtest, dass die Anfänger verstehen, dass die nicht überall nötig sind.

Das obige Beispiel sollte nur das grundlegende Schema verdeutlichen.
Zum Vergrößern anklicken....
Ich betrachte Deine Lösung schon als Spezialfall.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben