dynamisches Webseiten-Layout mit html css und Tabellen

[hpvw]

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

Gruß hpvw

 

[Hopser79]

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]

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