[HaBo]

elite-noob · 29.05.08, 22:13

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

easteregg · 29.05.08, 22:24

ohne es jetzt zu testen, müsste das nicht funktionieren indem du die height: auf inherit setzt, und das linke div in dem contentbereich reinsetzt und den menu nen float: left; verpasst?

edit: mir fällt grad auf, der code ist ja alles andere valid, das solltest du mal fixen!
http://validator.w3.org/check?uri=ht...Inline&group=0

Anzeige

- Anzeige -

elite-noob · 29.05.08, 23:16

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.

easteregg · 29.05.08, 23:21

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!

valenterry · 29.05.08, 23:29

Zitat:

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?

Zitat:

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?

Zitat:

Ü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!

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

elite-noob · 29.05.08, 23:37

[quote]Original von valenterry

Zitat:

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.

[quote]Original von valenterry

Zitat:

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

Zitat:

Original von valenterry

Zitat:

Ü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!

)
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

LX · 30.05.08, 03:33

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

):

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.

Anzeige

- Anzeige -

29.05.08, 22:24	#2 (permalink)
easteregg Member of Honour Registriert seit: 14.09.07 Likes: 62	ohne es jetzt zu testen, müsste das nicht funktionieren indem du die height: auf inherit setzt, und das linke div in dem contentbereich reinsetzt und den menu nen float: left; verpasst? edit: mir fällt grad auf, der code ist ja alles andere valid, das solltest du mal fixen! http://validator.w3.org/check?uri=ht...Inline&group=0 __________________ » Flattr mich! - Wenn dir mein Beitrag geholfen hat! « <\| 2 AMD Opterons 2384@ 8x3,2ghz \| Tyan S2915 \| 10GB \| 2x 8800GT \| 8400GS \| Dell 3008WFP + 2x2007FP \|>

29.05.08, 23:21	#4 (permalink)
easteregg Member of Honour Registriert seit: 14.09.07 Likes: 62	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! __________________ » Flattr mich! - Wenn dir mein Beitrag geholfen hat! « <\| 2 AMD Opterons 2384@ 8x3,2ghz \| Tyan S2915 \| 10GB \| 2x 8800GT \| 8400GS \| Dell 3008WFP + 2x2007FP \|>

30.05.08, 03:33	#7 (permalink)
LX Moderator Registriert seit: 14.02.06 Likes: 21	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 ): 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. __________________ "Ever tried. Ever failed. No matter. Try again. Fail again. Fail better." - Samuel Beckett JS BB LX UP

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Spaltenbreite im Explorer automatisch anpassen	DSX	Windows	3	13.02.09 11:47
iframe Größe anpassen	TheTeddy	(Web-) Design und webbasierte Sprachen	3	15.08.07 15:54
Apache soll automatisch Datei-Endungen hinzufügen	bitmuncher	Internet Allgemein	1	03.07.07 07:34
.bat soll sich selbstausführen	King	Code Kitchen	8	12.04.04 20:28
Win Xp schaltet sich nicht automatisch aus !!!!	antcool	Windows	9	18.11.01 21:20

29.05.08, 23:16	#3 (permalink)
elite-noob Themenstarter Registriert seit: 25.09.05 Likes: 2	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.

[HaBo]

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