Bilder und text zentriert – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Bilder und text zentriert Tue, 21 Apr 20 09:32:49 Z https://forum.selfhtml.org/self/2020/apr/21/bilder-und-text-zentriert/1769263#m1769263 https://forum.selfhtml.org/self/2020/apr/21/bilder-und-text-zentriert/1769263#m1769263 <p>hallo, Vor einigen Tagen habe hier gefragt wie öffnet eine neu Fenster, die lösung habe <a href="https://forum.selfhtml.org/self/2020/apr/16/bootstrap-4-modal-neben-dem-triggerelement-offnen/1769151#m1769151" rel="noopener noreferrer">gefunde </a>...</p> <p>jetzt habe eine andere Probleme...</p> <p>Ich versuche das öffnet Fenster zu füllen, ich möchte in der öffnet Fenster auf linke Seite bekomme das Bild von ein Produkt und auf rechte Seite der Beschreibung für den Produkt...</p> <p>Die Idee</p> <p><a href="/images/3a26a1fa-83b1-11ea-b5d1-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/3a26a1fa-83b1-11ea-b5d1-b42e9947ef30.png?size=medium" alt="was ich möchte bekomme" title="was ich möchte bekomme" loading="lazy"></a></p> <p>Der Code wie baue der Erste fenster und der öffnet Fenster</p> <pre><code class="block"><div class="container-fluid"> <div class="row"> <div class="col"> <div class="product-grid"> <div class="product-image"> <a class="link" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php"> <img alt="" class="bild" src="photo/111.jpg"> </a> </div> <div class="product-content"> <a class="links" href="/tachen_&_rucksacke/fenster/mochila_doble_tirantes-violeta.php"> <p class="title">Mochila doble tirantes Violeta</p> </a> </div> <div class="price">$16.00</div> <div class="div-zoom"> <span class="zum-warenkorb">zum warenkorb hinzufügen</span> <i class="fa fa-search-plus" style="font-size: 94%; color: white; background-color: #595959; padding: 3%; cursor: zoom-in;" onclick='layer_show();'></i></div> </div> </div> <!-- En el momento que se pulse sobre la capa transparente se cerrara --> <div id="layerPreview" > </div> <div id='layerPreviewContent'> <!-- Mostramos el texto de cerrar para poder cerrar la ventana --> <div id="tittel-text">Rucksack aus Hanf Viola <span id="closse-text" onclick="layer_close();">Schließen</span></div> <div ><img id="bild-text" alt="" src="photo/111.jpg"></div> <div id="bild-text-beschreibung"> <p>Verfügbarkeit: eine Menge</p> <p>Zustellung innerhalb von: 1-2 Tage</p> </div> </div> </div> </div> </code></pre> <p>Hier der <strong>Css</strong> Code für das Fenster den wird geöffnet..</p> <pre><code class="block">#layerPreviewContent #bild-text img { width: 1%; } #bild-text-beschreibung p {padding-top: 5px; text-align: right; } </code></pre> <p>Das Bild was ich bekomme mit diesem Code...</p> <p><a href="/images/b3b405b6-83b2-11ea-9349-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/b3b405b6-83b2-11ea-9349-b42e9947ef30.png?size=medium" alt="was ich möchte bekomme" title="was ich möchte bekomme" loading="lazy"></a></p> <p><a href="https://jsfiddle.net/ichder/ky3t0pex/1/" rel="noopener noreferrer">Hier</a> das ganze code...</p> <p>Kann Bitte jemand helfe mit dieser Probleme ?</p> Bilder und text zentriert Tue, 21 Apr 20 13:43:32 Z https://forum.selfhtml.org/self/2020/apr/21/bilder-und-text-zentriert/1769298#m1769298 https://forum.selfhtml.org/self/2020/apr/21/bilder-und-text-zentriert/1769298#m1769298 <p>Geschafft! </p> <p>Ich have der code vom Fenster Ein Bisschen verendärt....</p> <p>von</p> <pre><code class="block"> <div id="layerPreview" > </div> <div id='layerPreviewContent'> <div id="tittel-text">Rucksack aus Hanf Viola <span id="closse-text" onclick="layer_close();">Schließen</span></div> <div ><img id="bild-text" alt="" src="photo/111.jpg"></div> <div id="bild-text-beschreibung"> <p>Verfügbarkeit: eine Menge</p> <p>Zustellung innerhalb von: 1-2 Tage</> </div> </div> </code></pre> <p>die lösung war verendärt der <strong>id</strong> name auf `<div ><img id="bild-text" alt="" src="photo/111.jpg"></div>, der auf der Tag <strong>img</strong> war, wechsel zum der <strong>div</strong></p> <p>wie der Code aussiesht...</p> <pre><code class="block"> <div id="layerPreview" > </div> <div id='layerPreviewContent'> <div id="tittel-text">Rucksack aus Hanf Viola <span id="closse-text" onclick="layer_close();">Schließen</span></div> <div id="bild-text" ><img alt="" src="photo/111.jpg"></div> <div id="bild-text-beschreibung"> <p>Verfügbarkeit: <b>eine Menge</b></p> <p>Zustellung innerhalb von: <b>1-2 Tage</b></p> <p>Hanf: <b>50%</b></p> <p>Baumwolle: <b>50%</b></p> </div> </div> </code></pre> <p>Ein Screenshot wie das Fenster aussiehst...</p> <p><a href="/images/d0ea342a-83d5-11ea-992d-b42e9947ef30.png" rel="noopener noreferrer"><img src="/images/d0ea342a-83d5-11ea-992d-b42e9947ef30.png?size=medium" alt="wie das fenster aussiehst" title="wie das fenster aussiehst" loading="lazy"></a> ...und <a href="https://jsfiddle.net/ichder/ky3t0pex/3/" rel="noopener noreferrer">hier</a> ganze Code.... </p>