Du befindest Dich im Archiv vom ABAKUS Online Marketing Forum. Hier kannst Du Dich für das Forum mit den aktuellen Beiträgen registrieren.

li-width skaliert nicht bei verkleinerung Browserauflösung

Ajax, Hijax, Microformats, RDF, Markup, HTML, PHP, CSS, MySQL, htaccess, robots.txt, CGI, Java, Javascript usw.
Neues Thema Antworten
forutuna
PostRank 2
PostRank 2
Beiträge: 60
Registriert: 21.08.2007, 22:20
Wohnort: Barnstorf

Beitrag von forutuna » 13.10.2013, 17:01

Auf meiner Bandpage www.karaktzorn.com habe ich unter dem Hauptbild (die zwei Personen) ein ul-Tag mit jeweils drei li-Elemente die jeweils die max-Breite von 33% haben. Wird der Browser unter die eingestellte <UL>-max-Breite von 960 Pixel verkleinert, skalieren aber die <li>-Bereiche nicht sondern brechen um. Was mache ich da noch verkehrt ?

Code: Alles auswählen

margin-top&#58;20px;
margin-bottom&#58;20px;
padding&#58;10px;
border&#58;0;
&#125;
ul#songrechte li &#123;
display&#58; inline-block;
max-width&#58;33%;
list-style&#58;none;
vertical-align&#58;top;
text-align&#58;justify;
font&#58;12px/22px Verdana, Arial, sans-serif;
text-shadow&#58; 1px 1px 1px #DDD;
&#125; 
ul#songrechte li.cc &#123;
padding&#58;0 19px 0 0;
margin-right&#58;20px;
border-right&#58;1px dotted #999;
&#125;
ul#songrechte li.by &#123;
background&#58;url&#40;/images/cc-lizenz-by.gif&#41; no-repeat -3px top;
margin-right&#58;20px;
padding&#58;0 19px 0 29px;
border-right&#58;1px dotted #999;
&#125;
ul#songrechte li.sa &#123;
background&#58;url&#40;/images/cc-lizenz-sa.gif&#41; no-repeat -3px top;
padding&#58;5px 4px 5px 29px;
&#125;
ul#songrechte li span &#123;
font&#58;12px/22px Verdana, Arial, sans-serif;
color&#58;#666;
&#125;

nerd
PostRank 10
PostRank 10
Beiträge: 4023
Registriert: 15.02.2005, 04:02

Beitrag von nerd » 15.10.2013, 22:10

Ich habe es mir nur mal kurz angesehen, aber den problem wird wohl padding, margin und border an den 3 <li> elementen sein.
Versuche margin und padding auf 0 zu setzen, und fuege im <li> ein weiteres <div> ein an welchem du width:100% und dein padding/margin setzt um den abstand zum rand des <li> festzulegen.

zuviel ich weiss wird bei der groessenberechnung zuerst der angegebene wert fuer"width" herrangezogen, und dann noch padding, margin und border hinzuaddiert, weswegen dein element dann keine 33% mehr gross ist, sondern etwas darueber liegt.

forutuna
PostRank 2
PostRank 2
Beiträge: 60
Registriert: 21.08.2007, 22:20
Wohnort: Barnstorf

Beitrag von forutuna » 19.10.2013, 07:01

Eigentlich wollte ich zusätzliche Container vermeiden. Aber ich habe es jetzt ungefähr tatsächlich so gemacht/machen müssen. Wobei box-sizing ja auch noch eine Option wäre!?

Antworten