anordnen ohne Tabelle in Beiträgen?

Paradise

Guten Morgen,

ist es nicht möglich in Beiträgen etwas nur mit Divs anzuordnen.

zB:

Code

<style type="text/css">
div.table { display:table; border-collapse:collapse;
}
div.tr { display:table-row;
}
div.td { display:table-cell; border:thin solid red; padding:5px;
 }
</style>




<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg"  alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
 <div class="tr">
  <div class="td">ich</div>
  <div class="td"><a title="MDA SMS/Mails" href="../images/stories/paradise/pc/TB.jpg">
<img src="../images/stories/paradise/pc/thumb/TB.jpg"  alt="MDA Pro" width="100" height="113" /></a></div>
 </div>
</div>

Alles anzeigen

oder auch:

Code

<style type="text/css">
<!--
* {margin: 0; padding: 0; }
.b3     {
    margin:0 auto;
    width:450px;
}
.b2     {
    margin:0 auto;
    width:300px;
}
.b1     {
    margin:0 auto;
    width:150px;
}
-->
</style>
<div class="b2"
><img src="bild.gif" alt="Bild 1" width="150" height="100"
><img src="bild.gif" alt="Bild 1" width="150" height="100"
></div>
<div class="b1"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
></div
><div class="b3"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
><img src="bild1.gif" alt="Bild 1" width="150" height="100" hspace="0"
></div>

Alles anzeigen

Werden ignoriert und alles untereinander gesetzt....

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Monika

Hi
ein div ist ein sogenanntes Block Element, die erzwingen einen Zeilenumbruch, außer man gewöhnt ihnen das wieder ab

hspace ist absolut unnötig, du hast folgende Möglichkeiten und die sogar ohne div ;)
denn nutzt man für alles divs gibt es bald eine div Suppe, die unüberschaubar wird:

HTML

img.b3,
img.b2,
img.b1{margin:0 auto;text-align:center;vertical-align:middle;}

HTML

<img class="b3" .....
<img class="b2"...
<img class="b1" ....

probiere es mal aus ;)

lg

Paradise

Hm, damit tut sich nix.

Ich hab aber eben das in der style.css gefunden

Code

/* Begin Images */
p img {
    padding: 0;
    max-width: 100%;
    }


/*    Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */


img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }


img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }


img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }


.alignright {
    float: right;
    }


.alignleft {
    float: left
    }
/* End Images */

Alles anzeigen

Jetzt frag ich mich nur noch wie ich damit Bilder so hinbekomm wie hier mit Tabellen
http://img183.imageshack.us/my.php?image=cssbilderba1.jpg

Sorry, aber ich versuch von Tabellen los zu kommen und steh mit CSS noch auf Kriegsfuß

Monika

vergiss dies da drin

öffne die style.css des Themes,
schreibe da dort hinein, wo du eswieder findest

HTML

.center01 {text-align:center;margin:5px auto;padding:10px;
    display:inline;width:100%;
    
    }
.center01 img{margin:6px;}

geh zum Beitrag schreiben:
Du darfst NICHT den what you see is what you get editor nehmen

wichtig ganz oben bevor du anfängst , einmal die Entertaste drücken,

dann fügst du die ersten drei Bilder ein

ungefähr so

HTML

<img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" />

dann klickst du zweimal auf die Entertaste , das macht einen neuen p tag also eine neue Zeile und fügst die vier Bilder ein, so wie die obren hier

und so weiter

jetzt schreibst du ganz oben
<div class="center01">

und ganz unten </div> hinein,

so

HTML

<div class="centered"> 


<img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" />


<img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" /><img id="image59"  src="http://www.texto.de/wp-plugins/wp-content/uploads/2006/12/balkon.thumbnail.jpg" alt="Bild 1" />


</div>

dann speichern

ich habe es getestet im default theme es funktioniert
siehe Anhang

toi toi ;)

lg

Paradise

Der Hammer, das geht.
http://www.paradise-bodies.com/blog/?p=8

DANKEEEEEE

War grade auf deiner Seite. So jemand könnte ich für meine Projekte gebrauchen *heiratsantrag, lol

Und hier haben wir so lange rumgemacht *kopfkratz
http://www.traum-projekt.com/forum/22-webde…n-mit-divs.html

Monika

Zitat von Paradise

Der Hammer, das geht.
http://www.paradise-bodies.com/blog/?p=8
DANKEEEEEE
War grade auf deiner Seite. So jemand könnte ich für meine Projekte gebrauchen *heiratsantrag, lol

[offtopic] ich war grad auch auf deiner Seite. Mein Lebensmotto:
Sport ist Mord ==>Garfield ;) oder Roosevelt:No sports![/offtopic]

Zitat

Und hier haben wir so lange rumgemacht *kopfkratz
http://www.traum-projekt.com/forum/22-webde…n-mit-divs.html

;) für sowas braucht man *Puristen* und keine Front und Dream-Experten ;)

lg

Paradise

Jetzt muss ich doch nochmal fragen was richtig ist

Code

<div class="center01">
<p><a title="{1111061756} Cali 1" href="../images/stories/paradise/car/Calibra_1.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_1.jpg"  alt="Calibra" width="133" height="103" /></a><a title="{1111061756} Cali 2" href="../images/stories/paradise/car/Calibra_2.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_2.jpg"  alt="Calibra" width="133" height="103" /></a><br>


<a title="{1111061756} Cali 3" href="../images/stories/paradise/car/Calibra_3.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_3.jpg"  alt="Calibra" width="133" height="103" /></a><a title="{1111061756} Cali 4" href="../images/stories/paradise/car/Calibra_4.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_4.jpg"  alt="Calibra" width="133" height="103" /></a><a title="{1111061756} Hier die 275 in ihrer vollen Bracht." href="../images/stories/paradise/car/Calibra_7.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_7.jpg"  alt="Calibra" width="133" height="103" /></a></p>
</div>

oder

Code

<div class="center01">
<p><a title="{1111061756} Cali 1" href="../images/stories/paradise/car/Calibra_1.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_1.jpg"  alt="Calibra" width="133" height="103" /></a><a title="{1111061756} Cali 2" href="../images/stories/paradise/car/Calibra_2.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_2.jpg"  alt="Calibra" width="133" height="103" /></a></p>


<p><a title="{1111061756} Cali 3" href="../images/stories/paradise/car/Calibra_3.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_3.jpg"  alt="Calibra" width="133" height="103" /></a><a title="{1111061756} Cali 4" href="../images/stories/paradise/car/Calibra_4.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_4.jpg"  alt="Calibra" width="133" height="103" /></a><a title="{1111061756} Hier die 275 in ihrer vollen Bracht." href="../images/stories/paradise/car/Calibra_7.jpg"><img src="../images/stories/paradise/car/thumb/Calibra_7.jpg"  alt="Calibra" width="133" height="103" /></a></p>
</div>

also <br> wo die neue Reihe anfängt oder p Tag (</p><p>)?

Monika

du hast zwei Bilder die in einer Reihe erscheinen sollen,
weder br noch p

du hast drei Bilder, die in einer Reihe erscheinen sollen und zwei die drunter sein sollen

trennen mit <p> ...</p>

lg

Paradise

na das zwischen 2 Bilder kein Zeilenumbruch bzw Absatz darf ist schon klar:)

also das zweite. Kannst du mir aber bitte sagen warum p Tag und kein br.
Muss doch immer für alles ne logische erklärung haben. Ist halt so langt mir nie:). Denn funktionieren tut ja beides...

Monika

1. wordpress löscht dir zu 99% das br raus außer Du hast dies in den Corefiles geändert,
2. es ist richtiger,
3. du hast mehr Gestaltungsfreiheit

4....fällt mir nix mehr ein

lg

Paradise

Ich habe grade etwas festgestellt.

