dynamisches Webseiten-Layout mit html css und Tabellen

Status
Nicht offen für weitere Antworten.
H

Hopser79

Grünschnabel
Hallo.

Ziel:
Eine Webseite für meinen Schwimmverein die das Browserfenster völlig ausfüllt, egal bei welcher Auflösung oder wie groß das Fenster ist.

Gedankengang:
Ich habe von einem Freund ein Layout erhalten (ein statisches Bild), dieses wurde in 32 einzelne Bildchen zerschnitten, index.html (doctype strict) mit drei Tabellen (namens: Head, Navi und Main) wurde erstellt und eine layout.css.
Die html-Datei soll nur aus tags aufgebaut werden, in denen so gut wie keine Attribute vorkommen (= Inhalt); die css-Datei soll die Gestaltung übernehmen.

Vorgehensweise:
Zuerst habe ich es natürlich auf eigene Faust versucht. Als es irgendwann nicht mehr weiter ging wurde Google befragt. Letztendlich bin ich hier gelandet und leider bei der Suche nach "website html css layout dynamisch" (und diversen Formen davon) zu keiner hilfreichen Lösung gelangt.

Problem:
Es ist schon alles geschrieben (index.html, layout.css) und in die html-Datei eingefügt. Jedoch befinden sich manche Bilder noch nicht an ihrem Platz oder es entstehen unschöne Spalten.

Ziel des Threads:
Link zu einem Tutorial, Beitrag oder direkte Antwort.

Momentaner Zustand der Seite:
http://www.sv-hellas-bruehl.de/index2.html
css-Datei:
http://www.sv-hellas-bruehl.de/layout.css
statisches Bild des Layouts:
http://www.sv-hellas-bruehl.de/sonstiges/layout.jpg (205 KB)
Screenies von verschiedenen Browsern:
http://www.sv-hellas-bruehl.de/sonstiges/firefox.jpg (70 KB)
http://www.sv-hellas-bruehl.de/sonstiges/ie.jpg (68 KB)
http://www.sv-hellas-bruehl.de/sonstiges/Konqueror.jpg (69 KB)

PS:
Sollte es doch hierzu eine Lösung geben auf tutorials.de bitte ich um Entschuldigung für diesen Thread.

PPS:
Schon einmal vielen Dank für die Antworten.

------------------------------------------------------------------------------------------------------------------------------

Ändererung(en):
- Link zum momentanen Zustand der Seite
 
Zuletzt bearbeitet:
Hi,
also erst mal würde ich dir raten das ganze nicht mit einem Tabellenlayout aufzubauen sondern dir mal Div´s zu Gemüte führen, den sonst kann das mit dem „dynamischen“ Aspekt nichts werden.
Tabellen sind eigetntlich nur für tabellarische Aufzählungen da und somit nicht wirklich „dynamisch“.
Desweiteren ist eine Seite die auf geslicten Bildern aufbaut so gut wie garnicht an, oder nur mit sehr viel Aufwand an verschiedene Browserauflösungen anzupassen.
Ich würde mir überlegen ob du dir mit dem zugrunde liegenden Gedanken einen Gefallen gemacht hast. Desweiteren solltest du dich intensiver mit CSS auseinandersetzen.

Viele Grüße und lass dich jetzt, von meiner Kritik nicht aus der Ruhe bringen sondern fang an zu lessen :) .
 
Re: dynamisches Webseiten-Layout mit html, css und Tabellen

Hey, Danke Ihr zwei für Eure Antworten.

also erst mal würde ich dir raten das ganze nicht mit einem Tabellenlayout aufzubauen sondern dir mal Div´s zu Gemüte führen, den sonst kann das mit dem „dynamischen“ Aspekt nichts werden.
Zum Vergrößern anklicken....
Ok, werde ich mir mal zu Gemüte führen. Hatte diese Vorgehensweise schon einmal bei einer anderen Site versucht. Allerdings glaube ich mich daran zu erinnern, dass es sich dabei um CSS 2.0 handelt und dies nicht alle Browser richtig darstellen können (aber probieren macht schlau). Deshalb wollte ichs per <table> versuchen.

Desweiteren ist eine Seite die auf geslicten Bildern aufbaut so gut wie garnicht an, oder nur mit sehr viel Aufwand an verschiedene Browserauflösungen anzupassen.
Zum Vergrößern anklicken....
Der Aufwand wäre es mir Wert.

Desweiteren solltest du dich intensiver mit CSS auseinandersetzen.
Zum Vergrößern anklicken....
Das würde ich sehr gerne machen, sofern es auch gängige Browser unterstützen.

Viele Grüße und lass dich jetzt, von meiner Kritik nicht aus der Ruhe bringen sondern fang an zu lessen.
Zum Vergrößern anklicken....
Ich sehe das nicht als Kritik, sondern als gutes Feedback!


@ michaelsinterface:
Vielen Dank für die Links. Die werde ich gleich morgen durcharbeiten.


Falls es noch andere Möglichkeiten geben sollte, solch ein dynamisches Layout zu erstellen, wäre ich für jeden weiteren Vorschlag offen.

Wie es mit der Site weiter geht, werde ich hier posten.

Gruß @ all.
 
Hallo, und weiter im Text.

Hab mich jetzt mal in CSS eingelesen. Allerdings gestaltet sich mein Vorhaben damit auch nicht besonders einfach.

Zuerst habe ich mich am geslicten Header probiert. Dieser sollte ca. folgende Form haben:

Code: 
________________________________
| fix |    dynamisch     | fix |
|     |__________________|     |
|     | dyn. | fix | dyn.|     |
|     |______|_____|_____|     |
|     |    dynamisch     |     |
|_____|__________________|_____|

wobei die mit fix gekennzeichneten Bereiche eine feste Höhe und Breiten haben, und die dynamischen eine feste Höhe, dafür aber in der Breite sich dem Browserfenster anpassen sollen.
Mit dem IE hat der Versuch fast funktioniert, mit dem Firefox sah das Resultat allerdings sehr ernüchternd aus.
So sieht es im Moment aus: http://sv-hellas-bruehl.de/css-test.html

Was dem Ganzen evtl. noch im Weg steht ist folgender Text von selfhtml zum Thema float:
Wenn Sie für ein Element eine Angabe zu float notieren, müssen Sie gemäß CSS2 auch eine Angabe zu width definieren. Gemäß CSS2.1 wird dies voraussichtlich nicht mehr erforderlich sein.
Zum Vergrößern anklicken....
 
Ich habe mal aus Deinem Firefox-Screenshot ein paar Idden anhand des Headers zusammengestellt. Vielleicht hilft es Dir ja weiter.
Unten siehst Du als Anlage die Grafik, auf die ich mich beziehe.
Der rote Rahmen um alles herum ist ein "Container", zum Beispiel ein div. Als Hintergrund erhält dieser Bereich das lila umrahmte Feld der Grafik, wiederholt in X-Richtung. Margin und padding dieses Elements sind 0, die Breite wird nicht angegeben.
Das Logo links (grüner Rahmen) liegt als Hintergrundbild in einem Element innerhalb des Containers. Es erhält Breite und Höhe entsprechend der Grafik, margin und padding von 0 und float:left.
Entsprechend mit float:right wird das rechte Ende des Headers im orangenen Rahmen gemacht.
Die Überschrift (oberer mittlerer grüner Rahmen) wird auf die gleiche Weise mit float:left eingefügt.
Hier liegt noch der Knackpunkt, da das Element nach unten rutschen würde, wenn der Bereich zu klein wird. Da hat vielleicht einer der Experten noch eine Idee (vielleicht doch eine absolute Positionierung, statt float?).
Der Text "Startseite" könnte in einem passenden Element außerhalb des Containers definiert werden, dem Du einen passenden linken margin und einen negativen oberen margin gibst.

Das sind nur ein paar Ideen, die Dir beim Verständnis an Deinem Problem vielleicht helfen und Dir Hilfestellung bei der eigenen Umsetzung geben könnten.

Gruß hpvw
 

Anhänge

  • layout.jpg
    layout.jpg
    27,2 KB · Aufrufe: 615
Hey Wahnsinn,
Danke für die Mühen (@ all) !

Ok, es war nicht die fertige Lösung, aber wer braucht die schon, wenn der Gedankengang positiv verändert wird. Der lila Bereich führte zu einem klasse Denkanstoß. Ich hatte doch noch zu sehr in Tabellen gedacht. Der Gedanke wird jetzt erst einmal umgesetzt, dann geb ich wieder Bescheid.

Nun ja, vielleicht entsteht ja hieraus noch ein brauchbares Tutorial? ;-)
 
hpvw hat gesagt.:
... noch eine Idee (vielleicht doch eine absolute Positionierung, statt float?).
Zum Vergrößern anklicken....
Mein float-freier Vorschlag für den Header:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
       <html>
       <head>
       <title>Test: SV Hellas Brühl</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       <link rel="stylesheet" type="text/css" href="screen.css">
       </head>
       <body>
       
       <div id="header">
         <h1>SV Brühl Hellas e.V</h1>
         <div class="left">&nbsp;</div>
         <div class="right">&nbsp;</div>
       </div>
       
       </body>
       </html>
SCREEN.CSS:
Code: 
       * {
       	margin: 0;
       	padding: 0;
       }
       body {
       	background-color: #ccc;
       	color: #000;
       	font-family: Arial, Helvetica, sans-serif;
       	font-size: 101%;
       }
       div#header {
       	position: relative;
       	width: 100%;	
       	min-width: 815px;
       	height: 167px;
       	background: transparent url(bg/header_bg.jpg) repeat-x scroll top;
       }
       div#header h1 {
       	position: relative;
       	top: 37px;
      	left: 8px;	 /* Breitenausgleich right-/left-Block */
       	width: 815px;	 /* min-width-Ersatz für IE */
       	height: 53px;
       	margin: 0 auto;	 /* horizontale Zentrierung */
       	background: transparent url(bg/head-font.jpg) no-repeat scroll center;
       	text-indent: -9999px;	 /* verschiebt den Text aus dem Viewport */
       }
       div#header div.left {
       	position: absolute;
       	top: 0;
       	left: 0;
       	width: 190px;
       	height: 167px;
       	background: transparent url(bg/head-left.jpg) no-repeat scroll left;
       }
       div#header div.right {
       	position: absolute;
       	top: 0;
       	right: 0;
       	width: 174px;
       	height: 167px;
       	background: transparent url(bg/head-right.jpg) no-repeat scroll right;
       }



  • Der header-Container hat eine Breite von 100% und eine Höhe von 167px (d.i. die Höhe des linken und rechten Seitenbildes). Dieser Container beinhaltet die H1-Seitenüberschrift "SV Brühl Hellas e.V" sowie das rechte und linke Seitenbild.

    Als Hintergrund wird hier entsprechend dem Vorschlag von hpvw mit dem "lila Bereich" (header_bg.jpg, ebenfalls 167px hoch) ausgelegt und in x-Richtung wiederholt. Außerdem sollte die Containerbreite auf 815px (d.i. die Breite des head-left-Bildes plus head-font-Bildes plus head-right-Bildes) mit der min-width-Eigenschaft begrenzt werden.
  • Die Seitenüberschrift ist als H1-Element bereits ein Block, der mit einer Breite von 815px ausgestattet wird und damit als min-width-Ersatz für den IE fungiert. Dieses Blockelement wird horizontal zentriert im header-Container positioniert und mit der entsprechenden Grafik als Hintergrundbild im Blockzentrum versehen. Damit der H1-Text "SV Brühl Hellas e.V" im Screen-Layout nicht stört, wird er mit der text-indent-Eigenschaft aus dem Viewport geschoben.
  • Letztendlich wird das linke und das rechte Seitenbild als jeweils leerer DIV-Block mit der entsprechenden Grafik als Hintergrundbild angebracht (absolute Positionierung).
Zum besseren Verständnis: Im Gegensatz zum Tabellenlayout liegen die drei Blöcke (h1, div.left und div.right) über dem header-Container und decken so seinen Hintergrund ab. Wichtig wäre evtl. noch, dass bei dem angegebenen Dokumententyp auch der IE im Standardmode arbeitet und dass bei Änderung des Dokumententyps dieser Zustand entweder beibehalten werden sollte oder aber eine Änderung der Stylesheets erforderlich ist.

Gruß: hela.
 
Autsch, so langsam wird 's heavy!

Ansich dachte ich, der Header sei endlich fertig.
Ein div mit float:left, eines mit float:right und 2 in der Mitte. Jedoch verschieben sich die mittleren beiden, wenn der viewport zu klein wird. Aber ansonsten siehts so aus, wie es soll.

Von CSS 2.0 wollte ich ja die Finger lassen wegen der älteren Browser, aber wenn ich hier so die Vorschläge sehe, bleibt mir wohl kaum etwas anderes übrig.

Auf jeden Fall vielen Dank und Respekt für Eure Vorschläge!


Weg vom Header, hin zur Navigation:
Bei selfhtml wird für die Navi eine ul benutzt und umgestaltet, was mir gut gefällt. Jetzt wollte ich das natürlich für unsere Zwecke nutzten, was beim IE und Firefox mal wieder zu unterschielichen Resultaten führte.
Was ich benötige ist, dass es in jedem Browser wie beim IE angezeigt wird.
Weiß jmd. von Euch, wie man das besser machen könnte?

Screenie vom Firefox::
http://www.sv-hellas-bruehl.de/sonstiges/ulFirefox.jpg (3 KB)
Screenie vom IE:
http://www.sv-hellas-bruehl.de/sonstiges/ulIE.jpg (2 KB)
 

Anhänge

  • ulFirefox.jpg
    ulFirefox.jpg
    2,3 KB · Aufrufe: 3.159
  • ulIE.jpg
    ulIE.jpg
    2 KB · Aufrufe: 3.154
Oh man,
ignoriert mein letztes posting.
Ein einfaches padding:0 hat schon ausgereicht.

Frei nach dem Motto: Wenn das Hirn mal wieder nicht mit spielt.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück