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

Worüber definiere ich am Besten mein Layout?

Status
Für weitere Antworten geschlossen.
L

Lorenzo

Neues Mitglied
Hallo,

ich besitze in HTML, CSS und Javascript ein gewisses Basiswissen (Berufsschule, Betrieb) und soll nun für meinen Chef eine neue kleine Homepage erstellen.

In der Berufsschule, habe ich HPs bisher nur mit Frames erstellt und mir deshalb meinem Layout entsprechend ein Frameset gebastelt.

<frameset rows="10%,90%" border=0 frameborder=0>
<frame src="kopf.html" name="frame1">
<frameset cols="15%,70%,15%" border=0 frameborder=0>
<frame src="navigation.html" name="frame2">
<frameset rows="80%,10%" border=0 frameborder=0>
<frame src="startseite.html" name="frame3">
<frame src="impressum.html" name="frame4">
</frameset>
<frame src="hilfsnavi.html" name="frame5">
</frameset>
<noframes>
Ihr Browser unterstüzt keine Frames!
</noframes>
</frameset>

Leider musste ich feststellen, dass trotz "noresize" und "scrolling=no" die Homepage nicht richtig an die größe meines Browserfensters angepasst wird.
Es soll immer die gesamte HP zu sehen sein, egal wie klein / groß das Fenster ist.
Leider werden meine Frames dann immer "verstümmelt". Eine Leiste ganz rechts und links zum Scrollen (am Browser / nicht am Frame) bei kleinen Fenstern wäre auch i.O., aber die Seite an sich darf nicht verkleindert werden.

Da Frames anscheinend ja nicht beliebt sind (ich weiß nun auch weshalb *g*), habe ich wie bei selfhtml.org beschrieben ein Layout via CSS formatiert.

Allerdings begreife nicht wie ich die Verlinkung in der Navi immer in meinem Hauptfenster öffnen soll.

Wozu würdet ihr mir raten?

So soll es aussehen und die Seite darf sich beim verkleinern des Browsers nicht verändern, lediglich mit der Scrollbar (rot) bei zu kleinen Fenster kann ich mich anfreunden.

hp_layout.jpg
 
Werbung:
seltsames frameset
mach doch
3 rows und 3 cols ^^
also:
<framset rows="10%, 80%, 10%">
<frame src="head.html" name="head">
<frameset cols="200px, *, 200px">
<frame src="navilinks.html" name="links">
<frame src="main.html" name="main">
<frame src="navirechts.html" name="rechts">
</frameset>
<frame src="bottom.html" name="bottom">
</frameset>

das ganze in den head rein und keinen body machen, datei heisst dann index.html
 
Ok, ist eine Möglichkeit! :wink:

Ändert aber nix daran, dass mein Hauptbereich bei zu kleinem Fenster durch andere Teile überlappt wird.
 
Werbung:
ja weil die navis 200px haben. die darf er nicht kleiner machen... lass doch den rechten frame weg, der is (vorallem bei kleinen bildschirmen) völlig umsonst.

mach nur einen oben, einen links und den hauptframe.. den unten brauchst auch ned

dann die navi mit 200px und den main mit *
 
Ich versuch's nochmal zu erklären:

Hallo,

ich soll am WE eine kleine Homepage für meinen Chef erstellen. Bisher besitze ich beim Thema HTML, CSS und Javascript lediglich Basiswissen (Berufsschule, SelfHTML...).

Das Layout soll aussehen wie im Anhang zu sehen.

Zunächst habe ich dieses Layout mit Frames definiert, aber auch gleich die Nachteile festgestellt. Trotz "noresize" passen sich die Frames nicht meinem Browserfenster an.

Kurzer Aufbau:
Bereich1 = Kopfzeile
Bereich2 = Navigation
Bereich3 = Hauptbereich
Bereich4 = Hilfsnavigation
Bereich5 = Fusszeile

Im Hauptbereich sollen sämtliche Links der Navigation/Hilfsnavigation/Fusszeile angezeigt werden. Allerdings dürfen sich die Fenster bei kleinem Browserfenster nicht verschieben, die Seite soll die gleiche Größe behalten, lediglich rechts&unten soll dann eine Scrollbar (= rote Markierung) erscheinen.

Wie stelle ich das am Besten an? Mit Frames komme ich da nicht weiter, oder?

www.8ung.at/lorenzo/Homepage/hp_layout.gif
 
Werbung:
Also ich würde dass mit Tabellen machen
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>Dein Tabellenlayout</title>
  </head>
  <body bgcolor="#000000" text="#FFFFFF">
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%" bgcolor="#003366">
      <tr>
        <td colspan="2" width="100%" height="10%" align="center">
          <h1><font face="sans-serif">Willkommen auf der Webseite von Max Mustermann!</font></h1>
        </td>
      </tr>
      <tr>
        <td width="25%" height="90%" valign="top">
          

Hyperlinks</p>
        </td>
        <td width="75%" height="90%" valign="top" bgcolor="#336699">
          

Inhalt</p>
        </td>
      </tr>
    </table>
  </body>
</html>
 
Tabellen sind keine Mittel zum Erstellen von Layouts oder Designs. Diese dienen ausschließlich zur Datenaufbereitung in tabellarischer Form.
Für Layouts verwendet man am besten die beiden Elemente <div> (Block-Element) und <span> (Inline-Element). Bei deren Verwendung sollte man sich etwas mit CSS auskennen, weil da sehr viel mit gearbeitet wird.
 
John schrieb:
Tabellen sind keine Mittel zum Erstellen von Layouts oder Designs. Diese dienen ausschließlich zur Datenaufbereitung in tabellarischer Form.
Zum Vergrößern anklicken....
Völlig richtig.


John schrieb:
Für Layouts verwendet man am besten die beiden Elemente <div> (Block-Element) und <span> (Inline-Element). Bei deren Verwendung sollte man sich etwas mit CSS auskennen, weil da sehr viel mit gearbeitet wird.
Zum Vergrößern anklicken....
Nein. Die beiden genannten Elemente sollten nur verwendet werden, wenn kein entsprechendes bedeutungsvolles Element vorhanden ist.
 
Werbung:
Wie positionierst du dann ganze Inhaltsblöcke, um ein Layout zu erstellen? <div> ist da die beste Möglichkeit nach meinem Wissensstand. Was für HTML-Elemente hast du noch parat zur Layoutgestaltung?
 
Du denkst zu sehr in Tabellen. Mehr als Überschriften, Listen (beispielsweise für die Navigation) und Absätze braucht es meist gar nicht. Sollen dann doch einmal mehrere Elemente inhaltlich zusammengefasst werden, kommt natürlich eine Division zum Einsatz.
 
Werbung:
Das Layout ist nur die Anordnung von Gestaltungselementen wie [*], <h>,

usw. Reine Layout-Elemente sind doch nur <div> und <span>.
 
nicht zwingend man kann li, h1-h6 oder andere elemente genauso fürs layout nutzen. diese semantik ist vor allem wichtig wenn der browser kein css darstellt. weil was bringt es dem user dann lauter divs vor sich zu haben?
 
Deine angegebenen Elemente sind Inhalte. [*] für Liste, <hn> für Überschriften,

für Absatz. <div> hat überhaupt kein Inhaltsaspekt. Daher werden <div>-Elemente zum Erstellen von Inhaltsblöcken verwendet, um darin die Überschriften, Listen, Absätze usw. einzubetten.
 
Werbung:
was bringt es dir denn deine navigation die nur aus einer liste besteht extra nochmal in eine div einzubetten? das ist vollkommen überflüssig und unnötig.

du hast schon recht div ist fürs layout gedacht aber man soll die elemente so nutzen wie es am besten passt.

wenn du ein feststehendes banner hast brauchst du nicht ein extra ein div um das img spannen genausoweinig muss dass div um die navigation die eh nur eine liste ist. beim content bereich macht es wiederum sinn weil du die elemente dort zusammenfasst...
 
Und was ist, wenn du um die Navigation noch einen Rahmen haben möchtest und vielleicht noch einen Hintergrund?
 
Werbung:
Nagut, das geht. Aber im Code sieht es wieder nicht schön aus. Überall sind <div>-Elemente nur um die Navigation nicht. Naja, muss jeder selber wissen. Ich denke jedenfalls, dass der Code auch einheitlich sein sollte.
 
So etwas nennt sich dann DIV-Suppe und ist ganz schlechter Stil. Eine Division dient dazu, inhaltlich zusammengehörige Elemente zusammenzufassen. :wink:
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben