Flexbox - Anfängerhilfe

Begonnen von PingPong, 04 März 2020, 09:47:48

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

PingPong

04 März 2020, 09:47:48
Hallo zusammen,

ich bin gerade dabei meine Visualisierung mit Flexbox zu realisieren, bzw. möchte damit anfangen. Hier im Forum habe ich diverse Seiten gefunden, aus denen ich nun jeweils gewisse Elemente übernehmen möchte.
Leider habe ich von css und Co. überhaupt keine Ahnung.
Jetzt stehe ich vor dem Problem, dass nicht alle Sections auf die Seite passen. Grundsätzlich nicht schlimm, da ich dann halt scrollen müsste.
Allerdings bekomme ich es nicht hin, dass die Header nebeneinander stehen. Der rechte Header ist in den Seiten-Header verschoben.

Ich hoffe, Ihr versteht meine Beschreibung?!
Hat vielleicht jemand nen Tipp für mich, wie ich das korrigieren kann?

MKeY

#1
05 März 2020, 18:20:49
zeig mal deinen html quellcode der Seite, da fehlt bestimmt nur was
Wer Fehler findet, darf sie behalten!
RPi's, D1Mini
Homematic, Hue, Sonoff, Alexa, Xiaomi, ConBee
Prusa MK2.5, Prusa MK3S (MMU2S vorhanden, aber nervtötend)
Lowrider 2CNC

PingPong

#2
06 März 2020, 09:45:36
Hallo und vielen Dank für Deine Antwort.
Wäre ja schön, wenn es das wäre :-)

Hier mal der Code
Code Auswählen
<!DOCTYPE html>
<html>
<head></head>
<body>
    <div class="page" id="content_doors">
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Türen</header>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Tuerkontakt_Haustuer","var_name":"Haustür","var_icon":"ftui-door"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Tuerkontakt_Terrassentuer","var_name":"Terrassentür","var_icon":"ftui-door"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Tuerkontakt_Carport","var_name":"Tür Carport","var_icon":"ftui-door"}'></div>
</section>
</div>
<div class="card lift">
<header>Fenster OG</header>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_Kid1","var_name":"KiZi Kid1","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_Kid3Links","var_name":"KiZi Kid2 links","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"XMI_158d0001b9576b","var_name":"KiZi Kid2 rechts","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"XMI_158d00022d08a3","var_name":"KiZi Kid3 links","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_Kid2","var_name":"KiZi Kid3 rechts","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_Bad","var_name":"Badezimmer","var_icon":"fa-windows"}'></div>
</section>
</div>
</div>
<div class="vbox phone-width">
<div class="card lift">
<header>Fenster UG</header>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_SchlafzimmerLinks","var_name":"SZ links","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_SchlafzimmerRechts","var_name":"SZ rechts","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_SchlafzimmerKeller","var_name":"SZ kleines Fenster","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Kellerfenster","var_name":"Kellerfenster","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fenstersensor_Waschkeller","var_name":"Waschkeller","var_icon":"fa-windows"}'></div>
</section>
</div>
<div class="card lift">
<header>Fenster EG</header>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_SchlafzimmerLinks","var_name":"SZ links","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_SchlafzimmerRechts","var_name":"SZ rechts","var_icon":"fa-windows"}'></div>
</section>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Fensterkontakt_SchlafzimmerKeller","var_name":"SZ kleines Fenster","var_icon":"fa-windows"}'></div>
</section>
</div>
<div class="card lift">
<header>Fenster Dachgeschoss</header>
<section>
<div data-template="template_doors.html" data-parameter='{"var_device":"Kellerfenster","var_name":"Kellerfenster","var_icon":"fa-windows"}'></div>
</section>
</div>
</div>
</div>
</div>
</body>
</html>


VG
Marc

MKeY

#3
06 März 2020, 16:01:52 Letzte Bearbeitung: 06 März 2020, 16:03:34 von MKeY
Hast du noch den html code deiner (vermutlich) index.html?
Bei der content page scheint mMn nichts falsch zu sein
Wer Fehler findet, darf sie behalten!
RPi's, D1Mini
Homematic, Hue, Sonoff, Alexa, Xiaomi, ConBee
Prusa MK2.5, Prusa MK3S (MMU2S vorhanden, aber nervtötend)
Lowrider 2CNC

