zwei (Div) Elemente Central Nebeneinander
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anzeigen
aufgefallen
auto
bild
blocken
boxen
code
display
effekt
eigenschaft
element
geschwister
http
inhalt
klicken
notieren
problem
tabelle
url
vergessen
-
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. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
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 -
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/ -
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 -
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. -
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 -
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
-
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.
-
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. -
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/ -
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) -
Nein, es soll tatsächlich nur Bilder mit Unterschrift zum Klicken angezeigt werden.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
