CSS Design soll sich automatisch an die größe anpassen

Hallo zusammen,

bin gerade dabei eine Website zu basteln und ich bekomme das was ich will auf Teufel komm raus einfach nicht hin :(
Auf der Linken Seite des Designs ist eine "Menü" Leiste und Rechts davon der Hauptteil der Website, wenn der Hauptteil nun größer wird als das Menü soll es sich längenmäßig an die Website anpassen. Über diesen beiden Teilen befinden sich zwei Leisten die sich über die gesamte größe der Website erstrecken, welche beide mit einer Festen höhenangabe (momentan in px angegeben) versehen sind, ebenso wie das linke "menü" eine feste breitenangabe in px hat.

Hier könnt ihr das "Design" mal begutachten: Das Design gibts hier

hier die Index.php und die zugehörige css datei. wenn noch was fehlt einfach bescheid sagen.

Index
Code:
<?php
    error_reporting(E_ALL);
    include "config.php"; // die Konfigurationsdateien lesen.
    include "functions.php";
    // Verbindung zu MySQL Aufbauen
    @mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS) OR die(mysql_error());
    mysql_select_db(MYSQL_DATABASE) OR die(mysql_error());
    echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\"\n";
    echo "         \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n";
    echo "<html>\n";
    echo "    <head>\n";
    echo "        <title>La Passerella</title>\n";
    echo "        <link rel=\"stylesheet\" type=\"text/css\" href=\"page.css\" />\n";
    echo "        <meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />\n";
    echo "    </head>\n";
    echo "    <body bgcolor=\"#FFFFFF\" >\n";
    echo "		<div id=\"Menue\">\n";
    include "menu.php";
    echo "		</div>\n";
    echo "		<div id=\"Banner\">\n";
    include "banner.php";
    echo "		</div>\n";
    echo "		<div id=\"Links\">\n";
    include "menu2.php";
    echo "		</div>\n";
    echo "		<div id=\"Hauptteil\">\n";
    include "inhalt.php";
    echo "		</div>\n";
    echo "    </body>\n";
    echo "</html>\n";
?>

die CSS Datei

Code:
html, body {
	    height: 100%;
           }
body 	   {
	    margin: 0;
	    padding: 0;
	    font: 12px/1.5 verdana, arial, helvetica, sans-serif;
	   }
#Links     {
             position: absolute;
             top: 116px;
             left: 0;
	    height: 80%;
	    float:left;
             padding-top:5px;
             padding-left:5px;
             padding-right:5px;
  	    width:240px;
             background-color: #0080FF;
	   }
#Hauptteil {
	    min-height: 80%;
             min-width: 975px;
	    height: auto;
             margin: auto;
             padding-top:5px;
             padding-left:5px;
             padding-right:5px;
             padding-bottom: 0%;
             background-color: #605204;
	   }
#Menue      {
	    height: 48px;
             min-width: 985px;
             padding-top:8px;
             padding-left:8px;
             background-color: #FFFFFF;
	   }
#Banner      {
	    height: 60px;
             min-width: 985px;
             background-color: #FF0000;
	   }

Bin über jede Hilfe dankbar, ich arbeite seit über einer Woche daran das es funktionieren soll, aber es wird nicht besser. Ich glaub ich sehe einfach den Wald vor lauter Bäumen nicht mehr.

Danke schonmal im vorraus

Greetz
Chris
 
nein leider nicht, denn auto wird für inherit nicht übernommen, und wenn ich beim Hauptteil 100% für height definiere dann reicht diese höhe auch nicht zwangsläufig aus, und mehr höhe in % würde das Menü überlaufen lassen, in Pixel angegeben wiederum würde ich die größenanpassung der gesamten website aufgeben was auch nicht Sinn und Zweck der Sache ist.

Bin für weiter Tips gerne offen

Greetz
Chris

P.S.: Danke für den Hinweise das der code nicht valid ist, wird gefixt sobald ich das "*#x*?!" Menü hinbekommen habe.
 
nur mal anbei, es ist wesentlich sinvoller, mit validen code zu arbeiten, da das jetzige erscheinungsbild nen ergebnis des (wahrscheinlich) fehlinterpretierten codes sein kann...
und wenn du die fehler anschliesend fixt, ist wieder alles anders als es soll :)

also erst validen code erstellen und dann weiterprobieren! ;)
 
Original von elite-noob
Hallo zusammen,