PingPong

#4
06 März 2020, 20:43:16
... und hier die index.html

Code Auswählen
<!DOCTYPE html>
<html>
<head>
<title>FHEM - Hausautomatisierung</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- Mobile-Web-Config -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="mobile-web-app-capable" content="yes" />
<!-- Favicon-Icon -->
<link rel="shortcut icon" type="image/x-icon" href="images/home.ico" />
<!-- Cache -->
    <!--<meta http-equiv="Cache-Control" content="no-store" />-->
<!-- FTUI-Settings -->
<meta name="debug" content="0">
<meta name="longpoll_type" content="websocket" />
<meta name="toast" content="1"> <!-- 1,2,3...= n Toast-Messages, 0: No Toast-Messages -->
<!-- Scripts -->
    <script type="text/javascript" src="js/fhem-tablet-ui.min.js" defer></script>
<!-- Icon Fonts -->
<link rel="stylesheet" href="fonts/roman/style.css" />
<!-- Custom CSS -->
    <link rel="stylesheet" href="css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-usercolors-ui.css" />
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
</head>
<body>
<div data-type="loading" data-icon="fa-spinner" data-color="firebrick" data-effect="fa-pulse" class="xxxxl" style="position:absolute;top:50%;left:50%;margin-left:-17.38px;"></div>
<nav id="menu" class="">
<ul>
<li>
<div data-type="clock"
data-format="l,"
class="top-space bigger center">
</div>
<div data-type="clock"
data-format="j.n.Y"
class="bigger center">
</div>
</li>
<li>
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
<div data-type="link" class="default large center top-space left-space-3"
data-width="205"
data-icon-left="fa-home"
data-color="#eee"
data-load="div#content_home"
data-url="#content_home.html"
data-active-color="#2E5E87"
data-active-pattern="(.*index.html|.*#content_home.html)">Home
</div>
<div style="display:inline-block;height:1px;width:80%;background-color:darkorange;"></div>
<div data-type="link" class="large center top-space-mobile left-space-3"
data-width="205"
data-icon-left="fa-cogs"
data-color="#eee"
data-text-align="center"
data-load="div#content_config"
data-url="#content_config.html"
data-active-color="#2E5E87"
data-active-pattern=".*#content_config.html">Einstellungen
</div>
</li>
</ul>
</nav>

<header id="header-nav" class="fixed row">
<table>
<tr>
<td width="15%" style="border-right:1px #F2F3F3 dashed;">
<div data-type="slideout"
data-position="left"
class="big doof"
id="slideout">
</div>
</td>
<td style="border-right:1px #F2F3F3 dashed;">
<div data-type="symbol"
data-device="AlarmStatus"
data-get="Modus"
data-hide="Modus"
data-hide-on="Disarm"
data-states='["Disarm","Away","Home"]'
data-colors='["#aaa","white","flx_orange"]'
data-icons='["fs-security","fs-security_password","fs-building_security"]'
data-background-icons='["none","none","none"]'
class="small inline">
</div>
<div data-type="symbol"
data-device="FritzBox"
data-get="diversity1_state"
data-states='["off","on"]'
data-icons='["fa-mobile","fa-mobile"]'
data-hide="diversity1_state"
data-hide-on="off"
data-colors='["#aaa","white"]'
data-background-icons='["none","none"]'
class="small inline">
</div>
<div data-type="symbol"
data-device="CallList_missedCalls"
data-get="numberOfCalls"
data-states='["0","!0"]'
data-colors='["#333","firebrick"]'
data-icon='["mi-phone","mi-phone warn"]'
data-hide="numberOfCalls"
data-hide-on="0"
data-background-icons='["none","none"]'
class="small inline">
</div>
<div data-type="symbol"
data-device="DWD"
data-get="a_count"
data-states='["0","!0"]'
data-hide="a_count"
data-hide-on="0"
data-icons='["fa-bolt","fa-bolt warn"]'
data-colors='["#aaa","firebrick"]'
data-background-icons='["none","none"]'
class="small inline">
</div>
<div data-type="symbol"
data-device="Temp_Batterie"
data-get="nokDev"
data-states='["0","!0"]'
data-hide="nokDev"
data-hide-on="0"
data-icons='["oa-measure_battery_25","oa-measure_battery_25 warn"]'
data-colors='["#aaa","firebrick"]'
data-background-icons='["none","none"]'
class="small bold inline">
</div>
<div data-type="symbol"
data-device="Briefkasten"
data-get="state"
data-states='["on","off"]'
data-hide-on="off"
data-icons='["fa-envelope","fa-envelope"]'
data-colors='["white","#aaa"]'
data-background-icons='["none","none"]'
class="small inline">
</div>
</td>
<td width="20%" ">
<div data-type="clock"
data-format="H:i"
data-interval="1000"
class="bigger centered"
style="color:#ffffff;">
</div>
</td>
</tr>
</table>
</header>

