Flexbox Layout anpassen

fireb · 14 Juli 2018, 18:57:59

Hallo,

ich bin gerade dabei mein TabletUI mit Flexbox anzupassen.

Ich würde gerne in jedem Raum und auch auf meiner Übersichtsseite ein Temperatur- Chart einbauen. Meine Räume sind immer auf zwei Spalten aufgeteilt. Gedacht habe ich mir, dass ich das Temperatur- Chart entweder darüber oder darunter über beide Spalten breit lege.

Leider habe ich es bisher nicht geschafft, dies umzusetzen. Könnt Ihr mir eventuell dabei behilflich sein? Ich kenne mich mit HTML und CSS etwas aus, allerdings nicht so gut um einen Lösungsweg für meine Vorstellungen zu finden

Der Code von meiner Startseite sieht folgendermaßen aus:

Code Auswählen


<!DOCTYPE html>
<html>
<body>
    <div class="page" id="content_home">
		<div class="hbox">
			<div class="vbox phone-width">
				<div class="card lift">					
					<header>Räume</header>


					<!--
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_light_haus","var_name":"Haus","var_icon":"fa-home"}'></div>
					</section>
-->
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_kueche","var_name":"Küche","var_icon":"oa-scene_dinner"}'></div>
					</section>
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_wohnzimmer","var_name":"Wohnzimmer","var_icon":"oa-scene_livingroom"}'></div>
					</section>
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_badezimmer","var_name":"Bad","var_icon":"oa-scene_shower"}'></div>
					</section>
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_schlafzimmer","var_name":"Schlafzimmer","var_icon":"oa-scene_sleeping"}'></div>
					</section>
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_kueche","var_name":"Keller","var_icon":"oa-scene_laundry_room"}'></div>
					</section>
				</div>
			</div>
		
			<div class="vbox phone-width">
				<div class="card lift">
					<header>Sicherheit</header>
					<section>
						<div data-template="template_link.html" data-parameter='{"var_device":"","var_link":"content_cam","var_name":"Kameras","var_icon":"mi-videocam"}'></div>
					</section>


					<section>
						<div data-template="template_fenster.html" data-parameter='{"var_device":"BZ.Fenster","var_name":"Badezimmer","var_dropid":"bz"}'></div>
					</section>

					<section>
						<div data-template="template_fenster.html" data-parameter='{"var_device":"SZ.Fenster","var_name":"Schlafzimmer","var_dropid":"sz"}'></div>
					</section>

					<section>
						<div data-template="template_fenster.html" data-parameter='{"var_device":"WZ.Fenster","var_name":"Wohnzimmer","var_dropid":"wz"}'></div>
					</section>

					<section>
						<div data-template="template_fenster.html" data-parameter='{"var_device":"KU.Fenster","var_name":"Küche","var_dropid":"ku"}'></div>
					</section>

				</div>
			</div>



	</div>
</body>

</html>

Liebe Grüße
fireb

FHEM Forum

Flexbox Layout anpassen

fireb