div statt table, frage dazu

murcielago

Dr. Doom

Registered: Oct 2002
Location: *
Posts: 2689

25.06.2015 - 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

Bearbeitet von murcielago am 29.06.2015, 11:45

-=Willi=-

The Emperor protects

Registered: Aug 2003
Location: ~
Posts: 1624

25.06.2015 - 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

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25476

25.06.2015 - 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=-

The Emperor protects

Registered: Aug 2003
Location: ~
Posts: 1624

25.06.2015 - 09:51

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

mat

Administrator
Legends never die

Registered: Aug 2003
Location: nö
Posts: 25476

25.06.2015 - 10:25

Ganz vergessen wie klein und handlich Bootstrap ist.

11Fire01

Here to stay

Registered: Dec 2002
Location: austria
Posts: 2417

26.06.2015 - 00:34

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

AbSailer

boo hoo wendy

Registered: Aug 2002
Location: Linz/Stmk
Posts: 1160

26.06.2015 - 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

Dr. Doom

Registered: Oct 2002
Location: *
Posts: 2689

26.06.2015 - 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

Dr. Doom

Registered: Oct 2002
Location: *
Posts: 2689

26.06.2015 - 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

boo hoo wendy

Registered: Aug 2002
Location: Linz/Stmk
Posts: 1160

26.06.2015 - 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.

Bearbeitet von AbSailer am 26.06.2015, 12:07

murcielago

Dr. Doom

Registered: Oct 2002
Location: *
Posts: 2689

26.06.2015 - 17:42

danke!

murcielago

Dr. Doom

Registered: Oct 2002
Location: *
Posts: 2689

28.06.2015 - 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

Bearbeitet von murcielago am 28.06.2015, 23:26

murcielago Dr. Doom Registered: Oct 2002 Location: * Posts: 2689	25.06.2015 - 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 Bearbeitet von murcielago am 29.06.2015, 11:45
-=Willi=- The Emperor protects Registered: Aug 2003 Location: ~ Posts: 1624	25.06.2015 - 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 Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25476	25.06.2015 - 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=- The Emperor protects Registered: Aug 2003 Location: ~ Posts: 1624	25.06.2015 - 09:51 Bootstrap 2.3.0 ist ins tc_common.min.css rein-geminimizet.
mat Administrator Legends never die Registered: Aug 2003 Location: nö Posts: 25476	25.06.2015 - 10:25 Ganz vergessen wie klein und handlich Bootstrap ist.
11Fire01 Here to stay Registered: Dec 2002 Location: austria Posts: 2417	26.06.2015 - 00:34 ziemlich komplizierter quelltext für das bissl, was da dargestellt wird
AbSailer boo hoo wendy Registered: Aug 2002 Location: Linz/Stmk Posts: 1160	26.06.2015 - 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 Dr. Doom Registered: Oct 2002 Location: * Posts: 2689	26.06.2015 - 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 Dr. Doom Registered: Oct 2002 Location: * Posts: 2689	26.06.2015 - 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 boo hoo wendy Registered: Aug 2002 Location: Linz/Stmk Posts: 1160	26.06.2015 - 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. Bearbeitet von AbSailer am 26.06.2015, 12:07
murcielago Dr. Doom Registered: Oct 2002 Location: * Posts: 2689	26.06.2015 - 17:42 danke!
murcielago Dr. Doom Registered: Oct 2002 Location: * Posts: 2689	28.06.2015 - 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 Bearbeitet von murcielago am 28.06.2015, 23:26

div statt table, frage dazu

Forum Index > Software > Coding Stuff

murcielago

-=Willi=-

mat

-=Willi=-

mat

11Fire01

AbSailer

murcielago

murcielago

AbSailer

murcielago

murcielago