Mindestgröße für DIV's

Jan · 04.03.2006, 11:38

Hallo,

kann man einem DIV eine Mindestgröße angeben? Wenn man das Fenster verkleiner wird nämlich bei mir der eine DIV-Container vom anderen überlagert. Ich möchte aber das er nur bis zu einer bestimmten Größe verkleinert wird und sobald es für den Inhalt kritisch wird nicht weiter verkleinert wird.
Der DIV soll die Weite 20% haben aber nicht kleiner wie 175px sein.

Gruß
Jan

Corvin · 04.03.2006, 11:42

http://css4you.de/min-width.html

Aber wie du siehst funktioniert das in älteren Opera und Netscape Versionen nicht und im IE überhaupt nicht.

Jan · 04.03.2006, 11:48

Danke.

Muss ich wohl auf meiner Homepage auch noch Werbung für
Firefox machen

Jan

Corvin · 04.03.2006, 12:13

Das muss man so oder so

Jan · 04.03.2006, 12:28

Schade,

selbst mein Firefox 1.5.0.1 Linux schafft es nicht ganz. Er macht den DIV trotzdem kleiner als ich will.

Muss ich wohl damit leben das es nicht klappt.
Werde jetzt nochmal an ne Windowskiste gehn und testen.

Jan

pichfl · 04.03.2006, 13:21

manchmal funktioniert die angabe min-width nur in verbindung mit einer positionierungsangabe (z.b. position:relative).

für den IE gibst glaub ich nen hack.

des weiteren muss man darauf achten, dass bei prozentangaben auch das elternelement eine breite braucht, da der browser sonst nicht weiß, wovon er eigentlich 20% nehmen soll.

Ben · 04.03.2006, 13:27

Scheint problematisch zu sein:

http://www.cssplay.co.uk/boxes/minwidth.html

Zitat:

Es scheint so, als hätte Stu Nicholls das Problem minimaler Breiten für den Internet Explorer gelöst. Es sieht auf jeden Fall vielversprechend aus. Die Lösung kommt ohne Scripting aus. Nur der IE auf dem Mac scheint Probleme zu bereiten.

Quelle: http://www.csshilfe.de/2005/05/minwi...ie-geloest.php

Jan · 04.03.2006, 13:29

Meine CSS

Code:

div.banner {
    height: 150px;
    width: 100%;
    position:absolute;
    left: 0px; top:0px;
    background-color: rgb(71, 184, 184);
}
div.links {
    width: 20%;
    min-width:175px;
    float: left;
    position:absolute;
    left: 0px; top:150px;
    margin-top;
    margin-bottom;
    margin-left;
    margin-right;
    background-color: rgb(0, 184, 255);
}
div.mitte {
    width: 80%;
    float:right;
    position:absolute;
    left: 20%; top:150px;
    margin-top;
    margin-bottom;
    margin-left;
    margin-right;
    background-color: rgb(35, 35, 220);
}

und hier meine index.php

PHP-Code:

      echo "    <body>\n";

    echo "            <div class=\"banner\">\n"; // banner

    include "banner.php";

    echo "            </div><br />\n";

    echo "            <div class=\"links\">\n"; // linkes Menu

    include "menu.php";

    echo "            </div>\n";

    echo "            <div class=\"mitte\">\n"; // In der Mitte der Inhalt

    include "inhalt.php";

    echo "            </div>\n";

    echo "            <br style=\"clear:both;\" />\n"; // css-float beenden

    echo "    </body>\n";

    echo "</html>\n";

Jan · 04.03.2006, 14:52

Leider versteh ich nicht ganz was da steht. Aber das liegt an meinem englisch wohl.

Ich mach also ein Div mit 100%
dann darin ein weiteres mit 20%(in meinem fall) und margin-left: 175px?

Hab ich das so richtig verstanden?

Gruß
Jan

pichfl · 05.03.2006, 13:19

wenn ich das richtig verstanden habe, brauchst du 2 zusätzliche divs.
http://www.cssplay.co.uk/boxes/width2.html

.width {width:90%; min-width:400px;}
/* the bodge for IE6 browsers */
* html .minwidth {border-left:400px solid #fff; position:relative; float:left; z-index:1;}
* html .container {margin-left:-400px; position:relative; float:left; z-index:2;}

Jan · 05.03.2006, 17:44

Okay,
mit einem hab ich es hinbekommen. Jedoch hat mine Seite das Typische layout mit banner menü und inhalt.

PHP-Code:

  ###########
###BANNER##
###########
#M#       #
#E#    IN #
#N#    HA #
#U#    LT #
###########

Wie kann ich jetzt meinem Menu die Mindestgröße 175px geben?
Der inhalt soll aber nicht das Menu überdecken!
Ich hab es zwar schon versucht aber dann ist mein gesamtes Bild total zerstückelt.

Meine CSS bis jetzt:

HTML-Code:

div.banner {
    height: 150px;
    width: 100%;
    position:absolute;
    left: 0px; top:0px;
    background-color: rgb(71, 184, 184);
}

div.links {
    width: 20%;
    min-width:250px;
    float: left;
    position:absolute;
    left: 0px; top:150px;
    background-color: rgb(0, 184, 255);
}

div.mitte {
    width: 80%;
    float:right;
    position:absolute;
    left:175px; top:150px;
    background-color: rgb(35, 35, 220);
}

Gruß
Jan

04.03.2006, 11:38	Nach oben #1
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 483	Mindestgröße für DIV's Hallo, kann man einem DIV eine Mindestgröße angeben? Wenn man das Fenster verkleiner wird nämlich bei mir der eine DIV-Container vom anderen überlagert. Ich möchte aber das er nur bis zu einer bestimmten Größe verkleinert wird und sobald es für den Inhalt kritisch wird nicht weiter verkleinert wird. Der DIV soll die Weite 20% haben aber nicht kleiner wie 175px sein. Gruß Jan __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

04.03.2006, 11:42	Nach oben #2
Corvin Corvin Gröning Registriert seit: 19.03.2005 Ort: S-H \| Flensburg Beiträge: 449	http://css4you.de/min-width.html Aber wie du siehst funktioniert das in älteren Opera und Netscape Versionen nicht und im IE überhaupt nicht. __________________

04.03.2006, 11:48	Nach oben #3
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 483	Danke. Muss ich wohl auf meiner Homepage auch noch Werbung für Firefox machen Jan __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

04.03.2006, 12:13	Nach oben #4
Corvin Corvin Gröning Registriert seit: 19.03.2005 Ort: S-H \| Flensburg Beiträge: 449	Das muss man so oder so __________________

04.03.2006, 12:28	Nach oben #5
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 483	Schade, selbst mein Firefox 1.5.0.1 Linux schafft es nicht ganz. Er macht den DIV trotzdem kleiner als ich will. Muss ich wohl damit leben das es nicht klappt. Werde jetzt nochmal an ne Windowskiste gehn und testen. Jan __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

04.03.2006, 13:21	Nach oben #6
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	manchmal funktioniert die angabe min-width nur in verbindung mit einer positionierungsangabe (z.b. position:relative). für den IE gibst glaub ich nen hack. des weiteren muss man darauf achten, dass bei prozentangaben auch das elternelement eine breite braucht, da der browser sonst nicht weiß, wovon er eigentlich 20% nehmen soll.

04.03.2006, 13:29	Nach oben #8
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 483	Meine CSS Code: div.banner { height: 150px; width: 100%; position:absolute; left: 0px; top:0px; background-color: rgb(71, 184, 184); } div.links { width: 20%; min-width:175px; float: left; position:absolute; left: 0px; top:150px; margin-top; margin-bottom; margin-left; margin-right; background-color: rgb(0, 184, 255); } div.mitte { width: 80%; float:right; position:absolute; left: 20%; top:150px; margin-top; margin-bottom; margin-left; margin-right; background-color: rgb(35, 35, 220); } und hier meine index.php PHP-Code: echo " <body>\n"; echo " <div class=\"banner\">\n"; // banner include "banner.php"; echo " </div><br />\n"; echo " <div class=\"links\">\n"; // linkes Menu include "menu.php"; echo " </div>\n"; echo " <div class=\"mitte\">\n"; // In der Mitte der Inhalt include "inhalt.php"; echo " </div>\n"; echo " <br style=\"clear:both;\" />\n"; // css-float beenden echo " </body>\n"; echo "</html>\n"; __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

04.03.2006, 14:52	Nach oben #9
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 483	Leider versteh ich nicht ganz was da steht. Aber das liegt an meinem englisch wohl. Ich mach also ein Div mit 100% dann darin ein weiteres mit 20%(in meinem fall) und margin-left: 175px? Hab ich das so richtig verstanden? Gruß Jan __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz Geändert von Jan (04.03.2006 um 19:02 Uhr).

05.03.2006, 13:19	Nach oben #10
pichfl CSS-Spinner Registriert seit: 27.08.2005 Ort: Kissing Beiträge: 46	wenn ich das richtig verstanden habe, brauchst du 2 zusätzliche divs. http://www.cssplay.co.uk/boxes/width2.html .width {width:90%; min-width:400px;} /* the bodge for IE6 browsers / html .minwidth {border-left:400px solid #fff; position:relative; float:left; z-index:1;} * html .container {margin-left:-400px; position:relative; float:left; z-index:2;}

05.03.2006, 17:44	Nach oben #11
Jan Erfahrener Benutzer Registriert seit: 08.01.2006 Ort: Mannheim Beiträge: 483	Okay, mit einem hab ich es hinbekommen. Jedoch hat mine Seite das Typische layout mit banner menü und inhalt. PHP-Code: `########### ###BANNER## ########### #M# # #E# IN # #N# HA # #U# LT # ###########` Wie kann ich jetzt meinem Menu die Mindestgröße 175px geben? Der inhalt soll aber nicht das Menu überdecken! Ich hab es zwar schon versucht aber dann ist mein gesamtes Bild total zerstückelt. Meine CSS bis jetzt: HTML-Code: div.banner { height: 150px; width: 100%; position:absolute; left: 0px; top:0px; background-color: rgb(71, 184, 184); } div.links { width: 20%; min-width:250px; float: left; position:absolute; left: 0px; top:150px; background-color: rgb(0, 184, 255); } div.mitte { width: 80%; float:right; position:absolute; left:175px; top:150px; background-color: rgb(35, 35, 220); } Gruß Jan __________________ Jan info.malte-gerth.de ================================= Nutzt bitte lieber Jabber statt ICQ: malte.gerth@jabber.cz

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Höhe von div verändern, divs darunter je nach Größe verschieben	buddy_casino	JavaScript und AJAX	13	17.09.2007 12:49
mehrere Divs untereinander mit abschließenden DIV	suppenmann	HTML, XML und CSS	9	02.12.2006 16:14
Mehrere Divs ein/ausschalten	Sclot	JavaScript und AJAX	8	02.12.2006 15:44
Zwei divs - ein Problem	Jan	HTML, XML und CSS	4	14.03.2006 17:30
Soetwas wie <legend> für divs ?	robo47	HTML, XML und CSS	14	09.10.2005 23:11