KS Webdesign - Der Blog » XHTML/CSS

Collapsing Margins

Klaus — Sat, 15 Jan 2011 11:20:34 +0000

….sind ein wichtiges CSS-Prinzip!

Collapsing Margins oder Zusammenfallende Ränder treten bei Elementen mit vertikal angrenzenden Margins auf. Der größere Abstand bleibt stehen, der Kleinere verschwindet.

Das ist oft ganz sinnvoll, damit sich z.B. bei mehreren Textabsätzen untereinander die Margins nicht zu unschönen Abständen aufaddieren.

Soweit ganz einfach. Leider ist es etwas komplizierter, was dazu führt, das der geneigte Webdesigner manchmal mit überraschenden Auswirkungen dieses Prinzips konfrontiert wird.

Margins erscheinen nicht da wo wir sie erwarten. Sie büxen aus und lassen sich ganz woanders nieder, oder sie fallen durch und sind scheinbar im Nirwana verschwunden.

Fangen wir aber mit dem einfachen Fall an und arbeiten uns dann langsam weiter vor

Hier findest du die collapsing-margins-anfang.htm zum Quelltext rauskopieren.

Im Browser schaut es momentan so aus:

Bitte CSS ergänzen:

p.erster-satz {
margin-bottom:16px;
}
p.zweiter-satz
margin-top:32px;
}

Ergebnis im Browser:

Das Ergebnis entspricht den Erwartungen. Der vertikale Abstand zwischen den Textabsätzen beträgt 32px.

Das könnt ihr ganz prima mit dem nützlichen Firefox-Addon MeasureIt nachmessen.

Die Hauptüberschrift benötigt ein bißchen Abstand nach oben.

Bitte die margins der Textabsätze entfernen und CSS ergänzen:

h1 {
margin-top:32px;
}

Ergebnis im Browser:

So hatten wir uns das aber nicht vorgestellt! Das Margin büxt aus (manche sprechen auch von einem durchfallenden Margin) und läßt sich zwischen der Bildschirmoberkante und dem oberen Anfang von #umhang nieder.

Wir könnten padding statt margin nehmen, um das zu verhindern. Da das aber nicht immer wünschenswert oder möglich ist, versuchen wir das Margin mit einem Zaun (border!!) einzusperren.

Bitte CSS ergänzen:

#umhang {
border:1px solid maroon;
}

Ergebnis im Browser:

Mmmh, der Zaun ist an der falschen Stelle. Den Hintergrund von #umhang wollten wir nicht sehen.

Bitte den Rahmen von #umhang entfernen und CSS ergänzen:

#kopf {
border:1px solid navy;
}

Ergebnis im Browser:

So ist es richtig!

Jetzt wollen wir noch dem zweiten Textabsatz ein margin gönnen, damit es ringsum eine fett, grüne Umrandung bekommt.

Bitte CSS ergänzen:

p.zweiter-satz {
margin:32px;
}

Ergebnis im Browser:

Fast! An drei Seiten ist es okay, aber das untere Margin ist durchgeplumst.

padding ist nicht wünschenswert, weil wir ja die fette, grüne Umrandung des Inhaltscontainers brauchen. Deshalb setzen wir wieder einen Zaun, um das Durchplumsen des unteren margins zu verhindern

Bitte CSS ergänzen:

#inhalt {
border:1px solid green;
}

Ergebnis im Browser:

So soll es aussehen!

Das war noch nicht alles. Margins kann z.B. auch mit sich selbst kollabieren, oder durchfallen und kollabieren…und…und.

Neben padding und border ist auch ein Clearing geeignet, um Collapsing Margins zu verhindern.

Die Margins von Elementen mit overflow:auto/scroll/hidden kollabieren nicht mit ihren Nachfahren.

Die Margins von Elementen mit float:left/right; oder position:absolute/fixed; oder display:inline-block; kollabieren nicht mit ihren Nachfahren und auch nicht mit ihren Nachbarn.

Wenn ihr es ganz genau wissen wollt empfehle ich euch entweder das Studium des entsprechenden Absatzes der Spezifikation, oder ihr lest, was das Buch Fortgeschrittene CSS-Techniken dazu sagt.

Transparenz von Containern im IE

Klaus — Thu, 06 Jan 2011 13:25:02 +0000

In dem Artikel geht es um die Transparenz von Containern nicht von Grafiken oder Bildern. Überraschenderweise zeigt hier der IE 8 gewisse Ausfallerscheinungen.

Hier findest du die transparenz-container-anfang.htm zum Quelltext rauskopieren.

Die benötigte Grafik kannst du dir hier holen: transparenz-container-grafik.htm

Die ul hat opacity:0.8; bekommen und wir haben im FF eine schöne Transparenz der Navigation. Den verschiedenen Versionen des IE helfen wir mit diversen Filtern auf die Sprünge.

Bitte den Conditional Comment ergänzen:

/* Transparenz für den IE 6 */
* html ul {
filter:alpha(opacity=80);
}
/* Transparenz für den IE 7 */
*+html ul {
filter:alpha(opacity=80);
}
/* Transparenz für den IE 8 */
ul {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"
}

Klappt ja soweit im IE 6 und IE 7.

Der IE 8 zeigt auch die Transparenz aber überraschenderweise keinerlei Hovereffekt mehr. Damit hätte ich jetzt nicht gerechnet.

Das zu beheben erfordert ein paar Umbauarbeiten:

Der background für die ul wird gestrichen und a zugewiesen. Den Filter für den IE 8 bekommen a und strong und nicht die ul.

Bitte streichen:

ul {
background:#444;
}

Bitte CSS ergänzen:

a {
background:#444;
}

Bitte im Conditional Comment beim IE 8-Filter ul gegen a, strong austauschen:

/* Transparenz für den IE 8 */
a, strong {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"
}

So schaut es besser aus!

Mein besonderer Dank gilt Andreas ohne dessen Kommentar der Artikel so nicht möglich geworden wäre!

CSS 3-Eigenschaften testen

Klaus — Wed, 08 Sep 2010 14:06:18 +0000

Anleitungen zum Verständnis der CSS 3-Eigenschaften gibt es schon einige. Websites wo diese Eigenschaften erklärt werden auch.Mein Versuch euch CSS 3 näher zu bringen ist etwas anders:

Zunächst habe ich eine kleine Website mit dem Titel Der IE muss draußen bleiben erstellt und hochgeladen.

Berücksichtigt wurde die korrekte Darstellung im Firefox. Um Safari und Opera habe ich mich auch nicht gekümmert. Der Club ist also nur für FF-Mitglieder uneingeschränkt zugänglich.

Um Safari zu berücksichtigen fügt ihr einfach an geeigneter Stelle -webkit- ein, oder tauscht das -moz- dagegen aus.

Für unsere Operas klemmt ihr das -moz- und/oder -webkit- einfach ab oder ergänzt eine Zeile ohne das.

In der CSS-Datei habe ich kurze Erklärungen zu den CSS 3-Features per Kommentar über den entsprechenden Codezeilen eingefügt.

Damit ihr unbeschwert und ohne langatmige Erklärungen rumtesten könnt, habe ich hier einen gezippten Ordner mit der kompletten Website zum Download hinterlegt.

Viel Spaß damit!

Navi includen – ohne Deppenlink

Klaus — Wed, 23 Dec 2009 14:33:11 +0000

Wer kennt das nicht: Die Navigation einer bestehenden Site ändert sich und nun muss die Änderung bei wirklich jeder Seite eingetragen werden. Nervig und zeitaufwändig!

Eine Menge Zeit spart man sich wenn man die navi per include einbindet. Diese Methode ist relativ simpel und effektiv. Man führt die Änderung an einer Datei durch und fertig.

Man hat zwar noch den Deppenlink (Link der auf sich selber zeigt), aber was soll’s.

In diesem, auch für PHP-Vollpfosten geeigneten Tutorial beschreibe ich euch, wie ihr die navi includet und trotzdem den Deppenlink vermeidet.

So sieht euer Menü normalerweise aus:

- Startseite
- Leistungen
- Team

Wie es sich gehört ist das Menü eine ungeordnete Liste. Bei der aktuellen Seite wurde a gegen strong ausgetauscht, um den Deppenlink zu vermeiden.

Um die navi zu includen, benenne ich die beteiligten Dateien von .htm in .php um. Aus der index.htm wird also index.php, usw.

Wo die ungeordnete Liste mit dem Menü stand trage ich folgendes ein:

Den Inhalt der navi.php, die anstelle von dem, was da vorher stand eingebunden wird werfe ich euch mal direkt vor die Füße:


$uri = $_SERVER['REQUEST_URI'];
$navi = array(
'/'        => 'Startseite',
'/leistungen'    => 'Leistungen',
'/team' => 'Team',
);
echo ''."\n";
foreach ($navi as $href => $text)
{
echo '
';
if ($uri == $href)
{
echo ''.$text.'';
}
else
{
echo ''.$text.'';
}
echo '
'."\n";
}
echo '
'."\n\n";
?>


Um zu verstehen was wo eingetragen wird, lohnt es sich einmal etwas genauer hinzuschauen.
Zuerst wird in einem array die Adresse root-relativ eingetragen, d.h. es wird vom Wurzelverzeichnis des Webservers ausgegangen, was ja i.d.R. immer / ist.
Rechts daneben steht in Hochkommata der Text des Menüpunktes.
Wenn die angewählte URL gleich der URL des Menüpunktes ist wird a gegen strong ausgetauscht, ansonsten über die else der Link hingeechot.
Das array kann beliebig erweitert werden, je nachdem wieviel Menüpunkte die Navigation hat.
Wenn ihr mehrere Menüs auf eurer Seite habt, braucht ihr z.B. eine topnavi.php, eine seitennavi.php und/oder eine fuss-navi.php. Der Inhalt ist bis auf die Punkte des arrays gleich, ihr müßt nur die richtige PHP-Datei an der richtigen Stelle includen.
Das ist die einfachste Art eines Menüs, welches includet wird. Da ich euch noch mehrere Varianten zur Verfügung stellen will, habe ich alles zum Download in den Ordner include.zip gepackt.
Die enthaltene navi-normal.php ist die hier vorgestellte Variante.
Bei der navi-title.php gibt es zusätzlich den title-Tag für a
Bei der navi-klasse.php hat a noch eine zusätzliche Klasse und die navi-id.php hält für jeden Listenpunkt eine id bereit.
Funktioniert problemlos mit statischen Seiten. Ob das mit einem CMS so ohne weiteres geht glaube ich eher nicht.
Wenn ihr das Gleiche für eine WordPressinstallation wollt, kann ich euch den schönen Artikel von Thomas dazu ans Herz legen.
Von Markus stammt die Ursprungsversion des Scriptes. Heiko hat es verfeinert und David hat mir beim Verstehen des Scriptes geholfen.
Vielen Dank dafür euch dreien!
Ihr habt mir abgesehen von diesem Script schön öfter geholfen. Auch dafür nochmal an dieser Stelle meinen besonderen Dank! Ich habe viel von euch gelernt.



Fixierte Positionierung
Klaus — Thu, 10 Dec 2009 14:52:59 +0000
Zu absoluter Positionierung  gibt es schon einen Artikel, zur relativen Positionierung ebenfalls.
Jetzt fehlt noch die fixierte Positionierung, die im Grunde eine Unterabteilung der absoluten Positionierung ist.
D.h. es gelten fast die gleichen Regeln wie für position:absolute;, außer das dort immer body als Bezugspunkt für Positionsangaben gilt. Außerdem kennt der IE 6 position:fixed; nicht und ignoriert es deshalb.
Hier findest du die position-fixed-anfang.htm zum Quelltext rauskopieren.
Bilder gibt es diesmal leider nicht, aber ich denke diesmal geht es auch ohne.
Bitte CSS ergänzen:


.fixed  {
position:fixed;
left:40px;
top:20px,
}


Wenn ihr jetzt im Browser nach unten scrollt, kommt das fixierte Element mit. Setzt ihr die Positionsangaben auf null drängelt sich das fixierte Element ganz nach oben links, kommt aber beim Scrollen immer noch mit.
Beim IE 6 passiert nix. Das fixierte Element kommt einfach nicht mit.
Zum einen kann man den IE6 dabei einfach ignorieren, es gäbe allerdings z.B. die Möglichkeit ihm per Javascript auf die Sprünge zu helfen.
Oder ihr verzichtet auf position:fixed;.



Relative Positionierung
Klaus — Thu, 10 Dec 2009 13:38:53 +0000
Angefangen habe ich mit diesem Artikel zur absoluten Positionierung. Fortsetzen will ich mit position:relative;.Mit fixierter Positionierung wird es enden.
Hier findest du die position-relative-anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß.
Bitte CSS ergänzen:


