✔ Bild und Text per CSS ausrichten

[kanecorpse]

Guten Tach! Weiß gar nicht, wie ich anfangen soll. Min-height funktioniert jetzt doch. Ich kann leider nicht mehr nachvollziehen, wo der Fehler gelegen hat. Schade. Wäre schon gut zu wissen, warum es Anfangs nicht funktionierte.

Ich suche noch nach einer Möglichkeit, meine News-Seite übersichtlich zu gestalten. Meine Variante wäre links das Datum, mit einem rechten Abstand von circa 10 bis 20 px dazu der Newsinhalt. Wäre es korrekt, wenn man dies über Listen realisieren würde? Welche Art Liste käme denn dafür in Frage?

greets,
kanecorpse

 

[Maik]

Wenn du die News mit einer Liste auszeichnen möchtest, dann bietet sich eben wieder die Definitionsliste an.

Es liessen sich aber beispielsweise auch zwei <p>-Elemente, oder ein <h1>- und <p>-Element nebeneinander ausrichten, um die einzelnen News-Beiträge zu strukturieren.

mfg Maik

 

[kanecorpse]

Ich hab es erst mal mit zwei p-Elementen versucht. Hab beiden eine Klasse gegeben und ausgerichtet. Der erste Eintrag ist wieder nicht in eienr Zeile drin. Wie war das auch noch mal?

Hier mein Versuch

greets,
kanecorpse

 

[Maik]

Hier greift der voreingestellte Initialwert der äußeren Polsterungseigenschaft margin des <p>-Elements, der entsprechend auf null zurückgesetzt werden muß.

.date {
 float: left;
 clear: left;
 font-family: Verdana;
 font-size: 12px;
 width: 119px;
 border: 0px solid #643200;
 margin-top:0;
}
.news {
 padding-left: 120px;
 font-family: Verdana;
 border: 0px solid #643200;
 margin-top:0;
}

mfg Maik

 

[Maik]

Übrigens hast du diesen Syntax-Fehler aus vergangenen Tagen (siehe http://www.tutorials.de/forum/css/352188-kontaktformular-mit-css-gestalten.html#post1825391) wieder in deinen CSS-Code eingeschleust, wodurch diverse Browser das Stylesheet nicht korrekt parsen.

#conlayer {
 border: 0px solid rgb(100, 50, 0);
 margin: 8px auto;
 width: 762px;
 text-align: left;
 background-color: rgb(255, 255, 255; /* Hier fehlt die schliessende )-Klammer */
}

(v.l.n.r.: IE8, Safari/Win)

mfg Maik

 

[kanecorpse]

Ohhhh. Danke für den Hinweis! Sowas passiert, wenn man mit mehreren Style-Dateien arbeitet. Hab immer in einer Datei getestet und den benötigten Teil in die endgültige Styledatei übertragen. Da sieht man es wieder. So schleichen sich Fehler ein. Wenn Du nicht gewesen wärst .... Thx

Es gibt nun neue Schwierigkeiten. Nach dem übertragen der einzelnen Styles in die Haupt-Styledatei haben alle Seiten einen Fehler. Das dürfte mit dem Codeschnipsel zur Aufhebung der Abstände bei den Überschriften zu tun haben. Die Styles sollen schon in einer einzigen Styledatei untergebracht werden. Wie verfährt man am Besten?

Links dazu:
Homepage
Weitere Seite

greets,
kanecorpse

 

[Maik]

Es gibt nun neue Schwierigkeiten. Nach dem übertragen der einzelnen Styles in die Haupt-Styledatei haben alle Seiten einen Fehler. Das dürfte mit dem Codeschnipsel zur Aufhebung der Abstände bei den Überschriften zu tun haben. Die Styles sollen schon in einer einzigen Styledatei untergebracht werden. Wie verfährt man am Besten?

Wenn es sich bei den Überschriftformatierungen um allgemeingültige Selektoren handelt, die nun auch bei anderen Überschriften greifen, hast du die Möglichkeit, diese Regeln mittels einer CSS-Klasse zu spezifizieren, und so die übrigen Elemente hiervon auszuschließen.

mfg Maik

 

[kanecorpse]

Frage: Wenn z.B. bei margin 2 Werte notiert sind, wo wirken die sich aus? Horizontal und vertikal?

greets,
kanecorpse

 

[Maik]

Bitte zu solch trivialen Fragen ruhig mal in der Fachlektüre nachschlagen: http://de.selfhtml.org/css/eigenschaften/randabstand.htm#margin

mfg Maik

 

[kanecorpse]

Danke. Hab es echt überlesen gehabt. Ich versuche natürlich durch googeln und mit der Forumssuche weiter zu kommen. Da finde ich leider auch nicht immer eien Antwort. Manchmal verstehe ich sie auch.

Das Problem mit der Überschrift besteht noch. Hab einiges ausprobiert. Wenn ich aus den Styles das hier

* {
margin: 0;
padding: 0;
}

entferne, wird der Abstand zwischen Daten und der Definitionsliste zu groß. Der war vorher genau wie der Abstand zwischen Beschreibung und dem folgenden Text. Die anderen Abnstände sind ok so. Ich hab es z. B. damit versucht, daß ich <h4> mit padding und margin Werte für oben und unten zugewiesen hab. Das hat auch nicht funktioniert. Ich brauch nen Anstoß.

Seite


# Edit #
Ich habs. Die Definiotionsliste <dl> mußte mit padding: 0px; und margin: 0px; erweitert werden. Ob das nun korrekt gelöst ist, weiß ich nicht. Aber es funktioniert.

greets,
kanecorpse