Muckel1986
Erfahrenes Mitglied
Guten Abend zusammen,
bin dabei endlich mein eigenes Blog-Layout neu zugestalten, nach dem ein anderes Projekt abgeschlossen ist. Doch nun bin ich mal wieder bei dem Problem mit "runden Ecken" gelandet. Bis lang habe ich es so gelöst:
Ein Umgebenes DIV, mit dem man dann z.B. die Breite eingrenzen kann oder ähnliches. Dann folgen die DIVs für die Rundungen und für den eventuellen Rahmen zwischen den Ecken. Das DIV inahlt soll dafür sorgen, dass der Text genügend Abstand zu den Rahmen hat. Der HTML-Aufbau schaut dann so aus:
Die CSS-Eigenschaften dazu so:
Dabei stehen die Abkürzungen für folgendes: ol = oben-links / or = oben-rechts / ul = unten-links / ur = unten-rechts / om = oben-mitte / um = unten-mitte / ml = mitte-links / mr = mitte-rechts
Diese Lösung hat bis lang auch gut funktioniert und ist laut dem w3c auch valid. Bis lang habe ich Grafiken genommen, die mir so zugefallen sind, doch bei meinem eigenen, neuen Layout will ich alles korrekt machen. Im Grunde möchte ich mir eine Art "Box" basteln, wie sie bei dem Hauptmenü auf der Seite des DPB zu sehen ist.
Mein Anfang schaut so aus:
Dieser "Box" habe ich dann auch schon den roten Rahmen gegeben und die größe der Überschrift und des Inhaltes angepasst:
Doch ich habe dabei noch ein Problem. Und zwar habe ich eine Liste die ich nutze - die Punkte der Aufführungen werden leider außerhalb dieser Box dargestellt. Und das zweite Problem ist, dass mir da noch eine Idee für den Ansatz fehlt.
Die Rundungen könnte ich wieder wie bei dem ersten Beispiel erstellen, doch das bringt mich aktuell nicht weiter. Denn ich möchte in dieser "Box" zum Beispiel zwei verschiene Menüs anbieten, die durch eine Überschrift getrennt sind. Der Überschrift habe ich ja schon eine andere Schriftfarbe und die Hintergrundfarbe im Farbton des Rahmens gegeben. So hat man schon eine optische Abgrenzung. Schön wäre nun, wenn man eben bei den "Überschriften" eben wie bei der "Vorlage" eine Rundung hätte, da ich jenes schöner finde.
Da dies so vielleicht nicht umsetzbar ist, dachte ich, dass ich es so mache, wie bei der funktionierenden Variante, die ich oben bereits erwähnt habe. Dann ändert sich aber der HTML-Aufbau so, dass man für jede "Abteilung" so eine "Box" erzeugt. Denn dann könnte man wiederum mit den DIVs die vier ecken anordnen. Der Aufbau würde dann so aussehen:
Nur leider ist es so, dass die Grafiken dann von der "Überschrift" und dem DIV des Inhaltes überlagert werden und man sie daher nicht sieht. Raus gefunden dass sie überlagert werden habe ich, da ich den Bereichen einen Außenabstand gegeben habe.
Setzte ich die DIV-Bereiche zum Beispiel erst nach der Überschrift, so werden sie leider auch erst unter jener angezeigt, was ich so nicht möchte. Auf den beiden Bildern im Anhang kann man das Problem sehen oder alternativ auf meiner Test-Seite. Würde mich freuen, falls jemand eine Idee zu diesem Problem kennt und mir somit sagen kann, wie ich es lösen kann.
Liebe Grüße
Muckel
bin dabei endlich mein eigenes Blog-Layout neu zugestalten, nach dem ein anderes Projekt abgeschlossen ist. Doch nun bin ich mal wieder bei dem Problem mit "runden Ecken" gelandet. Bis lang habe ich es so gelöst:
Ein Umgebenes DIV, mit dem man dann z.B. die Breite eingrenzen kann oder ähnliches. Dann folgen die DIVs für die Rundungen und für den eventuellen Rahmen zwischen den Ecken. Das DIV inahlt soll dafür sorgen, dass der Text genügend Abstand zu den Rahmen hat. Der HTML-Aufbau schaut dann so aus:
HTML:
<div class="box">
<div class="om"><div class="um"><div class="ml"><div class="mr"><div class="ol"><div class="or"><div class="ul"><div class="ur">
<div class="inhalt1"><strong>erste Box</strong>
<p>Ein Absatz...</p>
</div>
</div></div></div></div></div></div></div></div>
</div>
Code:
.box {
margin:0.25em 0em 0.25em 0em;
padding:0em;
background-color:#FFFFFF;
border:none;
}
.inhalt1 {margin:0em; padding:0.25em; }
/* Rundungen */
.ol { background:url(Bilder/rundungen/01/ol.png) top left no-repeat; }
.or { background:url(Bilder/rundungen/01/or.png) top right no-repeat; }
.ul { background:url(Bilder/rundungen/01/ul.png) bottom left no-repeat; }
.ur { background:url(Bilder/rundungen/01/ur.png) bottom right no-repeat; }
.om { background:url(Bilder/rundungen/01/om.png) top center repeat-x }
.um { background:url(Bilder/rundungen/01/um.png) bottom center repeat-x }
.ml { background:url(Bilder/rundungen/01/ml.png) top left repeat-y }
.mr { background:url(Bilder/rundungen/01/mr.png) top right repeat-y }Dabei stehen die Abkürzungen für folgendes: ol = oben-links / or = oben-rechts / ul = unten-links / ur = unten-rechts / om = oben-mitte / um = unten-mitte / ml = mitte-links / mr = mitte-rechts
Diese Lösung hat bis lang auch gut funktioniert und ist laut dem w3c auch valid. Bis lang habe ich Grafiken genommen, die mir so zugefallen sind, doch bei meinem eigenen, neuen Layout will ich alles korrekt machen. Im Grunde möchte ich mir eine Art "Box" basteln, wie sie bei dem Hauptmenü auf der Seite des DPB zu sehen ist.
Mein Anfang schaut so aus:
HTML:
<div class="box2">
<h1>Ein Menü</h1>
<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
<li>Punkt 5</li>
</ul>
</div>
Code:
.box2 {
display:block;
margin: 0.5em 10% 0.5em 10%;
padding:0em;
border:0.20em solid #660000;
}
.box2 h1 {
margin:0em;
padding:0em;
text-align:center;
font-size:1.2em;
color:#FFFFFF;
background-color:#660000;
}
.box2 {font-size:0.9em;}Doch ich habe dabei noch ein Problem. Und zwar habe ich eine Liste die ich nutze - die Punkte der Aufführungen werden leider außerhalb dieser Box dargestellt. Und das zweite Problem ist, dass mir da noch eine Idee für den Ansatz fehlt.
Die Rundungen könnte ich wieder wie bei dem ersten Beispiel erstellen, doch das bringt mich aktuell nicht weiter. Denn ich möchte in dieser "Box" zum Beispiel zwei verschiene Menüs anbieten, die durch eine Überschrift getrennt sind. Der Überschrift habe ich ja schon eine andere Schriftfarbe und die Hintergrundfarbe im Farbton des Rahmens gegeben. So hat man schon eine optische Abgrenzung. Schön wäre nun, wenn man eben bei den "Überschriften" eben wie bei der "Vorlage" eine Rundung hätte, da ich jenes schöner finde.
Da dies so vielleicht nicht umsetzbar ist, dachte ich, dass ich es so mache, wie bei der funktionierenden Variante, die ich oben bereits erwähnt habe. Dann ändert sich aber der HTML-Aufbau so, dass man für jede "Abteilung" so eine "Box" erzeugt. Denn dann könnte man wiederum mit den DIVs die vier ecken anordnen. Der Aufbau würde dann so aussehen:
HTML:
<div class="box2"><div class="ol"><div class="or"><div class="ul"><div class="ur">
<h1>Ein Menü</h1>
<div class="inhalt1"><ul>
<li>Punkt 1</li>
<li>Punkt 2<ul>
<li>Punkt 2.1</li>
<li>Punkt 2.2</li>
<li>Punkt 2.3</li></ul></li>
<li>Punkt 3</li>
<li>Punkt 4<ol>
<li>Punkt 4.1</li>
<li>Punkt 4.2</li>
<li>Punkt 4.3</li></ol></li>
<li>Punkt 5</li>
</ul>
Normaler Text</div>
</div></div></div></div></div>
<div class="box2"><div class="ol"><div class="or"><div class="ul"><div class="ur">
<h1>zweites Menü</h1>
<div class="inhalt1"><ol>
<li>Punkt 1</li>
<li>Punkt 2<ol>
<li>Punkt 2.1</li>
<li>Punkt 2.2</li>
<li>Punkt 2.3</li></ol></li>
<li>Punkt 3</li>
<li>Punkt 4<ul>
<li>Punkt 4.1</li>
<li>Punkt 4.2</li>
<li>Punkt 4.3</li></ul></li>
<li>Punkt 5</li>
</ol>
Normaler Text</div>
</div></div></div></div></div>Nur leider ist es so, dass die Grafiken dann von der "Überschrift" und dem DIV des Inhaltes überlagert werden und man sie daher nicht sieht. Raus gefunden dass sie überlagert werden habe ich, da ich den Bereichen einen Außenabstand gegeben habe.
Setzte ich die DIV-Bereiche zum Beispiel erst nach der Überschrift, so werden sie leider auch erst unter jener angezeigt, was ich so nicht möchte. Auf den beiden Bildern im Anhang kann man das Problem sehen oder alternativ auf meiner Test-Seite. Würde mich freuen, falls jemand eine Idee zu diesem Problem kennt und mir somit sagen kann, wie ich es lösen kann.
Liebe Grüße
Muckel
