kostenloser Webspace werbefrei: lima-city


zwei (Div) Elemente Central Nebeneinander

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    russia-hawks

    Kostenloser Webspace von russia-hawks

    russia-hawks hat kostenlosen Webspace.

    Hallo Coder-Freunde,

    ich habe ein Problem bei der Umsetzung eines Auswahlmenüs. Ich möchte auf einer Webseite eine Auswahl mit Bildern und Bildunterschrift anzeigen lassen. Dazu habe ich noch einen coolen Overlay-Effekt für das Bild. Beim Klick ist ein Link hinterlegt.
    Ich schaffe es leider nicht die beiden Elemente zentral Nebeneinander anzeigen zu lassen. Entweder sind diese Untereinander oder Nebeneinander aber dann entweder links oder rechts ausgerichtet.

    Habe dazu mal ein Fiddle-Projekt angelegt mit meinem bisherigen Code: http://jsfiddle.net/rjb9a3us/12/

    So in etwa stelle ich es mir vor:
    https://image.ibb.co/gzSa9y/Soll_Zustand.png


    Vielleicht kann mir ja jemand hier etwas auf die Sprünge helfen. Vielen Dank vorab.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. h***********r

    So könnte man es machen
    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    #box{
    	margin: auto;
        width: 25%;
    	height: 50px;
    }
    
    #box1{
    	float: left; 
    	width: 50%;
    	height: 100%;
    	background-color: red;
    }
    
    #box2{
    	float: right; 
    	width: 50%;
    	height: 100%;
    	background-color: blue;
    }
    
    	</style>
    </head>
    <body>
    	<div id="box">
    		<div id="box1">Content</div>
    		<div id="box2">Content</div>
    	</div>
    </body>
    </html>


    Alternativ kann man das aber auch über eine Tabelle lösen, ist aber umständlich.

    Beitrag zuletzt geändert: 29.6.2018 15:38:16 von horstexplorer
  4. Autor dieses Themas

    russia-hawks

    Kostenloser Webspace von russia-hawks

    russia-hawks hat kostenlosen Webspace.

    horstexplorer schrieb:
    So könnte man es machen
    <!DOCTYPE html>
    <html>
    <head>
    	<style>
    #box{
    	margin: auto;
        width: 25%;
    	height: 50px;
    }
    
    #box1{
    	float: left; 
    	width: 50%;
    	height: 100%;
    	background-color: red;
    }
    
    #box2{
    	float: right; 
    	width: 50%;
    	height: 100%;
    	background-color: blue;
    }
    
    	</style>
    </head>
    <body>
    	<div id="box">
    		<div id="box1">Content</div>
    		<div id="box2">Content</div>
    	</div>
    </body>
    </html>


    Alternativ kann man das aber auch über eine Tabelle lösen, ist aber umständlich.


    Ist leider auch mit deinem Code untereinander: http://jsfiddle.net/rjb9a3us/16/
  5. h***********r

  6. Autor dieses Themas

    russia-hawks

    Kostenloser Webspace von russia-hawks

    russia-hawks hat kostenlosen Webspace.

    Ach, du hattest noch anderen Code in deinem Beitrag. Mit dem richtigen Code funktioniert es auch. Vielen Dank!

    Ach nun funktioniert der Overlay Effekt irgendwie nicht mehr?
    Habe ich was übersehen? http://jsfiddle.net/rjb9a3us/22/

    Beitrag zuletzt geändert: 29.6.2018 16:28:59 von russia-hawks
  7. prinz-und-gloeckner

    prinz-und-gloeckner hat kostenlosen Webspace.

    Da hast du wohl einfach deine Klasse 'container' vergessen.

    Ansonsten sieht das alles nach ziemlich gruseliger div-Markierungssuppe aus ;o)

    Solltest einfach mal statt div die Elemente figure und figcaption (HTML5) verwenden und nicht alles durcheinander Block- und Phrasenelemente als Geschwister in einem Elternelement notieren ;o)


    Ansonsten kannst du es statt mit float auch mal mit display:inline-block; width: 50% versuchen.
    Da gibt es viele Möglichkeiten, um zum Ziel zu kommen.
  8. Moin,
    ansich kann man das ganze leicht lösen.
    Mir ist öfter aufgefallen dass "50%" aus fantastischen Gründen
    manchmal nicht so funktioniert wie man sich dass gerade noch gedacht hat.

    Viele vergessen einfach folgendes:

    *, html {
    margin : 0;
    padding :  0;
    }


    Dann funktioniert auch folgendes, kompliziertes Konstrukt:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
    *, html {
    margin : 0;
    padding :  0;
    }
    #box{
        margin: 0 auto;
        width: 25%;
        height: 50px;
    }
     
    #box1{
        float: left; 
        width: 50%;
        height: 100%;
        background-color: red;
    }
     
    #box2{
        float: right; 
        width: 50%;
        height: 100%;
        background-color: blue;
    }
     .clear {
    clear : both;
    }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="box1">Content</div>
            <div id="box2">Content</div>
    <div class="clear"></div>
        </div>
    </body>
    </html>


    Siehe hier: https://seven-sign.lima-city.de/boxed.php


    Tabellen gehen natürlich auch:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
    *, html {
    margin : 0;
    padding :  0;
    }
    #box_b {
    margin : 0 auto;
    width : 25%;
    height : 50px;
    }
    #red {
        background-color: red;
    }
    #blue {
        background-color: blue;
    }
        </style>
    </head>
    <body>
    <table id="box_b">
    <tr>
    <td id="blue">Content</td>
    <td id="red">Content</td>
    </table>
    </body>
    </html>


    Siehe hier: https://seven-sign.lima-city.de/boxed.php

    Oder mit figure:

    <!DOCTYPE html>
    <html>
    <head>
        <style>
    *, html {
    margin : 0;
    padding :  0;
    }
    .figure_container {
    margin : 0 auto;
    width : 25%;
    height : 50px;
    }
    .red {
    	float: left; 
        width: 50%;
        background-color: red;
    }
    .blue {
    	float: right; 
        width: 50%;
        background-color: blue;
    }
    .figure_end {
    	clear : both;
    }
        </style>
    </head>
    <body>
    <div class="figure_container">
    <figure class="red">
    <img src="Link zum Bild" alt="Text" width="" height="" />
    <figcaption>Content</figcaption>
    </figure>
    <figure class="blue">
    <img src="Link zum Bild" alt="Text" width="" height="" />
    <figcaption>Content</figcaption>
    </figure>
    <div class="figure_end"></div>
    </div>
    </body>
    </html>



    Siehe hier: https://seven-sign.lima-city.de/boxed.php

    Alle 3 Lösungen funktionieren eigentlich ganz einfach.

    MfG
  9. Alle hier gennanten lösungen sind viel zu umständlich setze um deine 2 (oder mehrere) Div elemente die du nebeneinander anzeigen möchtest ein DIV also:
    <div id="main">
          <div id="box1">Bla Bla Bla</div>
          <div id="box2">Bla Bla Bla</div>
    </div>

    Danach gibst du dem element main einfach den wert "display: flex;" mit und legst dann noch für * ein box-sizing:border-box; mit. Dann kannst du für box1 box2 ... noch width: auto und height: auto; festlegen und schon hast du auch noch eine dynamik mit drinnen. Wenn dein bild aber jetzt zu klein skaliert wird kanst du das mit min-height und mit min-width ausgleichen.
    *{
        box-sizing:border-box;
    }
    #box1,#box2{
        height: auto;
        width: auto;
        display: block;
    }
    #main{
       ... Andere eigenschaften die du noch mitgeben willst...
       display: flex;
    }


    Hoffe der Code hilft dir
  10. Autor dieses Themas

    russia-hawks

    Kostenloser Webspace von russia-hawks

    russia-hawks hat kostenlosen Webspace.

    Vielen Dank für eure Hilfe. Ich habe noch Probleme den Overlay-Effekt da vernünftig mit unter zu bringen. Er zieht noch über beide Elemente, sieht nicht schick aus.
  11. prinz-und-gloeckner

    prinz-und-gloeckner hat kostenlosen Webspace.

    Kannst dir das hier ja mal ansehen, da sind verschiedene Varianten umgesetzt:

    https://prinz-und-gloeckner.lima-city.de/tmp/bild.xhtml

    Zu beachten: Diverse Sachen wie diese flex-Boxen, die transitions sind noch eher als experimentell einzustufen, dazu gibt es beim W3C immer noch keine offizielle Empfehlung, die Implementierungsübersicht zeigt da teils noch grobe Lücken.

    Die Probleme bei einer Breitenangabe von zwei Elementen mit 50% liegen oft an Leerzeichen dazwischen oder Rahmen oder margin, padding nicht gleich 0.
  12. Autor dieses Themas

    russia-hawks

    Kostenloser Webspace von russia-hawks

    russia-hawks hat kostenlosen Webspace.

    Hallo zusammen,

    ich habe es nun über eine Tabelle mit Figure und Figcaption umgesetzt. Hier mal mein Code, gibt es da noch Verbesserungen?

    http://jsfiddle.net/ca1x8hL0/36/
  13. prinz-und-gloeckner

    prinz-und-gloeckner hat kostenlosen Webspace.

    Wenn es sich wirklich um tabellenartigen Inhalt handeln soll, ist es schon wichtig, das auch ordentlich herauszuarbeiten, also caption einbauen, thead, tfoot, tbody, th, Zellenstruktur mit border="1" bei table sichtbar machen.

    Wenn es kein tabellenartiger Inhalt ist, läßt du die Tabelle natürlich einfach weg ;o)
  14. Autor dieses Themas

    russia-hawks

    Kostenloser Webspace von russia-hawks

    russia-hawks hat kostenlosen Webspace.

    Nein, es soll tatsächlich nur Bilder mit Unterschrift zum Klicken angezeigt werden.
  15. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!