zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Drei Boxen mit gleicher Höhe in allen Browsern

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 06.04.2016, 14:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2014
Beiträge: 17
felicesinger befindet sich auf einem aufstrebenden Ast
Standard Drei Boxen mit gleicher Höhe in allen Browsern

Hallo,

ich habe in Wordpress mit einem Content Editor drei Boxen erstellt, mit grauem Hintergrund und dunkelgrauem Rand, die nebeneinander sind und unterschiedlich viel Text enthalten.

Jetzt werden die Boxen mit einer unterschiedlichen Höhe dargestellt. Ich hätte aber gerne, dass die Boxen immer die gleiche Höhe (der Box mit dem meisten Text) haben. Zusätzlich habe ich festgestellt, dass die boxen auch noch in jedem Brwoser unterschiedlich dargestellt werden. In Firefox sind die beiden rechten Boxen gleich hoch, in Chrome ist die rechte länger usw.

Die rechte Box enthält auf jeden Fall den meisten Text.
Im Anhang ist mal ein Bild, der aktuellen Ansicht in Firefox.

Über den Content Editor kann ich den Boxen (jeer einzeln) sowohl eine neue Class als auch eine ID zuweisen.

Hier ist das, was ich an aktuellem css sehen kann (Wobei ich nicht weiß, was da überhaupt relevant ist):

Code:
.thrv_wrapper, .ignore_during_draggable {
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 1px;
}
.thrv_wrapper div {
    box-sizing: content-box;
}
.thrv_wrapper.thrv_contentbox_shortcode {
    position: relative;
}
.tve_flt .tve_white.tve_cb.tve_cb5 {
    border: 2px solid #D3D1D1;
}
.tve_white.tve_cb.tve_cb5 {
    background: #EFEFEF;
}
.tve_flt .tve_cb {
    width: auto;
}
.tve_flt .tve_cb {
    width: auto;
}
.tve_flt .tve_cb .tve_cb_cnt {
    padding: 20px;
}
.tve_flt .tve_white.tve_cb .tve_cb_cnt > p {
    margin: 0px;
}
.tve_cb_cnt::after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.tve_oth, .tve_thc {
    padding: 0% 2% 0% 0%;
    width: 32%;
}
Und noch ein anderer Anhang, damit man die Struktur des Codes erkennen kann.

Kann mir jemand sagen, wie ich es schaffe, dass diese drei Boxen immer in gleicher Höhe angezeigt werden (in allen Browsern)?

Vielen Dank für eure Hilfe!
Angehängte Grafiken
Dateityp: png boxen.png (144,4 KB, 11x aufgerufen)
Dateityp: png code.png (138,7 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 06.04.2016, 14:09
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Dafür gibt es flexbox, warum verwendest du es nicht?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 06.04.2016, 16:10
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2014
Beiträge: 17
felicesinger befindet sich auf einem aufstrebenden Ast
Standard Danke

Hallo cloned,

das klingt ganz interessant. Wenn ich es richtig verstehe, müsste ich dann die drei Boxen in einen Container packen und dann den drei Boxen eine Class geben. z.B. hoehe und das dann so verwenden?

Code:
.hoehe {
  align-items: stretch;
}
Oder muss ich da irgendwo noch sagen, dass das eine flexbox ist?
Mit Zitat antworten
  #4 (permalink)  
Alt 06.04.2016, 16:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Ja, du musst dem umliegenden Element ein display:flex geben, damit es mal zur flexbox wird. Du musst den drei Boxen auch keine Klasse geben, du machst einfach .box > div{align-items:stretch}

Oder falls das nicht funktioniert gib deinen Kindelementen einfach auch display:flex, wie hier beschrieben (Die Präfix-Versionen im CSS brauchst du eigentlich nciht mehr, die Browser können das auch schon ohne)

Suche auch nach "flexbox equal height" um alternative Lösungswege zu finden.
Mit Zitat antworten
  #5 (permalink)  
Alt 06.04.2016, 19:30
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2014
Beiträge: 17
felicesinger befindet sich auf einem aufstrebenden Ast
Standard

Ok, ich habe das jetzt hinbekommen, dass die boxen die gleiche Höhe haben ... Super! Vielen Dank!

Ein Problem habe ich aber noch. Er zeigt mir jetzt auch auf dem smartphone die drei Boxen nebeneinander an (also ganz schmal nebeneinander). Da wäre es natürlich gut, wenn die dann untereinander wären auf voller Displaybreite.

Hast du noch einen Tipp, wie ich das schaffe?
Mit Zitat antworten
  #6 (permalink)  
Alt 07.04.2016, 09:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Kurz gesagt mit Mediaqueries.
Du kannst mit flex-wrap:wrap definieren, dass die Boxen sich "wrappen", also auf mehrere Zeilen verteilt werden. Eventuell noch zusätzlich mit mediaqueries width:100% für die Boxen definieren (Weiß jetzt nicht auswendig, ob man das braucht, einfach ausprobieren)
Mit Zitat antworten
  #7 (permalink)  
Alt 07.04.2016, 15:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2014
Beiträge: 17
felicesinger befindet sich auf einem aufstrebenden Ast
Standard

Hallo cloned,

danke, dass du mich mal wieder in die richtige Richtung "gestoßen" hast.

Eine letzte Aufgabe habe ich jetzt noch zu bewältigen. Vielleicht kannst du mir da auch den richtigen Tipp geben?

Über jeder der 3 Textboxen (die jetzt die gleiche Höhe haben) ist ein Bild, das zu der Box gehört. Es sind also quasi 3 Bilder nebeneinander und darunter drei Textboxen nebeneinander.

Auf dem Handy wird das jetzt so angezeigt:
Untereinander: Bild1, Bild2, Bild3, Text1, Text2, Text3

Das ist nicht ideal, weil die Texte ja eigentlich zu den Bildern gehören. Ich möchte deshalb folgendes erreichen:
Untereinander: Bild1, Text1, Bild2, Text2, Bild3, Text3

Das ist wahrscheinlich im html anders aufzubauen?

Deshalb schicke ich hier mal den html code und das css.

Aktueller html (Grundaufbau):

HTML-Code:
<div class="list">
<div class="list__item"><a href="http://www.link"><img src="bild1.png" scale="0" height="316" width="316"></a></div>
<div class="list__item"><a href="http://www.link"><img src="bild2.png" scale="0" height="316" width="316"></a></div>
<div class="list__item"><a href="http://www.link"><img src="bild3.png" scale="0" height="316" width="316"></a></div>
<div class="list__item_text" style="background-color:rgba(239,239,239,1); border:2px solid #ccc;">Text1</div>
<div class="list__item_text" style="background-color:rgba(239,239,239,1); border:2px solid #ccc;">Text2</div>
<div class="list__item_text" style="background-color:rgba(239,239,239,1); border:2px solid #ccc;">Text3</div>
</div>
Und das css:

Code:
.list
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
overflow: hidden;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}

.list__item
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 33%;
float: left;
width: 318px !important;
margin-left: 5px;
margin-right: 5px;
}

.list__item_text
{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 274px !important;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
padding: 20px;
font-family: Raleway;
align: center;
}
Mit Zitat antworten
  #8 (permalink)  
Alt 07.04.2016, 15:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Schmeiß deine div-Boxen (divitis) weg. Gehört etwas zusammen, dann gib es auch zusammen.
Code:
<ul class="ich bin eine richtige liste">
  <li><p><img src="some/pic.jpg"> Da ist ein Text. Und weil das Bild im Selben Paragraph steht, wird es auch nicht vom Paragraph getrennt</p>
  </li>
  <li><p><img src="some/pic.jpg"> Da ist noch ein Text. Und weil das Bild im Selben Paragraph steht, wird es auch diesmal nicht vom Paragraph getrennt</p>
  </li>

</ul>
Btw woher hast du das scale Attribut?
Mit Zitat antworten
  #9 (permalink)  
Alt 07.04.2016, 15:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.09.2014
Beiträge: 17
felicesinger befindet sich auf einem aufstrebenden Ast
Standard

Hallo cloned,

das mit der richtigen Liste hatte ich probiert, aber dann zwingt mir das Theme solche Aufzählungszeichen auf:
  • Punkte vorweg

Und diese Punkte habe ich nicht wegbekommen, deshalb die div-Variante. Hast du eine Idee, wie ich die Punkte "unterdrücke" wenn ich eine Liste mache?

Das scale-Attribut ist irgendwie noch aus dem Content Builder gewesen und habe ich einfach mitkopiert (habe aber keine Ahnung, was das bewirkt).

Also, wenn ich die Punkte wegbekomme, mache ich gerne eine Liste.
Falls ich die Punkte nicht weg bekommen kann, brauche ich eine andere Lösung.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 07.04.2016, 15:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

mit
Code:
ul{list-style-type:none}
bekommst du die weg... Nach was hast du denn da gegooglet dass du das nicht gefunden hast?

Was das scale-Attribut bewirkt wüsste ich auch gerne, weil das gibt es im HTML gar nicht. Also ich kann dir sagen, was es bewirkt: Gar nichts. Aber es wäre schön zu wissen, was sie theoretisch bewirken sollen.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Horizontales Menü wird in verschiedenen Browsern mit unterschiedlicher Höhe angezeigt christianj74 CSS 5 01.03.2016 09:06
Boxen mit unterschiedlicher Höhe floaten just4download CSS 7 19.09.2010 21:45
input feld + submit button auf gleicher höhe. funktioniert außer in IE8 + FF2+3 monran CSS 4 04.12.2009 10:07
2 div boxen mit gleicher Höhe katoc CSS 7 23.07.2008 15:25
Automatische Höhe zweier Boxen | Abschluss auf gleicher Höhe mischa CSS 5 07.02.2005 18:21


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:45 Uhr.