Ich habe die vorschau im Archiv eingeschaltet (http://faq.wordpress-deutschland.org/keine-bilder-k…iv-the_excerpt/)

Wenn ich nun einen Artikel habe wo die Vorschu/Bilder mit 
getrennt sind

Code

<div class="center01">
<p><a title="{0812060953} MDA Kalender" href="../images/stories/paradise/2006/mda_1.jpg"><img src="../images/stories/paradise/2006/thumb/mda_1.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>


<!--more-->


<p><a title="{0812060953} MDA Main" href="../images/stories/paradise/2006/mda_5.jpg"><img src="../images/stories/paradise/2006/thumb/mda_5.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>
</div>

,dann läd die Seite nicht richtig wenn man auf einen Monat/Archiv klickt.

Damit es richtig geht muss ich das div vor "more" schliesen und danach ein neues aufmachen. Nur habe ich dann einen riesen abstand zwischen denn Bildern.

Was auch noch ist, ist das ich ja den Text immer in <p> setze. Dadurch das aber die Bilder auch in <p> sitzen ist der Abstand dann auch ziemlich groß.

Code

<p>Texxxxxxt</p>


<div class="center01">
<p><a title="{0812060953} MDA Kalender" href="../images/stories/paradise/2006/mda_1.jpg"><img src="../images/stories/paradise/2006/thumb/mda_1.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>

Paradise

Push :oops:

Monika

oh ooops durchgerutscht

wenn du im archiv the_excerpt verwendest,
UND du magst aber auch Bilder dort angezeigt bekommen,

dann kannst du
in das Feld optionaler Auszug, dass beim Beitrag schreiben weiter unten steht,
einfach folgendes genau so hineingeben ...

HTML

<div class="center01">
<p><a title="{0812060953} MDA Kalender" href="../images/stories/paradise/2006/mda_1.jpg"><img src="../images/stories/paradise/2006/thumb/mda_1.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>


</div>

rein theoretisch praktisch müßt dies dann richtig angezeigt werden

wenn nicht, wenn zu kompliziert, wenn du den the_excerpt woanders brauchst, sei so gut und zeige mir direkt wo da soo große Abstände sind,

lg

Paradise

also hier http://www.paradise-bodies.com/blog/?p=19
mal ein Beispiel.
Ist ja nicht nur im Archiv, sondern auch direkt beim Beitrag...

Code

<b>H</b>abe letzte Nacht auch mal wieder mein MDA Pro auf den neusten Stand gebracht (Windows update). Wenn man ja nicht jedesmal die ganze Software neu installieren müsste *motz. Na ja, bei der gelegenheit mal ein paar Bilder wie es im Moment drauf aussieht.


<div class="center01">
<p class="images"><a title="{0812060953} MDA Kalender" href="../images/stories/paradise/2006/mda_1.jpg"><img src="../images/stories/paradise/2006/thumb/mda_1.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>


<p class="images"><a title="{0812060953} MDA Kontakte" href="../images/stories/paradise/2006/mda_2.jpg"><img src="../images/stories/paradise/2006/thumb/mda_2.jpg"  alt="MDA Pro" width="150" height="113" /></a><a title="{MDA1} MDA Kontakt" href="../images/stories/paradise/2006/mda_3.jpg"><img src="../images/stories/paradise/2006/thumb/mda_3.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>
</div>


<!--more-->


<div class="center01">
<p class="images"><a title="{0812060953} MDA SMS/Mails" href="../images/stories/paradise/2006/mda_4.jpg"><img src="../images/stories/paradise/2006/thumb/mda_4.jpg"  alt="MDA Pro" width="150" height="113" /></a><a title="{0812060953} MDA Main" href="../images/stories/paradise/2006/mda_5.jpg"><img src="../images/stories/paradise/2006/thumb/mda_5.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>


<p class="images"><img src="../images/stories/paradise/2006/mda_pro.jpg" alt="MDA Pro" width="200" height="161" /></p>
</div>

Alles anzeigen

Monika

hmm
ich bin ja ehrlich,
mir wäre da zu großer Abstand niemals aufgefallen, sondern ich dachte mir ja beim ersten Mal ansehen:

hach endlich einer, der Mitleid mit den Lesern hat und seinen Text und Bilder aufteilt

gut, wenn Du unbedingt alles beinanderkleben haben magst, dann
mache eine class
center02

die hat alles gleich wie center 01 nur margin-top:-20px; oder mehr oder weniger dabei

lg

Zitat von Paradise

also hier http://www.paradise-bodies.com/blog/?p=19
mal ein Beispiel.
Ist ja nicht nur im Archiv, sondern auch direkt beim Beitrag...

Code

<b>H</b>abe letzte Nacht auch mal wieder mein MDA Pro auf den neusten Stand gebracht (Windows update). Wenn man ja nicht jedesmal die ganze Software neu installieren müsste *motz. Na ja, bei der gelegenheit mal ein paar Bilder wie es im Moment drauf aussieht.


<div class="center01">
<p class="images"><a title="{0812060953} MDA Kalender" href="../images/stories/paradise/2006/mda_1.jpg"><img src="../images/stories/paradise/2006/thumb/mda_1.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>


<p class="images"><a title="{0812060953} MDA Kontakte" href="../images/stories/paradise/2006/mda_2.jpg"><img src="../images/stories/paradise/2006/thumb/mda_2.jpg"  alt="MDA Pro" width="150" height="113" /></a><a title="{MDA1} MDA Kontakt" href="../images/stories/paradise/2006/mda_3.jpg"><img src="../images/stories/paradise/2006/thumb/mda_3.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>
</div>


<!--more-->


<div class="center01">
<p class="images"><a title="{0812060953} MDA SMS/Mails" href="../images/stories/paradise/2006/mda_4.jpg"><img src="../images/stories/paradise/2006/thumb/mda_4.jpg"  alt="MDA Pro" width="150" height="113" /></a><a title="{0812060953} MDA Main" href="../images/stories/paradise/2006/mda_5.jpg"><img src="../images/stories/paradise/2006/thumb/mda_5.jpg"  alt="MDA Pro" width="150" height="113" /></a></p>


<p class="images"><img src="../images/stories/paradise/2006/mda_pro.jpg" alt="MDA Pro" width="200" height="161" /></p>
</div>

Alles anzeigen

Paradise

Du hast mich falsch verstanden:(

Es geht nur um den Abstand zwischen den Bildern wo das  sitzt.
Also nicht um den Abstand zum Text...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

anordnen ohne Tabelle in Beiträgen?

Jetzt mitmachen!