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

Homepageprojekt, Problem mit Layout

J

Jason

Neues Mitglied
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)
(Ganz oben kommt eine einfache Hintergrundfarbe rein.
In der Mitte der Inhalt und die Navigationsleiste.
Unten nochmal eine einfache Hintergrundfarbe.)
​
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



C:%5CDokumente%20und%20Einstellungen%5Cbim%5CDesktop%5CHomepage%20Layout.jpg
 

Anhänge

  • Homepage Layout.jpg
    Homepage Layout.jpg
    15,1 KB · Aufrufe: 9
So auf die schnelle würde ich so machen.

HTML: 
<style>
.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;
}
</style>

<body>
<div class="header">
   Hier kommmt der Kopf Text
</div>
<div class="content">
    <div class="navigation">
        Navigation
    </div>
    Inhalt der seite
</div>
<div class="footer">
    Der Fussbereich
</div>
</body>
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 ;)^^
 
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 -.-
 
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
 
DD-Stylz schrieb:
für body den atributt text-align: center; machen ;)
Zum Vergrößern anklicken....

Das ist eine CSS-Eigenschaft, kein Attribut.

Jason schrieb:
Ich dachte immer die Ausrichtung eines Elements kann doch nicht Text-Align sein,
Zum Vergrößern anklicken....

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:

Code: 
.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?
Zum Vergrößern anklicken....

Mit AJAX wäre das möglich, ja.
 
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: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<style>
.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; }


</style>

<body>
<div class="header">
   Hier kommmt der Kopf Text
<div class="content">
    <div class="navigation">
      <table class="NaviLeiste">
        <tr>
          <th class="Link">
           <a href="http://www.html.de/" target="content">Link</a>
          </th>          
          <th class="Link">
            1. Link
          </th>          
          <th class="Link">
            2. Link
          </th>
          <th class="Link">
            3. Link
          </th>     
          <th class="Link">
            4. Link
          </th>
        </tr>
      </table>
    </div>
    Inhalt
  </div>
<div class="footer">
    Der Fussbereich
</div>

</div>

</body> 
</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
 
Bei mir steht folgendes:

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


Gruss Jason
 
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)?
 
Tut mir leid aber ich weiss nicht was eine valide oder ein Validator ist :(

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 :(

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.
Zum Vergrößern anklicken....
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben