div statt table, frage dazu

Seite 1 von 1 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/div-statt-table-frage-dazu_243373/page_1 - zur Vollversion wechseln!

murcielago schrieb am 25.06.2015 um 08:27

Hi Leute,

mir ist leider kein besserer Title eingefallen, aber es geht um folgende Seite:

http://www.ziener-kaffee.de

und dort konkret um die öffnungszeiten rechts.

Ich hätte jetzt gern folgendes: Wenn der Browser verkleinert wird, soll das DIV mit den Uhrzeiten einfach nach unten rutschen und die Überschrift (also zB Montag&Dienstag) darüber stehen. Also nicht mehr nebeneinander, sondern der Uhrzeiten-Div soll eben dann runter rutschen So dass es quasi wie eine einspaltige "Tabelle" dann ist...

Any ideas?

TIA

-=Willi=- schrieb am 25.06.2015 um 09:19

Wordpress Templates und Bootstrap 2 verkomplizieren die Sache natürlich...

1. Der Sidebar eine Klasse geben
2.

Code: CSS

@media (max-width: 1199px) {
  .sidebar {
    float: none;
    position: relative;
    left: 220px;
  }
}

Oder so irgendwie...mit der media-Query bin ich mir noch nicht sicher. Auf einem iPhone 6 Plus stimmt das Layout zumindest, nur in dem Limbo zw. Handy und Desktop (=Tablet) stehen die Öffnungszeiten raus hab ich gesehen.

mat schrieb am 25.06.2015 um 09:44

Ich sehe kein Bootstrap im Code oder den inkludierten Stylesheets. Aber ja, so etwas macht man normalerweise mit Bootstrap und einem Grid-Layout, sonst wird es ziemlich komplex mit den Media-Queries.

Du solltest zuerst mal den Bug bei einer Breite von unter 1200px fixen, da steht die Tabelle aus dem verkleinerten Mainframe raus. Das liegt daran, dass #right.widget-area auch unter 1200px noch eine Breite von 250px gegeben wird, die allerdings mti dem kleineren Mainframe nicht mehr übereinstimmen.

Nachdem dein Table sowieso aus lauter divs besteht, kannst du beim vollständigen Mobile-Design einfach die display: table, display: table-row und display: table-cell usw. mit display: block ersetzen.

-=Willi=- schrieb am 25.06.2015 um 09:51

Bootstrap 2.3.0 ist ins tc_common.min.css rein-geminimizet.

mat schrieb am 25.06.2015 um 10:25

Ganz vergessen wie klein und handlich Bootstrap ist.

11Fire01 schrieb am 26.06.2015 um 00:34

ziemlich komplizierter quelltext für das bissl, was da dargestellt wird

AbSailer schrieb am 26.06.2015 um 07:42

warum wurde #right.widget-area denn eine fixe Breite von 250px mitgegeben?

Fixe Breiten in flexiblem Layout sind immer mit Vorsicht zu genießen

murcielago schrieb am 26.06.2015 um 10:57

danke erstmal Leute. bin aktuell nicht beim PC und werde das am Montag mal anschauen. ja dachte eh schon dass es die fixe breite ist. eh logisch eigentlich.

aber was mir sehr wichtig wäre ist dass eben die UHRZEITEN im falle der Verkleinerung nach unten rutschen. wie mach ich das im CSS? irgendwas mit clear und float vermutlich nur kenn ich mich da zu schlecht aus

danke an alle!

murcielago schrieb am 26.06.2015 um 10:57

Zitat von 11Fire01
ziemlich komplizierter quelltext für das bissl, was da dargestellt wird

jo das macht alles wordpress dafür kann ich nix

AbSailer schrieb am 26.06.2015 um 12:01

du machst aus der display: row-cell einfach ein display: block (wo es in den Media Queries Sinn macht)

EDIT: wie mat eigentlich schon gemeint hatte

Zitat
Nachdem dein Table sowieso aus lauter divs besteht, kannst du beim vollständigen Mobile-Design einfach die display: table, display: table-row und display: table-cell usw. mit display: block ersetzen.

murcielago schrieb am 26.06.2015 um 17:42

danke!

murcielago schrieb am 28.06.2015 um 23:21

Zitat von AbSailer
du machst aus der display: row-cell einfach ein display: block (wo es in den Media Queries Sinn macht)

EDIT: wie mat eigentlich schon gemeint hatte

wenn ich das mache, sind die zeiten IMMER unter "montag & dienstag" zB. ich will das aber nur wenns verkleinert wird... hmm.

edit: ah, mit den media queries kann ich das ja jetzt prüfen. perfekt, funktioniert! danke