Unsichtbare Tabelle zum Anordnen von Bilder > Verzweifelung

    Guten Morgen!
    Ich verzweifele fast! Auf dieser Seite möchte ich die hochformatigen Bilder nebeneinander anordnen: http://d-k-fotografie.de/dkf/?page_id=193 (WP v3.6)

    Google und Forensuche (Hier z. B.) habe ich schon gequält, stecke aber irgendwie fest. Ich habe mit TinyMCE eine Tabelle erstellt und die Bilder dort reingesetzt. Soweit so gut. Die Tabelle soll aber nicht zu sehen sein. Ich möchte nur die beiden Bilder nebeneinander auf der Seite, gleicher Abstand nach rechts und links, nicht anklickbar, keine Rahmen etc.. Ohne Tabelle kriege ich es nicht hin den gleichen Abstand zu den Rändern zu wahren.
    Bin auch gerne für Alternativvorschläge offen.

    Momentan sieht es so aus:<

    HTML
    table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><img alt="Body Modification 5" src="http://d-k-fotografie.de/dkf/wp-content/uploads/2013/08/Body-Modification-4.jpg" width="410" height="631" /></td>
<td><img alt="Body Modification 5" src="http://d-k-fotografie.de/dkf/wp-content/uploads/2013/08/Body-Modification-3.jpg" width="410" height="631" /></td>
</tr>
</tbody>
</table>

    Vielen Dank für eure Hilfe und einen schönen Tag!

    Matze

    • Gerade eben
    • Anzeige

    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

    Ja... Verdammt! Habe etwas an der functions.php geändert und nun geht Nix mehr. Habe aber von hier aus keinen FTP-Zugriff und muss die Datei heute Abend ersetzen. Sorry, ungünstiges Timing!

    Im Template setzt Du das ein:

    HTML
    <div class="imgleft">
  <img alt="Body Modification 5" src="http://d-k-fotografie.de/dkf/wp-content/uploads/2013/08/Body-Modification-4.jpg" width="410" height="631" />
</div>
<div class="imgright">
  <img alt="Body Modification 5" src="http://d-k-fotografie.de/dkf/wp-content/uploads/2013/08/Body-Modification-3.jpg" width="410" height="631" /></div>
<div class="clear">&nbsp;</div>


    und in der CSS das:

    Code
    div.imgleft{float:left;margin-left:10px;max-width:50%;}
div.imgright{float:right;margin-right:10px;max-width:50%;}
.clear{clear:both;height:0px;}


    Über die Werte bei margin-xx kannst Du den Abstand zum Rand ändern.

    Wenn Du das nicht direkt im Template machen willst, könntest Du auch den Bildern direkt die Klassen geben und das über img.imgleft{} etc. machen.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Einmal editiert, zuletzt von SirEctor (29. August 2013 um 13:37)

    Vielen, vielen Dank! Mir ist gerade ein Licht aufgegangen... OK, erstmal musste ich Wordpress neu aufsetzen, aber das ist wohl eine andere Geschichte.
    Zu sehen ist das ganze jetzt hier: http://d-k-fotografie.de/dkfoto/?page_id=37

    Hast du noch einen Tipp, wie ich das Bild genau mittig darüber setze und wie ich den Abstand zwischen den Bildern vergrößere? Vielen Dank nochmal!

    Hallo,

    gib' dem img mal folgendes:

    Code
    display: block;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;

    Sieht dann so aus:

    Schöne Grüße

    Wo muss ich das einsetzen? Im Code auf der Seite oder in der CSS? Dein Screenshot ist genau das, was ich will!
    So sehen die ersten drei Bilder jetzt aus:

    HTML
    <div class="imgleft"> <img alt="Body Modification 5" src="http://d-k-fotografie.de/dkfoto/wp-content/uploads/2013/08/Body-Modification-6-e1377797295858.jpg" width="845" height="561" /></div>
<div class="imgleft">  <img alt="Body Modification 5" src="http://d-k-fotografie.de/dkf/wp-content/uploads/2013/08/Body-Modification-4.jpg" width="410" height="631" /></div>
<div class="imgright">  <img alt="Body Modification 5" src="http://d-k-fotografie.de/dkf/wp-content/uploads/2013/08/Body-Modification-3.jpg" width="410" height="631" /></div><div class="clear">&nbsp;</div>

    dem ersten Bild kein Div mit class imleft geben, sondern besser

    HTML
    <div class"imgcenter">....</div>


    Dann in der CSS

    Code
    div.imgcenter{margin:0 auto 20px;text-align:center;}

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

    Einmal editiert, zuletzt von SirEctor (30. August 2013 um 09:05)

    Super! Aber nur fast :-) Jetzt stehen sie links nicht 100& in der Flucht. Ich spiele mal ein wenig rum, falls du nicht eh schon die Antwort weißt :-) Vielen, vielen Dank für die Hilfe!

    Versuch mal das

    Code
    div.imgleft{float:left;margin-left:0px;margin-bottom:20px;max-width:50%;}
div.imgright{float:right;margin-right:0px;margin-bottom:20px;max-width:50%;}
div.imgcenter[COLOR=#3E3E3E]{margin:0 auto 20px;text-align:center;}[/COLOR]
.clear{clear:both;height:0px;}


    Mit den Werten margin-left bzw. margin-right musst Du ein wenig testen bis es passt.

    Das Geheimnis des Könnens liegt im Wollen!
    [size=12]Bitte keine Hilfegesuche per PN (auch keine "privaten" Links). Das ist ein öffentliches Forum.[/SIZE]

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden