Layoutfrage

[Oetzicool]

Hey Leute ich würde gerne eine Website machen die sich in einer Box ca. 600 x 400 px und will diese zentriert haben muss ich dann 6 Container: linker Rand, rechter Rand, footer, header, menueleiste, content machen oder gibt es eine einfachere Lösung wie ich z.b. nur mit content und menueleiste auskomme? Danke schonmal für eure Hilfe...

 

[Maik]

Hi,

es kommt zunächst mal darauf an, mit welcher Technik du das Layout im Fenster horizontal und vertikal zentrieren möchtest, denn die beiden nachfolgend verlinkten Methoden setzen ein unterschiedliches Markup voraus - letztere hat aber den deutlichen Vorteil, dass der obere und linke Bereich der Box nicht außerhalb des Browserfensters verschwindet, wenn der Viewport kleiner skaliert wird, als die Boxdimension, wo er dann nicht mehr zugänglich ist:

• http://d-graff.de/selfhtml/center1.html
• http://d-graff.de/fricca/center.html

Alle übrigen von dir genannten inneren Elemente wären dann so gesehen eine "Zugabe", denn für die Ausrichtung der Hauptbox im Browserfenster haben sie keine Bedeutung.

 

[Oetzicool]

und wie kann ich jetzt eine website reinbauen? ich will oben an die Box eine Menüleiste haben die ich mit menu.php einbinde und den Inhalt darunter mittels inhalt.php aber wie krieg ich diese anordnung hin? und wie mach ich es wenn der inhalt zu viel ist dieser nicht über die Website hinaus angezeigt wird?

 

[Maik]

Ich verstehe jetzt ehrlich gesagt nicht, wo bei diesem "einfachen" Seitenkonzept das Problem liegt?

Wenn die Menüleiste im oberen Teil der Hauptbox, und darunter sich der Inhalt befinden soll, bettest du eben genau in dieser Reihenfolge zwei weitere Blockelemente in der Hauptbox ein, und definierst für sie die entsprechenden Höhen, damit sie das Elternelement ausfüllen, das nach deiner eigenen Aussage eine festgelegte Dimension besitzt.

Mit der overflow:auto-Deklaration kannst du für den Content-Block festlegen, dass der übergroße Inhalt in der Box gescrollt werden soll.

 

[Oetzicool]

ok sorry ja ich habs selbst gemerkt hab nur vergessen für jeden part nen speziellen <div> zu machen jetzt gehts aber ich hab noch eine frage: wenn ich ein Menü mach wo links untereinander stehen kann ich ja <ul> und <li> verwenden damit des eineinheitliches desging hat gibts das auch im senkrechten fall gibts ne aufruf der einen festen Abstand zwischen zwei worten definiert oder muss ich des mit Leerzeichen machen?

 

[Maik]

Selbstverständlich lassen sich auch bei einem vertikalen Listenmenü Abstände / Höhen für die Menüpunkte festlegen.

Listamatic: one list, many options zeigt dir anhand unzähliger Variationen, was in horizontaler und vertikaler Richtung so alles möglich ist.

 

[Oetzicool]

Das hier ist meine Haupt-Datei:

    echo "        <div id=\"distance\">\n"; // ganz oberer Div-Holder
    echo "       </div>\n";
    echo "            <div id=\"container\">\n"; // In der Mitte der Inhalt
    echo "        <div id=\"menu\">\n"; // ganz oberer Div-Holder
    include "menu.php";
    echo "       </div>\n";   
    echo "        <div id=\"content\">\n"; // ganz oberer Div-Holder    
    include "inhalt.php";
    echo "       </div>\n";
    echo "            </div>\n";
    echo "            <br style=\"clear:both;\" />\n"; // css-float beenden
    echo "       </div>\n";

und hier meine css:

        #distance { 
	               width:1px;
		height:50%;
		background-color:#FFF;
		margin-bottom:-13.75em; /* half of container's height */
		float:left;
		}

	#container {
		margin:0 auto;
		position:relative; /* puts container in front of distance */
		text-align:left;
		height:27.5em;
		width:45em;
		clear:left;
		background-color:#036;
		border:1px solid #000;
		border-top-color:#C0C0C0;
		border-left-color:#C0C0C0;
		}
		
	#menu {
    	         background-color: #FFF;
		margin: 0em 0em 0em 1em;
		}
	
	#content {
		overflow:auto;
	         }

aber des mit dem scrollen funktioniert trotzdem nicht

 

[Maik]

Dann richte mal, wie von mir vorhin umschrieben, für die beiden inneren Elemente eine entsprechende Höhe ein:

#menu {
                background-color: #FFF;
                margin: 0em 0em 0em 1em;
                height:2.5em;
                }

#content {
                overflow:auto;
                height:25em;
                 }

 

[Oetzicool]

Danke für die Hilfe funktioniert alles ganz gut aber hab noch eine Frage und zwar wie ich es schaffe das ich im linken unteren Eck vom container ein Logo einzufügen der auch in den unteren bereich übergeht?

 

[Maik]

Da das Elternelement #container relativ positioniert ist, lässt sich das Logo darin wie gewünscht wunderbar in der linken unteren Ecke absolut positionieren:

<div id="distance"></div>
<div id="container">
     <div id="menu">menu</div>
     <div id="content">content</div>
     <div id="logo">logo</div>
</div>

#logo {
position:absolute;
left:0;
bottom:0;
}

Wenn die Dimensionen des Logos bekannt sind, können diese noch dem DIV #logo als Breiten- u. Höhenangabe mit auf dem Weg gegeben werden.