Min-Width funktioniert nicht

[Bleccer]

Hey, ich mache gerade ein Flexibles Layout das so aufgeteilt ist:

Links ist ein Container (266px) groß.
Mittig ist ein Container der immer die Maximale Breite einnehmen soll.
Und ganz rechts ist der selbe container wie der Links (266px) groß.

Nun meine Frage warum klappt das nicht das der mittlere container nach 500px aufhört kleiner zu werden? Vielleicht kann mir jemand helfen...

Code vom Mittleren Container:

#content-news {
    height: 431px;
    background: url(img/news-content.png) repeat-x #000;
    padding-left: 15px;
    padding-top: 15px;
    min-width: 500px;
}

PS: Im Mittleren Container sind <li> tags enthalten die sich auch der Breite des Browsers anpassen.

 

[kruschimappel]

Abend,
an dem geposteten Code ist nichts falsch. Vermutlich liegt der Fehler woanders, kannst du den restlichen HTML-Code posten oder einen Link zu deiner Seite angeben?

 

[Fisker31]

ist min-width eine neue CSS3 code? Oo

 

[Bleccer]

^^

öhm nö xD

/* RESET *******************************************/
* {
margin: 0;
padding: 0;
border: none;
}

/* Html Body Angaben ******************************/

html,body { height: 100%; width: 100%; }

body { font-size: 1em; }


/* Layout *****************************************/

#head {
    width: 100%;
    height: 120px;
    background: url(img/head.png) #000;
}

#nav {
    width: 100%;
    height: 48px;
    background: url(img/nav.png) #000;
}

#content {
    width: 100%;
    height: 100%;
}

#content-news {
    height: 431px;
    background: url(img/news-content.png) repeat-x #000;
    padding-left: 15px;
    padding-top: 15px;
    min-width: 769px;
}

#content-sid-left-top {
    height: 100%;
    width: 288px;
    min-width: 250px;
    float: left;
    background: #FFF;
}

#content-sid-right-top {
    height: 100%;
    width: 288px;
    float: right;
    min-width: 250px;
    background: #FFF;
    padding-left: 20px;
    padding-top: 20px;
}

#flash-content {
    height: 100px;
    background: #000;
    min-width: 500px;
}


/* Content-News */

#content-news ul {
    margin-left: 17.55%;
    width: 80%;
    min-width:400px;
    list-style: none;
}

#content-news li {
    height: 2em;
    width: 80%;
    min-width:400px;
    background: url(img/news-bg.png);
    margin-bottom: 15px;
}

#content-news a {
    padding-left: 20px;
    line-height: 2em; 
    height: 35px;
    width: 100%;
    min-width:400px;
    text-decoration: none;    
    color: #FFF;
}

#content-news li:hover {
    background: url(img/news-bg-hover.png);
}

/* Anmelde Formular Felder ***********************************************/

input {
    background: #c9faf8;
    border: none;
    width: 60%;
    height: 20px;
    -moz-border-radius: 5px;
}

.submit:hover {
    background: #7e7e7e;
}

form {
    padding-left: 20px;
}

/* Sonstige Home sachen ********************************************************/

.head-title {
    background: url(img/head-title.png) repeat-x;
    height: 31px;
    padding-left: 20px;
}

 

[mermshaus]

Offtopic:

@Fisker31: Nein, CSS2.

- Referenz: Visual formatting model details (Index: Full property table)
- Browser-Unterstützung: CSS - Contents and compatibility​

 

[Bleccer]

klappt ned...

hab jetzt voll lange im internet rum geschaut aber find einfach keine lösung....

 

[Fisker31]

Ich denke ich habe den Fehler gefunden:

Du musst alle 3 Elemente links floaten, dann klappts auch mit min-width. So läufte s zumindest bei mir ohen probleme. ;)

Gruß

Fisker31

 

[Bleccer]

ja aber dann sieht die Seite ja ganz anders aus oder wie soll ich das dann machen das es eine linke eine rechte und eine mittlere Spalte gibt?

 

[threadi]

Die linke Seite links floaten.
Die rechte Seite rechts floaten.
Danach (!) ohne float (!) die mittlere Spalte einfügen.

Jedem der 3 Bereiche die selbe Mindesthöhe geben.

 

[Bleccer]

Du meinst die selbe Breite?
Und muss ich den 2 äuseren eine mindest Breite geben weil die haben ja eigentlich eine Feste Breite...

[B]#content {
    width: 100%;
    height: 100%;
}

#content-news {
    height: 431px;
    background: url(img/news-content.png) repeat-x #000;
    padding-left: 1%;
    padding-top: 15px;
    width: 100%;
    min-width: 288px;
}

#content-sid-left-top {
    height: 82%;
    width: 288px;
    min-width: 288px;
    float: left;
    background: #FFF;
}

#content-sid-right-top {
    height: 82%;
    width: 288px;
    float: right;
    min-width: 288px;
    background: #FFF;
}

#flash-content {
    height: 100px;
    background: #000;
    width: 100%;
    min-width: 288px;
}
[/B]

So hab ichs jetzt aber es klappt nicht

 

[threadi]

Ah, sorry, verlesen. Wenn das so ist, brauchst Du keine Mindestbreite angeben für irgendeinen der Bereiche. Die Boxen links und rechts sollten eine feste breite haben, so wie Du es bereits geschrieben hast. Eine Höhenangabe ist optional, wenn es das Design erfordert. Der mittlere Bereich erhält keinerlei Breitenangabe, weder fest noch mindestens oder maximal - nimm die also für die mittlere Box raus.

 

[Bleccer]

...

ja ok aber es geht darum, das die mittlere Box nicht ganz zusammenrutschen kann also muss ich der ja eine mindest Breite geben? oder???

 

[Elroy]

Hallo.

Dann hast du aber kein flexibles Layout mehr.
In diesem Fall musst du deiner Seite eine mindest Breite geben sonst zerreisst es bei zu kleinem Viewport dein Layout.

Gruss
Elroy

 

[Bleccer]

ja es geht ja darum das eine mindest Breite ihrentwie nicht Funktioniert bin seit 3 Tagen dran aber ich schaffs nicht soll ich euch mal die Unfertige Seite hochladen damit ihr euch das alles anschauen könnt?

EDIT: Hier mal die unfertige Seite http://www.inet-maker.de/min-width/index.php

 

[Elroy]

Hallo.

Nicht böse sein aber du weisst schon wie CSS funktioniert, oder?
Von einem User mit sehr guten CSS Kentnissen hätte ich eigentlich etwas mehr erwartet.

Deine Mindestbreite funktioniert auf jeden Fall, und sie wird genau so angezeigt wie du sie eingegeben hast.
Wenn das Aussehen nicht deinen Vorstellungen entspricht dann schildere bitte wie die seite deiner Meinung nach aussehen sollte.

Gruss
Elroy