bin gerade dabei eine Website zu basteln und ich bekomme das was ich will auf Teufel komm raus einfach nicht hin :(
Auf der Linken Seite des Designs ist eine "Menü" Leiste und Rechts davon der Hauptteil der Website, wenn der Hauptteil nun größer wird als das Menü

Größer in der Anzahl der Pixel, der Breite, der Höhe oder der Diagonalen?

soll es sich längenmäßig an die Website anpassen.

Soll es immer 50% so "groß" wie die Website sein? oder nur 20%? Vielleicht auch 40% + 30px? Was genau meinst du?

Über diesen beiden Teilen befinden sich zwei Leisten die sich über die gesamte größe der Website erstrecken,

Lerne, dich präziser auszudrücken. So versteht niemand, was du meinst. (Ich verstehe es nicht, also versteht es auch sonst niemand! :D)
Ich habe nämlich keine Lust herumzurätseln, was du wohl meinen könntest und wie sich das Layout nun verändern soll. Helfen würde es, wenn du vier Bilder machst, an denen du zeigst, wie das alte Layout aussieht, was es gemacht hat und wie das neue Layout aussehen soll. Außerdem auch, wie es sich bei einer Größenänderung verändern soll. Es würde auch helfen, wenn du den unterschiedlichen Bereichen deines Layouts Namen zuweist und diese auch auf den Bildern einträgst.
Außerdem solltest du uns den HTML(!) Quelltext zeigen. Nicht die PHP Datei. Ich hab doch keine lust, dass ganze erst zu kopieren, parsen zu lassen, etc.

Das ist zwar ein bisschen aufwendiger als deine bisherige Beschreibung, aber du bekommst dann wenigstens eine vernünftige und schnelle Antwort ohne viel herumgerate (falls überhaupt).
 
Original von valenterry
Original von elite-noob
Hallo zusammen,

bin gerade dabei eine Website zu basteln und ich bekomme das was ich will auf Teufel komm raus einfach nicht hin :(
Auf der Linken Seite des Designs ist eine "Menü" Leiste und Rechts davon der Hauptteil der Website, wenn der Hauptteil nun größer wird als das Menü

Größer in der Anzahl der Pixel, der Breite, der Höhe oder der Diagonalen?[/qoute]
Die Höhe des Menüs, das mit der Breite ist Fix geregelt, wird sich also wahrscheinlich eh nicht anpassen, außer jemand hat nen riesen Monitor.

Original von valenterry
soll es sich längenmäßig an die Website anpassen.

Soll es immer 50% so "groß" wie die Website sein? oder nur 20%? Vielleicht auch 40% + 30px? Was genau meinst du?[/qoute]
Menü und Hauptteil sollen gleich groß sein, wobei sich der Hauptteil in der höhe Variieren kann, je nach inhalt und das Menü soll halt gleich Hoch sein wie der Hauptteil

Original von valenterry
Über diesen beiden Teilen befinden sich zwei Leisten die sich über die gesamte größe der Website erstrecken,

Lerne, dich präziser auszudrücken. So versteht niemand, was du meinst. (Ich verstehe es nicht, also versteht es auch sonst niemand! :D)
Ich habe nämlich keine Lust herumzurätseln, was du wohl meinen könntest und wie sich das Layout nun verändern soll. Helfen würde es, wenn du vier Bilder machst, an denen du zeigst, wie das alte Layout aussieht, was es gemacht hat und wie das neue Layout aussehen soll. Außerdem auch, wie es sich bei einer Größenänderung verändern soll. Es würde auch helfen, wenn du den unterschiedlichen Bereichen deines Layouts Namen zuweist und diese auch auf den Bildern einträgst.

Das ist zwar ein bisschen aufwendiger als deine bisherige Beschreibung, aber du bekommst dann wenigstens eine vernünftige und schnelle Antwort ohne viel herumgerate (falls überhaupt).

Bilder werde ich morgen machen und nachreichen, hatte gedacht gehabt eine Website an der man sich das Live anschaun kann wäre aussage kräftiger. Als ein paar "Skizzen".

@easteregg, ich hoffe zwar sehr das es nicht daran liegt das der code nicht valid ist, aber nu weiß ich wenigstens was ich morgen mache ;-) , code korriegieren. Wobei halt auch einige Fehler gemeldet werden die an und für sich nur unschön sind aber an und für sich keine Fehler.

Greetz
Chris
 
Du willst also 2 Spalten nebeneinander haben, die unabhängig vom Inhalt jeweils die gleiche Länge haben? Das ist nicht ganz trivial. Die einfachste Variante ist es, das über ein Hintergrundbild zu "simulieren":

Code:
<div style="background-image: url(...) top left repeat-y"><!-- wrapper um die Spalten -->
    <div id="links">...</div>
    <div id="hauptteil">...</div>
    <div style="clear: both"></div><!-- clearendes Element, wird benötigt, wenn die Spalten floaten -->
</div>
Der Wrapper passt sich von der Höhe her dann der längeren der beiden Spalten an und zieht über die gesamte Höhe das Hintergrundbild.


Wenn das ohne Hintergrundbild sein muss, bleibt nur ein übler Hack, der so gemein aussieht, dass ich dem eigentlich nicht vertraue (hat bisher aber immer geklappt :D):

Code:
<div style="overflow: hidden"><!-- wrapper... -->
    <div id="links" style="padding-bottom: 30000px; margin-bottom: -30000px">...</div>
    <div id="hauptteil" style="padding-bottom: 30000px; margin-bottom: -30000px">...</div>
    <div style="clear: both"></div><!-- clearendes Element, wird benötigt, wenn die Spalten floaten -->
</div>
Du verpasst also beiden Spalten einen riesigen Innenabstand, um den dann durch einen negativen Außenabstand wieder auszugleichen. Der Pixelwert müsste dabei theoretisch mindestens dem größtmöglichen Unterschied der beiden Spalten entsprechen, ist aber durch die Browser irgendwo im Bereich zwischen 30000 und 40000 begrenzt. Den genauen Zahlenwert hab ich aber nicht im Kopf.
 
Zurück
Oben