✔ Dreispaltiges Template macht Probleme

Status
Nicht offen für weitere Antworten.
LuvShining

LuvShining

Erfahrenes Mitglied
Hallo,

und weiter geht es mit der Formatierung des neuen Layouts [YAML].

Ein netter Einfall bei YAML war der Einsatz von Subtemplates für z.B. Dreispaltigkeit. Was mich nun aber auch an dieser Stelle wieder wundert ist die Tatsache, dass meine 3. Spalte immer zu schmal erscheint.
Im FF sieht alles gut aus. Nur mein IE zeigt mir die Ansicht (siehe Bild) mit überhängenden Buchstaben an. Wenn ich den Text mal durch Bilder ersetze, knallt das dritte Bild immer eine Zeile nach unten.

Liegt der Fehler wieder in meiner Browseransicht des IEs oder sieht das bei euch auch "falsch/fehlerhaft" aus?

Code: 
<!-- Subtemplate 33/33/33 -->
<h4>Überschrift<a href="#">Übersicht</a></h4>
<!-- Zeile 1 -->
<div class="subcolumns">
<div class="c33l">
<div class="subcl">1. Spaltenbreite</div>
</div>
<!-- Zeile 2 -->
<div class="c33l">
<div class="subc">2. Spaltenbreite</div>
</div>
<!-- Zeile 3 -->
<div class="c33r">
<div class="subcr">3. Spaltenbreite</div>
</div>
</div><!-- Subtemplate 33/33/33: Ende -->

Code: 
.subcolumns { 
width: 100%;
padding: 0 1px 0 1px; 
margin: 0 -1px 0 -1px; 
overflow:hidden;
}
		
	.c50l, .c50lneutral, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; overflow: hidden;}
	.c50r, .c50rneutral, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; overflow: hidden;}
	
	.c33l, .c33r { width: 33.333%; }

	.subc  { padding: 0 0.5em 0 0.5em; overflow: hidden; }
	.subcl { padding: 0 1em 0 0; overflow: hidden; }
	.subcr { padding: 0 0 0 1em; overflow: hidden; }
}
 

Anhänge

  • screen.jpg
    screen.jpg
    9 KB · Aufrufe: 32
Hi,

verwende mal diese Spalten-Reihenfolge und lass' bei der "Spalte 2" den Aufruf der Klasse .c33l weg:

Code: 
<!-- Zeile 1 -->
<div class="subcolumns">
<div class="c33l">
<div class="subcl">1. Spaltenbreite</div>
</div>
<!-- Zeile 3 -->
<div class="c33r">
<div class="subcr">3. Spaltenbreite</div>
</div>
<!-- Zeile 2 -->
<div>
<div class="subc">2. Spaltenbreite</div>
</div>
Siehe hierzu auch http://www.yaml.de/artikel/xhtml/div_reihenfolge.html
 