#green  {
position:relative;
}


Das ergibt folgendes Bild im Browser:

Nun ja, nicht sehr spektakulär.
Genaugenommen gibt es auch nach intensivem Studium keinen Vorher/Nachher-Effekt.
Durch position:relative; haben wir die Box zwar aus dem normalen Textfluß entfernt, sie hockt aber immer noch am gleichen Platz.
Bitte CSS ergänzen:


#green  {
left:200px;
top:50px;
}


Das ergibt folgendes Bild im Browser:

Ihr seht, das die grüne Box die 200px von links und 50px von oben ausgehend von ihrem alten Standpunkt aus gemessen hat, einen Zaun um den alten Platz gelegt hat, damit während ihrer Abwesenheit keine andere Box dahin kann und dann erst an ihren neuen Platz marschiert ist.
Mit position:relative; könnt ihr die Reihenfolge auf der z-Achse verändern. Infos dazu bietet dieser Artikel.
Absolut positionierte Boxen orientieren sich bei Positionsangaben an ihren relativ positionierten Vorfahren und nicht mehr an body.
Außerdem kann man öfter mal Darstellungsfehler im Internet Explorer beseitigen, wenn man die entsprechende Box relativ positioniert.
Manchmal wird allerdings durch relative Positionierung einer Box erst ein Darstellungsfehler im IE ausgelöst.
Das heißt in jedem Fall, das sorgfältiges Testen vonnöten ist, wenn man relativ positioniert.



Absolute Positionierung
Klaus — Wed, 02 Dec 2009 10:52:27 +0000
Erklärungen für position:absolute; findet man im Netz viele. Manche beschränken sich auf wenige, dürre Sätze, anderen wiederrum sind ein paar Bilder zur Verdeutlichung beigefügt.
Wenn es um Erklärungen geht, wo man anhand einer Beispieldatei sofort mit basteln kann wird die Luft schon ziemlich dünn.
Deshalb sorge ich mit dem folgenden Tutorial dafür, dass die Luft in dem Bereich a weng dicker wird.
Legen wir direkt los:
Hier findest du die position-absolute-anfang.htm zum Quelltext rauskopieren.
Im Browser schaut es so aus:

Drei farbige Boxen in einer hellgrauen Box untereinander. Alles ist im normalen Textfluß. Für alle gilt position:static;. Das ist die Standardeinstellung (default-Einstellung) der Browser, die immer dann zum Tragen kommt, wenn man nix gemacht hat.
Das position:static; wird vom Browser praktisch unsichtbar eingefügt, ohne das er uns bescheid sagt.
Jetzt wollen wir den Textfluß mal durcheinanderwirbeln indem wir ein Element positionieren und damit die Standardeinstellung der Browser überschreiben.
Bitte CSS ergänzen:


#green  {
position:absolute;
}


Im Browser schaut es so aus:

Umpff! Die rote Box ist weg.
Egal, wir haben die Möglichkeit für die Positionierung Werte zu vergeben.
Bitte CSS ergänzen:


#green  {
left:0;
top:0;
}


Das ergibt folgendes Bild im Browser:

Aha, die rote Box hat sich also nur hinter der grünen versteckt. Allerdings springt die grüne Box nach ganz oben links ins Browserfenster, wenn wir als Wert für die Positionierung jeweils null eintragen.
Das heißt erst mal, das sich die absolut positionierte Box an body orientiert wenn man Werte für top und left eingibt.
Die nächste Erkenntnis die sich uns aufdrängt ist die, dass die absolute Box von den anderen Boxen ignoriert wird. Die anderen Boxen tun so als wäre die absolute Box nicht vorhanden.
Also sind absolut positionierte Elemente komplett aus dem normalen Textfluß raus.
Wenn sich die absolute Box immer an body orientiert ist das doch ganz schön nervig, weil man immer erst die richtigen Werte ausbaldowern muss, um eine Darstellung an der gewünschten Stelle zu erreichen.
Das geht einfacher:
Bitte CSS ergänzen:


#wrapper  {
position:relative;
}
#green  {
left:50px;
top:50px;
}


Das ergibt folgendes Bild im Browser:

