Seite 1 von 1

li-width skaliert nicht bei verkleinerung Browserauflösung

Verfasst: 13.10.2013, 17:01
von forutuna
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;

Verfasst:
von
SEO Consulting bei ABAKUS Internet Marketing
Erfahrung seit 2002
  • persönliche Betreuung
  • individuelle Beratung
  • kompetente Umsetzung

Jetzt anfragen: 0511 / 300325-0.


Verfasst: 15.10.2013, 22:10
von nerd
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.

Verfasst: 19.10.2013, 07:01
von forutuna
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!?