Thema: CSS & mögliche Erklärungen

Hallo liebe Usergemeinde,

vielleicht könnte mir ein User erklären, warum folgende Einstellungen in der template_css.css verschiedene Auswirkungen haben:

Vorher:

.button {
font-size : 11px;
color : #333333;
border : 1px solid #CCC;
margin-bottom : 5px;
background-color : #EDEDED;
padding : 1px;
margin : 5px 0px;
}

Die Buttons befinden sich im IE nebeneinander!

Nachher:

.button {
font-size : 11px;
font-family : Arial, Helvetica, Sans-Serif;
color : #333333;
border : 1px solid #CCC;
margin-bottom : 5px;
background-color : #EDEDED;
padding : 1px;
margin : 5px 0px;
}

Hinzugefügt wurde nur die font-family. Nach dieser Änderung befinden sich die Buttons im IE untereinander!

Warum?

Wenn ich mir die Buttons Vorher und Nachher anschaue, sehen sie 100% identisch aus.
Auch die Schriftart hat sich nicht verändert, weder Größe, andere Schrift, ...

Ich bastel jetzt ziemlich lange ( 2 Wochen ) unentwegt an EINER template_css.css und habe mittlerweile 3x neu angefangen. Allerdings hat sich mir bisher noch nicht der Schlüssel zum Ganzen aufgetan. Irgendwie würde ich das Ganze gern verstehen, bisher aber Fehlanzeige.

Gibt es eigentlich Einstellungen die sich gegenseitig aufheben, auch in verschiedenen Abschnitten? D.h., ich stelle die Farbe einer Schrift für einen Button ein, weiter unten in der Datei ändere ich das Aussehen von Überschriften, schon hat sich mein Button auch verändert und die Button-Einstellungen zeigen keine Wirkung mehr.

Ein Problem, wo ich noch nicht hintergekommen bin.

Liebe Grüße,

Solid

Zitat von Solid.Session

vielleicht könnte mir ein User erklären, warum folgende Einstellungen in der template_css.css verschiedene Auswirkungen haben:

[...]

Hinzugefügt wurde nur die font-family. Nach dieser Änderung befinden sich die Buttons im IE untereinander!

Warum?

[...]

Ich bastel jetzt ziemlich lange ( 2 Wochen ) unentwegt an EINER template_css.css und habe mittlerweile 3x neu angefangen. Allerdings hat sich mir bisher noch nicht der Schlüssel zum Ganzen aufgetan. Irgendwie würde ich das Ganze gern verstehen, bisher aber Fehlanzeige.

Gibt es eigentlich Einstellungen die sich gegenseitig aufheben, auch in verschiedenen Abschnitten? D.h., ich stelle die Farbe einer Schrift für einen Button ein, weiter unten in der Datei ändere ich das Aussehen von Überschriften, schon hat sich mein Button auch verändert und die Button-Einstellungen zeigen keine Wirkung mehr.

Hi Solid,

generell dürfte der CSS-Code keinen Einfluss auf einen eventuellen Zeilenumbruch haben, da der keinen "Style" im eigenlichen Sinne darstellt.

Ich vermute eher, dass im entsprechenden .php-File der Button zuerst mit dem Inline-Tag <span> ohne Zeilenumbruch und danach über das Block-Tag <div> mit Zeilenumbruch eingebunden wurde.

Viele Grüße aus Aachen
Michael

Hallo Michael AC,

vielen Dank für deine Antwort. Leider bin ich absoluter Newbie in diesen Sachen.
Ist es denn möglich dieses Problem in der index.php abzustellen? Soll heissen, ich möchte die Schriftart ändern, ohne dass es zu einem Zeilenumbruch kommt?

Wenn ja, was muss ich wo tun? Kurzanleitung würde zum ausprobieren reichen. Denn Rest werde ich mir dann hoffentlich hinfummeln.

Muss es denn so sein, dass Inline & Block unterschiedlich eingebunden werden?

Zitat von Michael AC

Hi Solid,

generell dürfte der CSS-Code keinen Einfluss auf einen eventuellen Zeilenumbruch haben, da der keinen "Style" im eigenlichen Sinne darstellt.

Ich vermute eher, dass im entsprechenden .php-File der Button zuerst mit dem Inline-Tag <span> ohne Zeilenumbruch und danach über das Block-Tag <div> mit Zeilenumbruch eingebunden wurde.

Viele Grüße aus Aachen
Michael

Vielen Dank, Solid

Zitat von Solid.Session

vielen Dank für deine Antwort. Leider bin ich absoluter Newbie in diesen Sachen.
Ist es denn möglich dieses Problem in der index.php abzustellen? Soll heissen, ich möchte die Schriftart ändern, ohne dass es zu einem Zeilenumbruch kommt?

Wenn ja, was muss ich wo tun? Kurzanleitung würde zum ausprobieren reichen. Denn Rest werde ich mir dann hoffentlich hinfummeln.

Muss es denn so sein, dass Inline & Block unterschiedlich eingebunden werden?

Hallo Solid,

es wäre hilfreicher, wenn ich mir ein Bild davon machen könnte, wie die Buttons angeordnet sind (Link oder Screenshot möglich?).

Eine Idee wäre noch:

Durch die Angabe der font-family vergrößert sich automatisch die Schrift in den Buttons. Dadurch werden die Buttons größer und passen entsprechend nicht mehr in den ihnen zugewiesenen Bereich.

Versuche mal, die font-size auf 10px oder 9px zu verkleinern.

Oh, der Unterschied zwischen Inline- und Block-Tags ist, dass Du manchmal eben einfach nur eine Style-Änderung innerhalb einer Zeile benötigst. Dann würde Dir <div> natürlich alles kaputt machen.

Für weitere Infos zu CSS- und HTML-Programmierung verweise ich gerne auf
http://de.selfhtml.org/

Viele Grüße aus Aachen
Michael

Hallo Michale AC,

ich werde es mir anschauen. Zur Zeit bin ich an einer anderen Sache im Template, die Vorrang hat.

Sobald ich deine Tipps ausprobiert habe, melde ich mich wieder.

Liebe Grüße,

Solid

Ich hätte auch noch ein Vorschlag, nimm deine Buttons und organisiere diese in einer
"unsorted list":

<ul class=button>
<li>Button1</li>
<li>Button2</li>
...
</ul>

dann kannst du im Stylesheet zusätzlich zu deinen Angaben oben
folgendes angebe:

display:inline;
list-style:none;

und schon sollten deine Buttons brav nebeneinander verharren