Ok, ich bin wohl doch noch nicht ganz durch mit dem Thema... :-(

Im Content-Bereich hat es super funktioniert. Jetzt möchte ich dieses Gerüst aber auch in meinem rechten Rand daneben verwenden. Hierfür verwende ich nun die Empfehlung von michaelsinterface "".

Wenn ich nun aber das o.g. Gerüst verwende habe ich einen #FFF Hintergrund (den ich wirklich nicht finden kann... aber darüber sehe ich jetzt mal hinweg). Viel ärgerlicher ist aber, dass alles zu weit auf der linken Seite steht. Jetzt fummel ich hin und her und bekomme es nicht auf den selben Abstand wie den Text darüber und darunter. (siehe Bild Anhang)

HTML
Code: 
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b>
<b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a"><a href="#">Die Überschrift</a></h1>
<p>Ein bisschen Text blubb blubb...</p>

<!-- Plazas - Zeile 1 -->
<!-- Zeile 1 --><p>
<div class="subcolumns">

<div class="c33l">
<div class="subcl">1. Spalte</div>
</div>

<!-- Zeile 3 -->
<div class="c33r">
<div class="subcr">3. Spalte</div>
</div>

<!-- Zeile 2 -->
<div>
<div class="subc">2. Spalte</div>
</div>

</div></p>

<p>
Und hier geht es jetzt mal weiter als wenn nix wäre.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

CSS
Code: 
/* Für den Rahmen */
.xsnazzy h1, .zsnazzy h1 {
margin:0; 
font-size:99%; 
font-weight:bold;
padding:0 10px 5px 30px; 
background-image: url(bg_anr.jpg);
}

.xsnazzy h1 a {color: #000; text-decoration: none;}
.xsnazzy h1 a:hover {color: #BABABA; text-decoration: none;}

.xsnazzy p, .zsnazzy p {
margin:0; 
padding:5px 10px; 
font-size:98.5%;
background-color: #F5F5F5;
}

.xsnazzy a {color: #72787B; font-weight: bold; text-decoration: none;}
.xsnazzy a:hover {color: #BABABA; font-weight: bold; text-decoration: underline;}

.xsnazzy {
background: transparent; 
width:328px; 
float:left; 
margin:0 3px 10px;
}

.xtop, .xbottom {
display:block; 
background:transparent; 
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block; 
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#F5F5F5; 
border-left:1px solid #72787B;
border-right:1px solid #72787B;
}
.xb1 {
margin:0 5px; 
background:#72787B;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px; 
margin:0 1px;
}

.xboxcontent {
display:block; 
border:0 solid #72787B; 
border-width:0 1px; 
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#F5F5F5;
color:#000;
}



/* Das 3 Spaltige Gerüst */
.subcolumns { 
font-size: 0.95em;
width: 100%;
padding: 0 1px 0 1px; 
margin: 0 -1px 0 -1px; 
overflow:hidden;
margin-bottom: 18px;
}
		
	.c50l, .c50lneutral, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; overflow: hidden;}
	.c50r, .c50rneutral, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; overflow: hidden;}
	
	.c25l, .c25r { width: 24.999%; }
	.c33l, .c33r { width: 33.333%; }
	.c50l, .c50r { width: 49.999%; }
	.c66l, .c66r { width: 66.666%; }
	.c75l, .c75r { width: 74.999%; }
	.c38l, .c38r { width: 38.196%; } /* Goldener Schnitt */
	.c62l, .c62r { width: 61.803%; } /* Goldener Schnitt */
	
	.subc  { padding: 0 0.5em 0 0.5em; overflow: hidden; }
	.subcl { padding: 0 1em 0 0; overflow: hidden; }
	.subcr { padding: 0 0 0 1em; overflow: hidden; }
}

Hat jemand eine Idee?
 

Anhänge

  • box.jpg
    box.jpg
    9,6 KB · Aufrufe: 19
Hi,

probier mal Folgendes, um die drei Spalten nach links einzurücken:

Code: 
.subcolumns {
font-size: 0.95em;
padding: 0 1px 0 10px;
overflow:hidden;
margin-bottom: 18px;
}
Ggfs. musst du für diese Box eine neue Klasse anlegen, da im "Content-Bereich" wohl andere Innenabstände für die Klasse .subcolumns gewünscht sind.

Die weiße bzw. hellgraue Hintergrundfarbe resultiert aus diesen Selektoren:

Code: 
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:98.5%;
background-color: #F5F5F5;
}

.xb2, .xb3, .xb4 {
background:#F5F5F5;
border-left:1px solid #72787B;
border-right:1px solid #72787B;
}

.color_a {
background:#F5F5F5;
color:#000;
}
Und so wie ich das überblicke, ist die Hintergrundgrafik bg_anr.jpg für die Klassen .xsnazzy h1, .zsnazzy h1 nicht erforderlich.
 
Hiho :)

ja, klingt soweit logisch. Ich habe die subcolums nun auch für die linke Seite separat angelegt und mit Deinem Hinweis sieht es auch gleich besser aus!

Der Hinweis, dass der Hintergrund #fff aus
Code: 
.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:98.5%;
background-color: #F5F5F5;
}

.xb2, .xb3, .xb4 {
background:#F5F5F5;
border-left:1px solid #72787B;
border-right:1px solid #72787B;
}

.color_a {
background:#F5F5F5;
color:#000;
}

resultiert leuchtet mir aber nicht ein. Denn wenn dem so wäre, dann hätte das Gerüst ja die korrekte Hintergrundfarbe. Er hat aber deffinitiv die Hintergrundfarbe WEISS und #F5F5F5 ist hellgrau, die an sonsten auch zum Tragen kommt. :rolleyes:

Gibt es vielleicht noch eine andere Möglichkeit?
 
Im ersten Schritt habe ich dem Dokumentkörper einen gelben Hintergrund verpasst, um zu sehen, was innerhalb der Box einen gelben und weißen bzw. hellgrauen Hintergrund hat -> die o.g. Klassen besaßen keinen gelben Hintergrund. Im zweiten Schritt habe ich dann die drei genannten Hintergrundfarben im Stylesheet auskommentiert -> die Box war nun komplett gelb ;)

Vielleicht erkennst du ja einfach nicht die Nuance zwischen "ffffff" und "f5f5f5"?
 
Na irgendwo muss ich was nicht sehen. Ich hab es jetzt mal so gemacht wie Du. Nachdem ich die gelbe Farbhinterlegung eingesetzt habe und mich dann durch alle Hintergrundfarben gearbeitet hatte, war ich der Ansicht, dass durch #subcolumns einfach der Hintergrundfarbenbereich auf dem Stück fehlte. Aber auch mit einer Ergänzung der neuen #subcolumns um eine background-color sah es nicht besser aus. :-( Es will einfach nicht.

Den Satz "Und so wie ich das überblicke, ist die Hintergrundgrafik bg_anr.jpg für die Klassen .xsnazzy h1, .zsnazzy h1 nicht erforderlich." hatte ich zuvor nicht gesehen. Warum meinst Du, dass Sie nicht erforderlich wäre? Ich hab Sie als Hintergrundbild bei Überschriften eingesetzt. (Blatt mit Pluszeichen und Unterstrich)
 
Okay, ich hänge dir mal einen Screenshot des Stylesheets mit dem Hex-Farbwert #FFFF00 (gelb) und dem alternativen Wert #FF0000 (rot) für #F5F5F5 an, um dir zu demonstrieren, dass ich da nichts weißes erkennen kann :-)

Und hier der Quelltext meines Testdokuments:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<style type="text/css">
<!--
body {
background: #ffff00;
}

/* Für den Rahmen */
.xsnazzy h1, .zsnazzy h1 {
margin:0;
font-size:99%;
font-weight:bold;
padding:0 10px 5px 30px;

}

