Suchen
Inside Forum
Nützliche Links




 
phpforum.de bei Facebook
 
phpforum.de bei Twitter
 

Zurück   PHP Forum: phpforum.de > andere (Programmier-)Sprachen > CSS

CSS Alles rund um CSS

Antwort
 
Themen-Optionen Ansicht
  #1  
Alt 03.08.2017, 18:55
MaxK MaxK ist offline
Engagierter Besucher
 
Registriert seit: 05.12.2005
Beiträge: 117
L Wie richtig verschiedene Bereiche, Schalter auszeichnen?

Hallo,

ich habe mir eine Seite prorgammiert für eine Steuerung und Anzeige von Klimadaten in einem Vivarium.
Das funnktioniert auch soweit wunderbar und ich würde sie nnun gerne noch an ein Handydisplay anpassen, also hochkannt.

Momentan werden die Blöcke 1 + 2 nebeneinander und 3+4 darunter dargestellt. Alle Blöcke befinden sich in einem Container(grün markiert), der nach links und rechts zentriert ist.



Es funktioniert zwar in dieser Ansicht, aber ich hätte gerne, wenn man das Fenster zusammen schiebt, dass die einzelnen Blöcke untereinander dann stehen.

Das zweite ist die Frage, wie man im 3. Block die einzelnen Elemente richtig und sinnvoll anordnet. Momentan ist das alles ein Mischmasch, den ich gerne ordnen würde. Die einzelnen Schalter (umrandet mit der gelben Linie) bestehen momentan aus li-elementen, umgeben dann alle zusammen von einem ul.

Was wäre hier sinnvoll, divs, li etc? Ein Schalter besteht aus der Quadratischen Fläche mit zentriertem Text und einem Namen, der darüber steht.

Ich will das ganze noch einmal komplett neu aufbauen von der Struktur, damit es konform ist

Vielen Dank!

Geändert von MaxK (03.08.2017 um 19:03 Uhr)
Mit Zitat antworten
  #2  
Alt 03.08.2017, 19:15
Kasalop Kasalop ist gerade online
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.710
Standard AW: Wie richtig verschiedene Bereiche, Schalter auszeichnen?

Zitat:
Zitat von MaxK Beitrag anzeigen
Das funnktioniert auch soweit wunderbar und ich würde sie nnun gerne noch an ein Handydisplay anpassen, also hochkannt.
Du suchst media-querys und den viewport.
http://cssmediaqueries.com/what-are-...a-queries.html
http://html5-mobile.de/blog/meta-vie...obile-anpassen

Zitat:
Zitat von MaxK Beitrag anzeigen
Momentan werden die Blöcke 1 + 2 nebeneinander und 3+4 darunter dargestellt. Alle Blöcke befinden sich in einem Container(grün markiert), der nach links und rechts zentriert ist.

Es funktioniert zwar in dieser Ansicht, aber ich hätte gerne, wenn man das Fenster zusammen schiebt, dass die einzelnen Blöcke untereinander dann stehen.
Wenn der Grüne Container keine feste größe hat, sondern sich mit dem Browserfenster zusammenschiebt, dann rücken die automatisch untereinander. Ansonsten: media-querys (s. oben) mit width bedingung.

Zitat:
Zitat von MaxK Beitrag anzeigen
Das zweite ist die Frage, wie man im 3. Block die einzelnen Elemente richtig und sinnvoll anordnet. Momentan ist das alles ein Mischmasch, den ich gerne ordnen würde. Die einzelnen Schalter (umrandet mit der gelben Linie) bestehen momentan aus li-elementen, umgeben dann alle zusammen von einem ul.

Was wäre hier sinnvoll, divs, li etc? Ein Schalter besteht aus der Quadratischen Fläche mit zentriertem Text und einem Namen, der darüber steht.
ul > li ist in Ordnung. Wieso die Struktur ändern? Du kannst auch divs nehmen und diese floaten oder per display:inline-block nebeneinander setzen. Geht beides und ist beides genauso gut oder schlecht. Ich würde das erste Bevorzugen, da es ja eine (Auf)listung von Schaltern ist und sich da eine (unordered) liste doch anbietet. (Stichwort: div-suppe vermeiden)

Lg Kasalop
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?
Mit Zitat antworten
  #3  
Alt 03.08.2017, 19:54
MaxK MaxK ist offline
Engagierter Besucher
 
Registriert seit: 05.12.2005
Beiträge: 117
Standard AW: Wie richtig verschiedene Bereiche, Schalter auszeichnen?

Hallo,
danke, da bin ich überrascht. Ich lese mir die Links gleich mal durch. Ja der grüne Rahmen ist fix momentan. Sollte eher ein width-max sein und kann beim zusammenschieben des Fensters dann kleiner werden


Momentan sind die Schalter so aufgebaut. per jQuery wird der Text in "nebel_an_tite" je nach Schaltstellung geändert.
Sollte jeder einzelne Schalter nochmal in ein ul. oder sollte ich alle drei Elemente eines Schalters zB Nebel mit der Klasse nebel versehen und dann eine Subklasse mit position:relativ um zB den Titel nach oben verscheiben zu können etc. Was wäre da das geschickteste?

HTML Quellcode:
<ul id="container_manuell">
    <li class="nebel_titel" style="opacity: 1;">Nebel</li>
    <li class="nebel" style="border-color: rgb(132, 54, 21); opacity: 1;">
       <span class="nebel_an_titel">Aus</span>
   </li>

    <li class="feuchte_titel">Feuchte</li>
    <li class="feuchte" style="border-color: rgb(155, 137, 114);">
       <span class="feuchte_an_titel">Hand</span>
    </li>
</ul>

Geändert von MaxK (03.08.2017 um 20:03 Uhr)
Mit Zitat antworten
  #4  
Alt 04.08.2017, 13:23
Kasalop Kasalop ist gerade online
Forum-Mitarbeiter
 
Registriert seit: 29.12.2006
Ort: München
Beiträge: 5.710
Standard AW: Wie richtig verschiedene Bereiche, Schalter auszeichnen?

Zitat:
Zitat von MaxK Beitrag anzeigen
Hallo,
danke, da bin ich überrascht. Ich lese mir die Links gleich mal durch. Ja der grüne Rahmen ist fix momentan. Sollte eher ein width-max sein und kann beim zusammenschieben des Fensters dann kleiner werden
Ja, dann mach das doch Alternativ kannst du mit media-query angaben auch verschiedene feste Breiten festlegen, die dann je nach Device-größe verwendet werden.

Zitat:
Zitat von MaxK Beitrag anzeigen
Momentan sind die Schalter so aufgebaut. per jQuery wird der Text in "nebel_an_tite" je nach Schaltstellung geändert.
Sollte jeder einzelne Schalter nochmal in ein ul. oder sollte ich alle drei Elemente eines Schalters zB Nebel mit der Klasse nebel versehen und dann eine Subklasse mit position:relativ um zB den Titel nach oben verscheiben zu können etc. Was wäre da das geschickteste?
Die Schalter selbst würde ich nicht mit ul und li elementen aufbauen. Es handelt sich ja nicht um eine Liste, also wieso ul verwenden? Nimm dafür divs und spans die du mit css richtig positionierst und stylest.

Lg Kasalop
__________________
Es gibt 10 Arten von Menschen auf der Welt. Die die die binäre Mathematik verstehen und die die sie nicht verstehen!

Zu welcher der Gruppen gehörst du?
Mit Zitat antworten
  #5  
Alt 04.08.2017, 15:28
Don T. Worry Don T. Worry ist offline
Engagierter Besucher
 
Registriert seit: 29.03.2012
Beiträge: 497
Standard AW: Wie richtig verschiedene Bereiche, Schalter auszeichnen?

Hab zwar noch nicht damit gearbeitet, aber CSS-Grids sind auch noch eine Möglichkeit.

https://developer.mozilla.org/en-US/...of_Grid_Layout
__________________
“Just think of how stupid the average person is, and then realize half of them are even stupider!” [George Carlin]

“There is only one god, and His name is Death. And there is only one thing we say to Death: "not today".” [Syrio Forel]
Mit Zitat antworten


Antwort

Lesezeichen

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.

Gehe zu
Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiedene Formularinhalt richtig an MySQL übergeben schani PHP 1 06.09.2013 12:49
hmailserver - IP-Bereiche richtig Konfigurieren Taucher Administration 2 04.06.2012 14:40
Ein/Aus Schalter ATTIX22 PHP 3 22.09.2009 14:54
Schalter mit Session Rockhound PHP 7 05.04.2006 13:17
verschiedene Bereiche für User Chrissie82 PHP 5 21.11.2005 19:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 20:26 Uhr.


Powered by vBulletin® Version 3.8.8 (Deutsch)
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.
Powered by NuWiki v1.3 RC1 Copyright ©2006-2007, NuHit, LLC