Wenn der umgebende Container (#wrapper) position:relative; bekommt orientiert sich die absolute Box daran und nicht mehr an body.
Zu beachten ist dabei, dass die relative Box HasLayout für den IE 6 u. 7 bekommen sollte, da es passieren kann, dass die Positionsangaben sonst evtl. nicht richtig ausgeführt werden.
Für Anfänger ist das durchaus verführerisch alle Elemente mit position:absolute; festzutackern, um so die gewünschte Darstellung zu erhalten.
Okay, dann nehmt mal position:relative; weg und setzt die Werte für top/left auf null. Danach verkleinert ihr mal das Browserfenster stark.
Ihr seht dann hoffentlich was ich meine.
position:absolute; sollte man mit Bedacht einsetzen, denn damit ändert ihr wie gesehen auch die Stapelreihenfolge auf der z-Achse, d.h. zu euch hin oder von euch weg.
Wenn ihr an weiteren Infos über Stapelung interessiert seid könnte dieser Artikel von mir noch in Frage kommen.
Was gibts noch zu sagen?
Es kann vorkommen das absolut positionierte Boxen Im IE 6 u. 7 nicht angezeigt werden, wenn sie im Quelltext unmittelbar neben einem Float liegen.
Abhilfe schafft entweder ein leeres divzwischen dem Float und der absoluten Box in den Quelltext zu schreiben, oder entweder den Float oder die absolute Box in ein div zu wickeln. Entscheidend dabei ist die unmittelbare Nachbarschaft von Float und absoluter Box aufzulösen.
Erhellendes dazu findet ihr in dieser Untersuchung von Bruno Fassini.
Zur relativen Positionierung gibt es mittlerweile schon einen Artikel.
Die fixierte Positionierung habe ich auch nicht vergessen.



Listenzeichen
Klaus — Mon, 05 Oct 2009 14:56:02 +0000
Listenzeichen sind ein leidiges Thema.
Es ist ja optisch ganz nett, wenn die Listenpunkte einer ungeordneten Liste vom Browser automatisch mit einem Listenzeichen versehen werden. Dadurch wird die Liste optisch noch einmal hervorgehoben.
Dumm ist nur wenn die Listenzeichen in jedem Browser anders aussehen. Ganz übel wird es dann, wenn sie im Internet Explorer zu sehen sind im Firefox aber nicht, oder umgekehrt.
Was tun sprach Zeus?
Ihr könntet list-style-position auf inside setzen (beim Firefox ist es per Default-Einstellung outside), aber die Punkte sind im Internet Explorer trotzdem klein, dünn und kraftlos.
Es gibt einen besseren Weg:
Erst mal schalten wir die Listenzeichen mit list-style-type:none; alle aus.
Dann erstellen wir mit einem Grafikprogramm ein eigenes Listenzeichen und binden das als Hintergrundgrafik ein.
Bitte CSS ergänzen:


li  {
list-style-type:none;
}


Der Stand im Browser:

Die erstellte Grafik: 
Die Grafik hat die Maße 14x14px und ist ein gelber Punkt. Nicht spektakulär, aber für unsere Zwecke mehr als ausreichend.
Nun binden wir die Grafik als HG-Grafik ein. Dazu bilden wir eine Klasse die wir li zuweisen.
Aussehen des Quellcodes:



Erster Listenpunkt
Zweiter Listenpunkt
Dritter Listenpunkt
Vierter Listenpunkt oder watt?!



Bitte CSS ergänzen:


.listenzeichen  {
background:url(listenzeichen.png) no-repeat left top;
}


Stand im Browser:

Naja, da ist zwar was gelbes, aber an der falschen Stelle.
Bitte CSS ergänzen:


.listenzeichen  {
background:url(listenzeichen.png) no-repeat left 0.3em;
padding-left:1.5em;
}


Stand im Browser:

Man kann jetzt darüber streiten, ob die HG-Grafik im Internet Explorer 0.1em zu tief sitzt und das dann per Conditional Comment korrigieren, aber das müßt ihr selbst entscheiden.
Auf jeden Fall erhaltet ihr so Listenzeichen, die browserübergreifend gleich aussehen und auch leicht zu positionieren sind.
Außerdem ist der Text wenn der Listenpunkt mehr als einzeilig ist sauber eingerückt, was bei den autom. Listenzeichen oder list-style-image nicht der Fall ist.



Faux Columns Liquid
Klaus — Thu, 24 Sep 2009 14:37:30 +0000
Die Faux Columns Technik für feste Layouts hatte ich schon in einem Artikel erklärt.
Aber wie erzeugen wir gleichlange Spalten für flüssige Layouts, d.h. wo die Spaltenbreiten

Prozentwerte sind (rechts 25%, mitte 50%, links 25% z.B.) ?
Das ist nicht viel schwieriger als die normale Faux Columns Technik.
Hier findest du die fauxcolumns_liquid_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: fauxcolumns_liquid_grafik.htm
Achtung!! Die zweite Grafik seht ihr erst, wenn ihr nach rechts scrollt
Im Browser schaut es noch so aus:

Die XHTM-Struktur ist folgende:




Liquid Faux Columns



........


.............


..............


<-- Ende div#zentral -->
<-- Ende div#umhang -->


div#umhang umschließt alle Bereiche innerhalb von body.
Die drei Spalten #links,#textbereich und #links werden vom div#zentral umschlossen.
Unmittelbar vor dem Ende von div#zentral werden die später floatenden Spalten mit der

 gecleart.
Lange Rede, kurzer Sinn. Jetzt wird gestaltet!
Bitte CSS ergänzen:


#links  {
float:left;
width:25%;
}


#textbereich  {
float:left;
width:46%;
margin-left:2%;
}


#rechts  {
float:right;
width:25%;
}


Die drei Spalten sind schon mal nebeneinander, aber das Ganze ist noch ziemlich grau.
Habt ihr euch nicht gewundert, das die mittlere Spalte (div#textbereich) nur 46% Breite und ein margin-left von 2% hat?
Prozentwerte für Spaltenbreiten können so manchen Browser ins Trudeln bringen. Wenn alles auf Kante genäht ist kann es leicht zu Rundungsfehlern kommen und die Floats brechen dann eventuell um.
Deshalb lasse ich da immer etwas Luft. Die margin-left:2%; brauche ich damit der Inhalt dann auch wirklich mittig sitzt.
Laßt uns jetzt mal die Grafiken einbauen.
Bitte CSS ergänzen:


body  {
background:#dedede url(linke_seite.png) repeat-y 25% 0;
}


#umhang  {
background: url(rechte_seite.png) repeat-y 75% 0;
}


Da pro Element nur eine Hintergrundgrafik erlaubt ist und wir aber zwei Grafiken einbauen müssen hat body die linke Spaltengrafik und div#umhang die rechte Spaltengrafik bekommen.
Zwischenstand im Browser:

Interessant!
Die rechte Spaltengrafik, die ja div#umhang zugewiesen wurde, geht nicht bis nach unten.
div#umhang braucht min-height:100%;. Damit das auch klappt brauchen body und html eine Höhe von 100%. Warum habe ich in diesem Artikel ausführlich erklärt.
Es muss auch noch etwas padding vergeben werden, damit der Text nicht in die Schatten hineinragt.
Bitte CSS ergänzen:


html,
body  {
height:100%;
}


#umhang
height:100%;
}


#links p  {
padding:1em 1.5em 0 1em;
}


#textbereich p  {
padding:1em;
}


#rechts p  {
padding:1em 1em 0 2em;
}


Ergebnis im Browser:

Schaut doch schon recht ordentlich aus.
Der IE 6 kennt min-height leider nicht, deshalb braucht er per Conditional Comment height, das er fälschlicherweise wie min-height behandelt.
Der IE 7 hat einen Fehler beim Seitenzoom. Um das zu beheben bekommt html die linke Spaltengrafik noch einmal zugewiesen.
Bitte den Conditional Comment ergänzen:





Bei den Grafiken ist der Bereich, der nicht zum Einfärben der Spalte benötigt wird transparent.
Da hier das div#umhang über die gesamte Breite des sichtbaren Bereichs geht, wird die Transparenz benötigt, damit der Hintergrund von body (linke Spalte!!) nicht verdeckt wird.
Das wäre es normalerweise, aber fragt ihr euch nicht auch warum z.B. die HG-Grafik für die linke Seite ganz links anfängt und nicht nach 25% von links aus gesehen?
Wenn ihr Hintergrundbilder mit Prozentwerten positionieren wollt, wird der diesem Prozentwert entsprechende Punkt des Bildes am entsprechenden Punkt des Elementes befestigt.
Das Ganze funktioniert bei Prozentwerten für die Positionierung des HG-Bildes also anders wie wir es normalerweise gewohnt sind.
Eine kleine Beispielzeichnung zur Veranschaulichung:

body geht über die ganze Breite des Viewports und hat die untere Grafik der Beispielzeichnung zugewiesen bekommen.
Wir haben für die Positionierung des HG-Bildes background-position:25% 0; notiert, also 25% von links.
Nun wird aber nicht die linke obere Ecke des HG-Bildes an diesen Punkt genagelt, sondern wir gehen mit dem Finger im HG-Bild 25% (650px) nach rechts und nageln genau diesen Punkt im Viewport 25% vom linken Rand aus gesehen fest.
div#umhang geht auch über die ganze Breite des Viewports und hat die obere Grafik der Beispielzeichnung zugewiesen bekommen.
Wir haben für die Positionierung des HG-Bildes background-position:75% 0; notiert, also 75% von links.
Nun wird aber nicht die linke obere Ecke des HG-Bildes an diesen Punkt genagelt, sondern wir gehen mit dem Finger im HG-Bild 75% (1950px) nach rechts und nageln genau diesen Punkt im Viewport 75% vom linken Rand aus gesehen fest.
Inspiriert von:Fortgeschrittene CSS-Techniken



Runde Ecken 3
Klaus — Tue, 15 Sep 2009 05:33:26 +0000
Zwei Artikel zu Boxen mit abgerundeten Ecken habe ich bereits verfasst:

Runde Ecken 1 und Runde Ecken 2.
Im dritten Artikel wird die Box mit runden Ecken am Ende voll flexibel sein, d.h. sie hält einer Schriftvergrößerung von sechs Stufen stand.
Hier findest du die rundeecken3_anfang.htm zum Quelltext rauskopieren.
Die benötigten Grafiken kannst du dir hier holen: rundeecken3_grafik.htm
Bitte denkt daran, den Hintergrund der Ecken nicht transparent zu machen, sondern in der Farbe des Hintergrundes vom Container, wo die Grafik drinhockt!
Zur Verdeutlichung habe ich die vier Grafiken mal in einem Tableau zusammengefasst:

In diesem Fall sind es vier Grafiken, d.h. wir benötigen leider zusätzliche Elemente.
Deshalb schauen wir uns erstmal den Quelltext an:





Box mit runden Ecken
Diese Box ist..........usw.





Zwei weitere Elemente sind hinzugekommen:
div.container_innen und div.container_ganzinnen.
Die Maßeinheiten habe ich konsequent in em abgeändert, damit die Box auch bei Textvergrößerung in alle Richtungen gleichmäßig mitwächst.
Bitte CSS ergänzen:


.container  {
background:#b2f8a8 url(rund3_untenlinks.gif) no-repeat left bottom;
}


.container .container_innen  {
background: url(rund3_untenrechts.gif) no-repeat right bottom;
}


.container .container_ganzinnen  {
background: url(rund3_obenlinks.gif) no-repeat left top;
}


.container h2  {
background: url(rund3_obenrechts.gif) no-repeat right top;
padding-top:0.3em;
}


.container p  {
padding: 0.5em;
}


Ergebnis im Browser:

Ist ja fast zu einfach. Was kann denn dabei schiefgehen?
Einiges!
In diesem Beispiel habe ich padding erst definiert nachdem ich die Grafiken eingebunden habe.

Mit margin würde ich es genauso machen.
Ganz schnell sind nämlich statt vier runden Ecken z.B. nur eine oder drei da. Dann geht das wilde Rumgefuchtel mit verschiedenen paddings/margins los, die man vielleicht ja schon definiert hatte, bevor man die Grafiken eingebunden hat.
Deshalb bin ich da erstmal vorsichtig, setze alle paddings und margins für die Box auf null und ergänze dann die Abstände mit ständiger Zwischenkontrolle im Browser vorsichtig.
Außerdem verwechselt man beim Einbinden der Grafiken z.B. schnell mal left bottom mit right bottom oder left top mit left bottom, usw..
Ein wenig muss man auch schauen welche Grafik man welchem Element zuteilt, damit es nicht zu unliebsamen Überraschungen kommt.
Wie immer sehr hilfreich bei der Fehlersuche ist das Firefox Addon Firebug, hier ein deutsches Tutorial dazu.