title image


Smiley Re: Sehe den Wald vor lauter Bäume nicht.
Hallo Misaf,



erstmal alle statischen Werte wie Breite in px durch dynamische Werte ersetzen:



Statt width: 900px; --> width: 95%;

statt width: 150px; --> width: 9em;

statt margin-left: 150px; --> margin-left: 9em;



Bei Bilder darfst Du weiterhin Angaben in px verwenden.



Und immer daran denken, dass das Grundverhalten einiger Container eine zusätzliche

Formatierung überflüssig machen könnten.



Bei Block - und Absatzelementen sind die Container automatisch 100% des

übergeordneten Container breit [1]. Bekommen diese ein margin-left + margin-right +

border-left + border-right, passt sich die Breite weiterhin an und nimmt mit allen

Formatierungen weiterhin 100% des übergeordneten Container ein. Die Angabe einer

Breite ist also überflüssig.



[1] solange diese nicht gefloatet, positioniert, zum Inline-Element umformatiert,

oder mit einer spezifischen Breite formatiert wurden.



Beispiel: (Bitte alle Formatierungen ins CSS auslagern)

<div id="left" style="padding-bottom: 5px; width: 9.5em; color: #000000; background-color: #EFEFFF;">

<div class="menucontainer" style="margin: 5px 5px 0 5px; border: 1px solid #000000;">

<p style="text-align: center;">Dieser Container benötigt keine Breite</p>

</div>

<div class="menucontainer" style="margin: 5px 5px 0 5px; border: 1px solid #000000;">

<p style="text-align: center;">Dieser Container benötigt keine Breite</p>

</div>

<div class="menucontainer" style="margin: 5px 5px 0 5px; border: 1px solid #000000;">

<p style="text-align: center;">Dieser Container benötigt keine Breite</p>

</div>

</div>



Vorschau

Dieser Container benötigt keine BreiteDieser Container benötigt keine BreiteDieser Container benötigt keine Breite



Und jetzt skaliere mal die Schriftgröße (STRG + Mausrad)

Die Container passen sich den neuen Bedingungen an.



mfg Achim







geschrieben von

Login

E-Mail:
  

Passwort:
  

Beitrag anfügen

Symbol:
 
 
 
 
 
 
 
 
 
 
 
 
 

Überschrift: