Zur Navigation

Statt einer Tabellenformatierung css verwenden?

1 xred

Hallo ich will in einer Wordpressseite den gleich Effekt erzielen, den ich erziele wenn ich eine Tabelle verwende die eine Zeile hat und drei Spalten
Spalte 1 300px breit Spalte 2 300px breit und Spalte 3 ebenfalls 300px

In der Spalte 3 habe ich jetzt eine Slideshow, die Spalte 2 ist leer und macht nur den Abstand und in der Spalte 1 habe ich formatierten Text.

Get das mit

<div="position......usw oder so?

Vielen Dank,
lgg

01.03.2012 10:30

2 Jörg

Auf dieser Seite ist die Umsetzung verschiedener Spalten-Layouts in CSS erklärt, die kannst du vielleicht gut als Grundlage nehmen:

http://www.intensivstation.ch/templates/

01.03.2012 13:03

1 Forenmitglied fand diesen Beitrag gut

3 xred

danke schön, aber wie verwende ich das im Wordpress?

Füge ich das im Editor einfach ein, so ist es als Text sichtbar, egal ob im html oder Visual. Muss ich da eine eigene css datei erstellen? wenn ja, wo gehört die hin?

Oder gehört das in die bereits bestehende css Datei? Und wo?

danke für weitere Tipps ;)

02.03.2012 05:48

4 Jörg

Geht es dir um das Layout der ganzen Seite oder nur um den Inhaltsbereich des Artikels, den du einfügst?

Für ersteres musst du das Template bearbeiten, Erklärungen hierzu gibt es z.B. auf dieser Seite:

http://wordpress.lernenhoch2.de/handbuch/eigenes-wordpress-template-erstellen/

Falls es nur um den Inhaltsbereich geht:

In der Spalte 3 habe ich jetzt eine Slideshow, die Spalte 2 ist leer und macht nur den Abstand und in der Spalte 1 habe ich formatierten Text.

Du kannst die beiden Spalten 1 und 3 mithilfe von float nebeneinander anordnen. Spalte 2 brauchst du hier nicht als div umsetzen, den Abstand kannst du auch mithilfe der CSS-Eigenschaft margin realisieren

Füge ich das im Editor einfach ein, so ist es als Text sichtbar, egal ob im html oder Visual.

Im HTML-Modus. Wenn du zurück in den visuellen Modus schaltest, solltest du das Resultat sehen

Muss ich da eine eigene css datei erstellen?

Wo die CSS-Datei des Themes liegt, kannst du im HTML-Quelltext (im Browser) sehen, sie ist dort in einem link Tag im head Bereich eingebunden

Alternativ kannst du das CSS aber auch inline einbinden:

<div style="width:200px; float:left"></div>

02.03.2012 08:35 | geändert: 02.03.2012 08:36

5 xred

Danke schön für die vielen Tipps! Da habe ich ja etliches durchzuarbeiten ;)

Alternativ kannst du das CSS aber auch inline einbinden:

<div style="width:200px; float:left"></div>

Vielleicht kannst Du mir aber doch noch für den akuten Fall einen weiteren Anstoss geben und mir sagen wie der Inline Code von so einem 3Spalten Ding in Verbindung mit zB http://www.intensivstation.ch/files/templates/temp03.html
aussehen müsste?

Die Vorschläge auf dieser Webseite gehen ja von einer Trennung von css und html aus, oder?

Inlinecode würde ja bedeuten, ich könnte im html Editor die einzelne Worpress Seite gestalten und das wäre ja genau mein Ziel!

Danke schön gue

02.03.2012 11:47

6 Jörg

Die Templates auf intensivstation.ch waren eher ein Vorschlag für komplette Seitenlayouts, ich denke, die eignen sich, v.a. aufgrund der absoluten Positionierung, weniger zur Gestaltung einzelner Seitenelemente.

Deswegen mein Vorschlag in Beitrag 4, dies mit float umzusetzen:

http://de.selfhtml.org/css/eigenschaften/positionierung.htm#float

Inlinecode würde ja bedeuten, ich könnte im html Editor die einzelne Worpress Seite gestalten und das wäre ja genau mein Ziel!

Auf SELFHTML ist auch erklärt, wie man CSS auf unterschiedliche Weisen einbinden kann:

http://de.selfhtml.org/css/formate/einbinden.htm

Zum Inline-Code siehe den Abschnitt "Formate innerhalb eines HTML-Elements definieren"

02.03.2012 13:15 | geändert: 02.03.2012 13:17

1 Forenmitglied fand diesen Beitrag gut

7 xred

Dank Deiner Tipps habe ich es erstmals geschafft auf Tabellen zu verzichten :)
Ich habe jetzt eine Box mit einer Slideshow die rechts ausgerichtet ist und einen Text der die Box umfließt. Fantastisch!

Mit:
<div style="position:absolute; bottom:0px; width: 100%; height: 35px; float: left; margin-left: 2px; margin-bottom: 2px;">Inhalt</div> ist mir jetzt auch eine befüllbare Spalte am unteren Rand gelungen.

Jetzt würde ich gerne einige kleine Grafiken nebeneinander dort nebeneinander hineinstellen. Die sollten aber einen Abstand zueinander haben, mache ich da sowas wie mehrere Boxen in der Box damit ich das jeweils mit margin versehen kann?

Geht das überhaupt? Box in Box?

Also sowas wie verschachteln? Ich bin verwirrt!

Bitte noch um einen weiteren Anstoß, vielen Dank!

03.03.2012 09:01

8 Jörg

Ja, du kannst div Elemente auch ineinander verschachteln

Du kannst den Abstand aber auch für die Grafiken selbst definieren, dazu werden nicht zwingend Boxen benötigt (es sei denn optisch für einen Rahmen). Nebeninander sind img als Inline-Elemente ja schon von sich aus angeordnet

03.03.2012 11:58

9 xred

Zitat von Jörg
Ja, du kannst div Elemente auch ineinander verschachteln

Du kannst den Abstand aber auch für die Grafiken selbst definieren, dazu werden nicht zwingend Boxen benötigt (es sei denn optisch für einen Rahmen). Nebeninander sind img als Inline-Elemente ja schon von sich aus angeordnet

Jörg, vielen Dank, langsam aber sicher kapiere ich was da Sache ist :)

Jetzt habe ich meinen Bildchen, die ich aus der Tabelle kopiert habe gesagt: steht zentriert, großartig! Das Optimum wäre allerdings wenn sich die Bildchen gleichmässig auf der Seitenbreite verteilen, geht das vielleicht auch?


<div style="position:absolute; bottom:0px; width: 100%; height: 31px; float: left; margin-bottom: 2px;"><div align="center"><a href="http://web.de/bild1.jpg"><img class="alignnone size-full wp-image-696" title="bild1" src="http://web.de/bild1.jpg" alt="" width="80" height="31" /></a><a href="http://web.de/bild2.jpg"><img class="alignnone size-full wp-image-692" title="bild2" src="http://web.de/bild2.jpg" alt="" width="80" height="31" /></a><a href="http://web.de/bild3.jpg"><img class="alignnone size-full wp-image-691" title="bild3" src="http://web.de/bild3.jpg" alt="width" ="80" height="31" /></a><a href="http://web.de/bild4.jpg"><img class="alignnone size-full wp-image-690" title="bild4" src="http://web.de/bild.4.jpg" alt="" width="80" height="31" /></a><a href="http://web.de/bild5.jpg"><img class="alignnone size-full wp-image-688" title="bild5" src="http://web.de/bild5.jpg" alt="" width="80" height="31" /></div></div>

04.03.2012 08:14

10 Jörg

Das div benötigst du eigentlich nicht:

<div align="center">

Du kannst im übergeordneten div auch die CSS-Eigenschaft text-align:center anstelle des veralteten HTML-Attributs align verwenden

Das Optimum wäre allerdings wenn sich die Bildchen gleichmässig auf der Seitenbreite verteilen, geht das vielleicht auch?

Du kannst für die Links (<a>) ein entsprechendes margin-left und margin-right definieren

04.03.2012 10:51