Boxmodell bei relativen Grössenangaben

[AndreD]

Hallo zusammen,

Ich stelle mir grad die Frage wie ich beim Boxmodell die einzelnen Attribute bei relativen Angaben richtig bemaße daß ich auf die gewünschten Ausmaße komme.

Bei absoluten Werten ist das ja recht einfach:

#absolute_box
{
  position:absolute;
  top:100px;
  left:100px;
  width:288px;
  height:238px;
  padding-top:10px;
  padding-left:10px;
  border:1px solid #000000;
  background-color:#EBEBEB;
}

ergibt eine Box mit einer Breite von 300px und einer Höhe von 250 Pixel.

Wenn ich nun aber das ganze mit relativen Grössen erstellen möchte:

#relative_box
{
  position:absolute;
  top:10%;
  left:10%;
  width:18%;
  height:18%;
  padding-top:2%;
  padding-left:2%;
  border:0.1em solid #000000; /* <-- [1] Hier ist mein Problem! */
  background-color:#EBEBEB;
}

ergibt eine Box mit einer Breite von 20% und einer Höhe von 20% relativ bezogen auf die Grösse des Browserfensters.

[1] Jetzt weiss ich nicht wieviel ich von meiner width und height abziehen muss um tatsächlich eine Breite/Höhe von 20% zu bekommen. Bei dieser Konstellation habe ich ja jetzt eine Breite/Höhe von 20% + 0.1em x 2, oder?

Also was tun? Das ganze ist nicht so schlimm so lange man kein weiteres Element unmittelbar an das erste rechts davon platzieren möchte, in dem Fall überschneiden die sich exakt um die Breite der Linien :-(

Ich hoffe das war irgendwie verständlich erklärt?

Danke & Grüsse
AndreD

[Cheatah]

Hi,

Ich stelle mir grad die Frage wie ich beim Boxmodell die einzelnen Attribute bei relativen Angaben richtig bemaße daß ich auf die gewünschten Ausmaße komme.

die Frage wird Dir in http://www.w3.org/TR/CSS21/visudet.html#Computing_widths_and_margins *ausführlich* beantwortet - viel Spaß ;-) Für einen grundlegenden Überblick könnte es auch helfen, wenn Du Dir einfach die Angaben zu Prozentwerten bei den einzelnen Eigenschaften ansiehst.

Cheatah

[AndreD]

Servus,

die Frage wird Dir in (...)

Och, _das_ sieht in etwa so was ich gesucht aber nicht gefunden habe. Ich glaub ich sollte doch öfter als nur zum validieren beim W3C vorbeischauen :-)
Danke mal für den Link!

Gruß AndreD

[Cheatah]

Hi,

Ich glaub ich sollte doch öfter als nur zum validieren beim W3C vorbeischauen :-)

Tipp: Für Mozilla gibt es eine Sidebar, die wesentliche Punkte im CSS-Bereich des W3C verlinkt (z.B. jede einzelne Eigenschaft). Irgendwo auf devedge.netscape.com; über Google findest Du es.

Cheatah

[AndreD]

Hello,

Tipp: Für Mozilla gibt es eine Sidebar, die wesentliche Punkte im CSS-Bereich des W3C verlinkt (z.B. jede einzelne Eigenschaft). Irgendwo auf devedge.netscape.com; über Google findest Du es.

Hey danke für den Tipp, hört sich recht gut an! Werde mich gegen später mal auf die Suche danach machen und mir auch Deinen Linktipp zu Gemüte führen.

Danke mal dafür,
Grüsse AndreD

[AndreD]

Hallo nochmal,

(...) *ausführlich* beantwortet - viel Spaß ;-)

Nach dem durchlesen ist mir jetzt einiges klarer als vorher aber im Moment hilft es mir noch nicht weiter, danke für den Link anyway. Nach wie vor verstehe ich nicht wie ich mit relativen Angaben z.B. die Breite einer Box exakt kontrollieren soll.

Leider lassen sich ja border-width nicht mit Prozent bestimmen, sonst könnte ich ja sagen die Box soll 80% Breite haben also = border-left:0.1% + padding-left:2% + width:75.8% + padding-right:2% + border-right:0.1% und gut! Kann man die Maße em oder ex entsprechend in Prozent für solche Zwecke umrechnen? Im Beispiel hab ich halt mal 0.1em als 0.1% angenommen und das von der width der Boxes abgezogen, haut aber leider auch nicht ganz hin:

http://www.andredittmar.de/css_test.html <-- Geht im Moment nicht mit den IE, nur mit Mozilla getestet...

Vielleicht kann mir da jemand noch weiterhelfen?

Danke & good N8
AndreD

[Ingo Turski]

Hi,

Nach wie vor verstehe ich nicht wie ich mit relativen Angaben z.B. die Breite einer Box exakt kontrollieren soll.

gar nicht. Das ist ja das Prinzip der relativen Werte. Du bestimmst nur das Verhältnis der Elemente zueinander bzw. zum Inhalt. Und das kann sehr gut funktionieren im Sinne von wirklich flexiblen Layouts - aber eben nicht wenn man noch in Pixeln denkt.

Kann man die Maße em oder ex entsprechend in Prozent für solche Zwecke umrechnen?

Wie sollte sowas gehen? In Bezug auf die Breite eines Elementes sind diese Einheiten völlig unterschiedlich.
Vielleicht schaut Du auch mal auf http://www.1ngo.de/web/em.html?

freundliche Grüße
Ingo

[AndreD]

Hello Ingo,

gar nicht. Das ist ja das Prinzip der relativen Werte. Du bestimmst nur das Verhältnis der Elemente zueinander bzw. zum Inhalt. Und das kann sehr gut funktionieren im Sinne von wirklich flexiblen Layouts - aber eben nicht wenn man noch in Pixeln denkt.

Ja, mir war halt nicht klar das ich zwar den margin, padding und die width ins verhältnis setzen kann aber wohl nicht die Breite der Border. Das find ich eigentlich ein wenig inkonsequent :-) aber gut was soll man machen.

Wie sollte sowas gehen? In Bezug auf die Breite eines Elementes sind diese Einheiten völlig unterschiedlich.

Nur eine Vermutung um das Ganze auch bei der border-width anzuwenden, s.o.

Vielleicht schaut Du auch mal auf http://www.1ngo.de/web/em.html?

Ja habe ich und ist in meinen Bookmarks gelandet, danke dafür *g*

Grüsse Andre

[Ingo Turski]

Hi,

Ja, mir war halt nicht klar das ich zwar den margin, padding und die width ins verhältnis setzen kann aber wohl nicht die Breite der Border. Das find ich eigentlich ein wenig inkonsequent :-)

rein theoretisch sollte das eigentlich auch gehen, nur halt nicht mit Werten im Promille-Bereich.
Aber was spricht dagegen, dem Layout ein klein wenig "Luft" zu lassen, damit auch die paar px für border verkraftet werden?

freundliche Grüße
Ingo

[AndreD]

Hi Ingo,

Aber was spricht dagegen, dem Layout ein klein wenig "Luft" zu lassen, damit auch die paar px für border verkraftet werden?

Im Prinzip eigentlich nix, mir war bis dato nur nicht klar ob es funktionieren kann und wenn ja wie es funktioniert. Wenn ich das ganze anwende werde ich das Design auch so aufbauen um solche Konstellationen zu vermeiden.

Ich habe mich letztendlich schon ein wenig gewundert warum es nicht geht, da man im Boxmodell eigentlich jedes Attribut das die Box auszeichnet exakt bestimmen kann: Mit absoluten Werten sowieso, bei den relativen ebenfalls bis auf die Border...
Jetzt ist es halt so und ich habe in dem Punkt die Gewissheit dank Dir und Cheatah hat mich ermuntert öfter in die Docu beim W3C zu suchen :-)

Danke & Grüsse
AndreD