# dynamisches Webseiten-Layout mit html css und Tabellen



## Hopser79 (23. September 2005)

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


----------



## Jan-Frederik Stieler (25. September 2005)

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  .


----------



## Maik (25. September 2005)

Hier ein paar Anleitungen und Beispiele zum Thema 'CSS-Layouts' (tabellenlose Seitenlayouts) in alphabetischer Reihenfolge:


css.maxdesign.com.au - CSS resources and tutorials for web designers and web developers 
glish.com : CSS layout techniques 
intensivstation :: CSS Templates :: Templates 
selfHTML: CSS-basierte Layouts 
stu nicholls | CSS PLaY | CSS layouts


----------



## Hopser79 (25. September 2005)

*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.


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.


Der Aufwand wäre es mir Wert.



> Desweiteren solltest du dich intensiver mit CSS auseinandersetzen.


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.


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.


----------



## Hopser79 (27. September 2005)

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:


```
________________________________
| 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.


----------



## hpvw (27. September 2005)

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


----------



## Hopser79 (28. September 2005)

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?  ;-)


----------



## hela (29. September 2005)

hpvw hat gesagt.:
			
		

> ... noch eine Idee (vielleicht doch eine absolute Positionierung, statt float?).


Mein float-freier Vorschlag für den Header: 
	
	
	



```
<!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: 
	
	
	



```
* {
       	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.


----------



## Hopser79 (30. September 2005)

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)


----------



## Hopser79 (30. September 2005)

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.


----------



## hpvw (30. September 2005)

Viele Möglichkeiten zur Listenformatierung zeigt Max Design. Wenn Dein Interesse geweckt wurde, findest Du dort viele Ideen.

Gruß hpvw


----------



## Hopser79 (3. Oktober 2005)

Und weiter gehts in Sachen Fragestunde.   

Dank Euren Vorschlägen geht es voran in Sachen Website. Dachte mir, ich könnt jetzt endlich auf eigene Faust weiter machen, aber Pustekuchen.

Nachdem der Header nun so gut wie fertig ist, macht die Navigation Schwierigkeiten.
Die Navigation wurde in drei Teile unterteilt.
Top- und Bottom-Bereich bekamen jeweils einen einheitlichen Hintergrund, und die linke und rechte Ecke wurde mittels float angeordnet, da der IE 6.0 nicht mit position:absolute umgehen wollte.
Im Center liegt eine ul mit einem Hintergrund der sich in x- und y-Richtung ausdehnen kann, je nachdem wie viele Links es gibt oder wie lang diese sind. An den Seiten von Center sollte jeweils ein Begrenzungsbild, welches sich in y-Richtung frei ausdehnen darf und die volle Höhe von Center ausfüllt, zum Einsatz kommen. Jedoch hat dies z.Zt. nur mittels float und einer festen height-Angabe geklappt.
Da ich aber das selbe Schema auch später für den Main-Bereich benutzen will, bei dem ich nicht so ohne weiteres seine Dimensionierung angeben kann, würde ich mich über eine bessere Idee freuen.

layout.css für den Navi-Bereich:

```
div#Navi {
         float: left;
         width: 15em;
}

div#Navi div.Top { /* 10 x 33 Pixel */
         background: url(bg/navi-top-bg.jpg) repeat-x;
         height: 33px;
}

div#Navi div.Top div.TopLeft { /* 22 x 33 Pixel */
         float: left;
         background: url(bg/navi-top-left.jpg) no-repeat;
         width: 22px; height: 33px;
}

div#Navi div.Top div.TopRight { /* 83 x 33 Pixel */
         float: right;
         background: url(bg/navi-top-right.jpg) no-repeat;
         width: 83px; height: 33px;
}

div#Navi div.Center div.CenterLeft { /* 12 x 30 Pixel */
         float: left;
         background: url(bg/navi-left.jpg) repeat-y;
         width: 12px; height: 180px; /* height = Anzahl Links * 30px */
}

div#Navi div.Center ul { /* 10 x 30 Pixel */
         background: url(bg/navi-bg.jpg);
}

div#Navi div.Center ul li {
         height: 30px;
}

div#Navi div.Center div.CenterRight { /* 13 x 30 Pixel */
         float: right;
         background: url(bg/navi-right.jpg) repeat-y;
         width: 13px; height: 180px; /* height = Anzahl Links * 30px */
}

div#Navi div.Bottom { /* 9 x 23 Pixel */
         background: url(bg/navi-bottom-bg.jpg) repeat-x;
         height: 23px;
         margin-top: -3px;
}

div#Navi div.Bottom div.BottomLeft { /* 12 x 23 Pixel */
         float: left;
         background: url(bg/navi-bottom-left.jpg) no-repeat;
         width: 12px; height: 23px;
}

div#Navi div.Bottom div.BottomRight { /* 83 x 23 Pixel */
         float: right;
         background: url(bg/navi-bottom-right.jpg) no-repeat;
         width: 83px; height: 23px;
}
```

PS: Danke für den Link hpvw, allerdings war dieser schon bei dem Beitrag von michaelsinterface aufgelistet.


----------



## hela (4. Oktober 2005)

Hallo Hopser79,

 sicherlich könntest du den HTML-Quelltext deiner Navigation nöch etwas verschlanken, indem du den zentralen Hintergrund, der sich in x- und y-Richtung ausbreitet, schon in den Navigationsrahmen (id="navi") legst. Damit kannst du dir dann den Center-Container sparen. Den linken "Center"-Rand kannst du dann im UL-Elemente und den rechten in den LI-Elementen unterbringen. Das hat den Vorteil, dass die Seitenränder mit der Anzahl der LI-Elemente _mitwachsen_.

 Für den oberen und für den unteren Teil braucht man natürlich drei DIV-Blöcke, die für die Positionierung der linken, rechten und mittleren Grafikelemente sorgen. Ich habe mir angewöhnt innerhalb von Modulen (z.B. Header, Navi, Content) so viel wie möglich über die relative/absolute Positionierung zu regeln - sicherlich nur eine Gewohnheit. Mein Vorschlag für deine Navigation würde dann so aussehen:

```
<div id="navi">
     
       <h2>Navigation:</h2>
     
       <div class="top">
     	<div class="left"></div>
     	<div class="right"></div>
       </div>
       
       <ul>
     	<li>Startseite</li>
     	<li><a href="#">Platzhalter für einen Link</a></li>
     	<li><a href="#">Platzhalter für einen Link</a></li>
     	<li><a href="#">Platzhalter für einen Link</a></li>
     	<li><a href="#">Platzhalter für einen Link</a></li>
     	<li><a href="#">Platzhalter für einen Link</a></li>
       </ul>
       
       <div class="bottom">
     	   <div class="left"></div>
     	   <div class="right"></div>
       </div>
     
     </div>
```
     CSS:

```
div#navi {
     	position: relative;
     	width: 250px; /* statt 15em  */
     	height: auto;
     	background: transparent url(bg/navi-bg.jpg) repeat scroll 0px 3px;
     }	/* Mit den background-position-Werten so lange rumspielen bis das Karomuster stimmt! */
     
     div#navi h2 {
     	display: none;		/* H2-Überschrift ausblenden */
     }
     
     div#navi ul {
     	list-style-type: none;
     	background: transparent url(bg/navi-left.jpg) repeat-y scroll top left;
     }
     div#navi li {
     	height: 30px;
     	padding-left: 20px;	/* Abstand zw. Schrift und li. Containerrand */
     	line-height: 30px;
     	background: transparent url(bg/navi-right.jpg) no-repeat scroll top right;
     }
     
     div#navi .top {
     	position: relative;
     	width: 100%;
     	height: 33px;
     	background: transparent url(bg/navi-top-bg.jpg) repeat-x scroll left;
     }
     div#navi .top .left {
     	position: absolute;
     	top: 0;
     	left: 0;
     	width: 22px;
     	height: 33px;
     	background: transparent url(bg/navi-top-left.jpg) no-repeat scroll left;
     }
     div#navi .top .right {
     	position: absolute;
     	top: 0;
     	right: 0;
     	width: 83px;
     	height: 33px;
     	background: transparent url(bg/navi-top-right.jpg) no-repeat scroll right;
     }
     
     div#navi .bottom {
     	position: relative;
     	width: 100%;
     	height: 23px;
     	background: transparent url(bg/navi-bottom-bg.jpg) repeat-x scroll left;
     }
     div#navi .bottom .left {
     	position: absolute;
     	top: 0;
     	left: 0;
     	width: 12px;
     	height: 23px;
     	background: transparent url(bg/navi-bottom-left.jpg) no-repeat scroll left;
     }
     div#navi .bottom .right {
     	position: absolute;
     	top: 0;
     	right: 0;
     	width: 83px;
     	height: 23px;
     	background: transparent url(bg/navi-bottom-right.jpg) no-repeat scroll right;
     }
```
     Als Breitenwert für den navi-Container habe ich mal 250px statt 15em eingesetzt, es könnte sonst passieren, dass ebenfalls "nervige Striche" an den Grafikrändern auftreten.

  Habe übrigens Header und Navigation mit Firefox 1.0.7, Opera 8.5, IE6 und Netscape 7.1 getestet und keine Unterschiede gesehen.

     Gruß: hela


----------