<main id="panel" class="">
<script type="text/javascript">
window.onload = function start() {
slideUp();
}
function slideUp() {
var delay = 298;
var timeout;

timeout = setTimeout(function(){
$('html, body').animate({scrollTop:0}, 500);
}, 1000 * delay);

var moveEventType=((document.ontouchmove!==null)?'mousemove':'touchstart');
$(document).bind(moveEventType, function(e) {
clearTimeout(timeout);

timeout = setTimeout(function(){
$('html, body').animate({scrollTop:0}, 500);
}, 1000 * delay);
});
}
</script>
<div data-type="popup"
data-device="CallMonitor"
data-get="event"
data-get-on="(ring|call)"
data-get-off="disconnect"
data-mode="fade"
data-width="80%"
data-height="80%">
<div class="dialog" id="call">
<header>ANRUF</header>
<table>
<tr>
<td>
<div data-type="symbol"
data-device="CallMonitor"
data-get="event"
data-states='["ring","connect","call"]'
data-icons='["mi-ring_volume fa-blink","mi-phone_in_talk","mi-call fa-blink"]'
data-colors='["firebrick","#aa6900","#32a054"]'
class="bigger top-space">
</div>
</td>
<td>
<div data-type="symbol"
data-device="CallMonitor"
data-get="direction"
data-states='["incoming","outgoing"]'
data-icons='["mi-call_received","mi-call_made"]'
data-colors='["flx_darkblue","flx_darkblue"]'
class="bigger top-space">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div data-type="image"
data-device="CallMonitor"
data-get="contact_image"
data-path="../images/contacts/"
data-size="80%"
class="top-space">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div data-type="label"
data-device="CallMonitor"
data-get="external_number"
class="bigger top-space-2">
</div>
</td>
</tr>
<tr>
<td colspan="2">
<div data-type="label"
data-device="CallMonitor"
data-get="external_name"
class="bigger top-space">
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="screensaver" data-type="screensaver" data-timeout="300" style="height:99.99%;width:99.99%;">
<div data-type="dwdopendata"
data-device="DWD"
data-description="false"
data-region="false"
data-instructions="false"
data-timerange="false"
data-max="6"
data-hide="a_count"
data-hide-on="0"
class="large top-space">
</div>
<div data-type="analogclock"
data-size="550"
data-body="none"
data-dial="austria"
data-dial-color="#666"
data-hour-color="#888"
data-minute-color="#888"
data-second-color="flx_darkblue"
data-mbehave="ebounce"
data-sbehave="ebounce"
class="vertikalzentriert">
</div>
<table class="afterclock">
<tr>
<td height="65.56px">
<div data-type="symbol"
data-device="FritzBox"
data-get="tam1_newMsg"
data-states='["0","([1-9]|[1][0-9]|[2][0-9]|[3][0-9])"]'
data-icons='["mi-voicemail","mi-voicemail warn"]'
data-colors='["#333","firebrick"]'
class="large">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="Rufumleitung"
data-states='["on","off"]'
data-icons='["fa-mobile","fa-mobile"]'
data-colors='["firebrick","#333"]'
class="large">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="vKalender_Geburtstage"
data-get="c-today"
data-states='["0","!0"]'
data-icons='["fa-birthday-cake","fa-birthday-cake warn"]'
data-colors='["#333","firebrick"]'
class="large">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="Temp_Batterie"
data-states='["0","!0"]'
data-icons='["oa-measure_battery_25 fa-rotate-90","oa-measure_battery_25 fa-rotate-90 fa-blink"]'
data-colors='["#333","firebrick"]'
class="large">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="Briefkasten"
data-states='["off","on"]'
data-icons='["fa-envelope","fa-envelope fa-blink"]'
data-colors='["#333","firebrick"]'
class="large">
</div>
</td>
</tr>
<tr>
<td height="65.56px">
<div data-type="symbol"
data-device="fenster"
data-get="state"
data-states='["closed","open"]'
data-icons='["ftui-window","ftui-window"]'
data-colors='["#333","firebrick"]'
class="large top-space-2"
id="tamold">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="myAbfall"
data-get="Restmuell_tage"
data-states='["off","0","1","([2-9]|[1][0-9])"]'
data-icons='["fa-trash-o","fa-trash-o","fa-trash-o","fa-trash-o"]'
data-colors='["#333","#333","#888","#333"]'
class="large top-space-2">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="myAbfall"
data-get="Papier_tage"
data-states='["off","0","1","([2-9]|[1][0-9])"]'
data-icons='["fa-trash-o","fa-trash-o","fa-trash-o","fa-trash-o"]'
data-colors='["#333","#333","flx_darkblue","#333"]'
class="large top-space-2">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="myAbfall"
data-get="Plastik_tage"
data-states='["off","0","1","([2-9]|[1][0-9])"]'
data-icons='["fs-bag","fs-bag","fs-bag","fs-bag"]'
data-colors='["#333","#333","yellow","#333"]'
class="large top-space-2">
</div>
</td>
<td height="65.56px">
<div data-type="symbol"
data-device="dhl_mtan_dummy"
data-get="state"
data-warn="mtan"
data-states='["0","!0"]'
data-icons='["ro-packstation","ro-packstation"]'
data-colors='["#333","flx_darkblue"]'
class="large top-space-2">
</div>
</td>
</tr>
</table>
<div data-type="clock"
data-format="l, d.m.Y"
class="tall robotothin unten">
</div>
</div>
<div class="page" id="content_home"></div>
<div class="page" id="content_birthday"></div>
<div class="page" id="content_config"></div>
<div class="page" id="content_doors"></div>
<div class="page" id="content_ltv_basketball"></div>
<div class="page" id="content_stundenplan_xxx"></div>
<div class="page" id="content_stundenplan_xxx1"></div>
<div class="page" id="content_stundenplan_xxx2"></div>
<div class="page" id="content_stundenplan_xxx3"></div>
<div class="page" id="content_stundenplan_xxx4"></div>
<div class="page" id="content_trash"></div>
</main>
</body>
</html>

Thyraz

#5
06 März 2020, 21:50:48
Mir sind zumindest mal falsche Anführungszeichen (eines zuviel) aufgefallen.
Zwischen Styles gehört meiner Meinung nach auch zwingend ein Semikolon.

Am Besten mal durch einen HTML Validator jagen um alle Fehler zu finden.

Fhem und MariaDB auf NUC6i5SYH in Proxmox Container (Ubuntu)
Zwave, Conbee II, Hue, Harmony, Solo4k, LaMetric, Echo, Sonos, Roborock S5, Nuki, Prusa Mini, Doorbird, ...

PingPong

#6
06 März 2020, 22:35:05
Hi Thyraz,

auch Dir vielen Dank für Deine Antwort.
Habe das überflüssige Anführungszeichen entfernt und den Code auch mal durch einen Validator gejagt. Ich habe keinen Fehler bzgl. der Styles bekommen.
Ich hab zwar keine Ahnung - glaube aber das der Fehler ggf. irgendwo im css liegt. Die Seite wird während des Ladens kurz richtig angezeigt und schiebt sich dann nach oben. Vermutlich wird da dann noch irgendwas geladen.

Drucken
Nach oben Seiten1
Benutzer-Aktionen