.xsnazzy h1 a {color: #000; text-decoration: none;}
.xsnazzy h1 a:hover {color: #BABABA; text-decoration: none;}

.xsnazzy p, .zsnazzy p {
margin:0;
padding:5px 10px;
font-size:98.5%;
background-color: #ff0000;
}

.xsnazzy a {color: #72787B; font-weight: bold; text-decoration: none;}
.xsnazzy a:hover {color: #BABABA; font-weight: bold; text-decoration: underline;}

.xsnazzy {
background: transparent;
width:328px;
float:left;
margin:0 3px 10px;
}

.xtop, .xbottom {
display:block;
background:transparent;
font-size:1px;
}
.xb1, .xb2, .xb3, .xb4 {
display:block;
overflow:hidden;
}
.xb1, .xb2, .xb3 {
height:1px;
}
.xb2, .xb3, .xb4 {
background:#ff0000;
border-left:1px solid #72787B;
border-right:1px solid #72787B;
}
.xb1 {
margin:0 5px;
background:#72787B;
}
.xb2 {
margin:0 3px;
border-width:0 2px;
}
.xb3 {
margin:0 2px;
}
.xb4 {
height:2px;
margin:0 1px;
}

.xboxcontent {
display:block;
border:0 solid #72787B;
border-width:0 1px;
height:auto;
}
* html .xboxcontent {
height:1px;
}

.color_a {
background:#ff0000;
color:#000;
}

/* Das 3 Spaltige Gerüst */
.subcolumns {
font-size: 0.95em;
padding: 0 1px 0 10px;
overflow:hidden;
margin-bottom: 18px;
}

        .c50l, .c50lneutral, .c25l, .c33l, .c38l, .c66l, .c75l, .c62l {float: left; overflow: hidden;}
        .c50r, .c50rneutral, .c25r, .c33r, .c38r, .c66r, .c75r, .c62r {float: right; overflow: hidden;}

        .c25l, .c25r { width: 24.999%; }
        .c33l, .c33r { width: 33.333%; }
        .c50l, .c50r { width: 49.999%; }
        .c66l, .c66r { width: 66.666%; }
        .c75l, .c75r { width: 74.999%; }
        .c38l, .c38r { width: 38.196%; } /* Goldener Schnitt */
        .c62l, .c62r { width: 61.803%; } /* Goldener Schnitt */

        .subc  { padding: 0 0.5em 0 0.5em; overflow: hidden; }
        .subcl { padding: 0 1em 0 0; overflow: hidden; }
        .subcr { padding: 0 0 0 1em; overflow: hidden; }
}
-->
</style>

</head>
<body>

<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a"></b>
<b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">
<h1 class="color_a"><a href="#">Die Überschrift</a></h1>
<p>Ein bisschen Text blubb blubb...</p>

<!-- Plazas - Zeile 1 -->
<!-- Zeile 1 --><p>
<div class="subcolumns">

<div class="c33l">
<div class="subcl">1. Spalte</div>
</div>

<!-- Zeile 3 -->
<div class="c33r">
<div class="subcr">3. Spalte</div>
</div>

<!-- Zeile 2 -->
<div>
<div class="subc">2. Spalte</div>
</div>

</div></p>

<p>
Und hier geht es jetzt mal weiter als wenn nix wäre.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>

</body>
</html>
Da die Klasse .subcolumns keine Hintergrundfarbe besitzt, erbt sie die Hintergrundfarbe des übergeordneten Elements, dass im obigen Dokumentbaum rückführend das body-Element ist, da die übergeordneten DIVs .xboxcontent keine Hintergrundfarbe und .xsnazzy einen transparenten Hintergrund besitzen.

Wenn das bei dir nicht der Fall ist, du also auf Anhieb nicht den gelben Seiten-Hintergrund in der Box erkennst, sondern eben einen weißen, dann wird sich bei dir vermutlich noch ein weiteres übergeordnetes (DIV) Element "dazwischen" befinden, dass einen weißen Hintergrund besitzt, und diesen an das DIV .subcolumns vererbt.

Oder verstehe ich jetzt was falsch?

Mir ist nämlich nicht klar, wo jetzt das Problem konkret liegt?

Wenn du aber die Hintergrundfarbe der kompletten Box ändern willst, dann probier es mal über die Klasse .xboxcontent.

Ansonsten solltest du besser den vollständigen Quellcode (HTML + CSS) der Seite, oder noch besser den Link zur Problemseite posten, um mögliche Mißverständnisse auszuräumen.

@Hintergrundgrafik: Klar, bei Verwendung einer detailierten Grafik (Blatt mit Pluszeichen und Unterstrich) kein Thema ;)
 

Anhänge

  • yellow_red.png
    yellow_red.png
    1,4 KB · Aufrufe: 14
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück