php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Bewertung: Bewertung: 1 Stimmen, 5,00 durchschnittlich.
  #1 (permalink)  
Alt 28-08-2011, 20:19
Kikunosuke
 Registrierter Benutzer
Links : Onlinestatus : Kikunosuke ist offline
Registriert seit: Jul 2007
Beiträge: 16
Kikunosuke ist zur Zeit noch ein unbeschriebenes Blatt
Standard Gleichmässige horizontale Verteilung von div's

Hallo zusammen

Ich möchte eine Webseite mit einer speziellen horizontalen Bar ausrüsten. Leider schaffe ich es aber mit CSS nicht den gewünschten Effekt zu erzeugen.

Mit Tabellen ist das Ganze 'relativ' einfach zu realisieren ich denke es dürfte aber dafür bessere Möglichkeiten geben. Im eigentlichen Sinn ist das ja kein tabellarischer Inhalt.

Das Ziel ist es ungeachtet der Anzahl Locations (rot) den restlichen Platz gleichmässig zwischen den divs zu verteilen.



HTML-Code:
<html>
 <head>
  <title>testpage</title>
  <style>
  body {
   font-family:verdana;
  }
  
  .box {
   border:#000 1px solid;
   min-height:60px;
  }
  
  .list {
   height:60px;
   width:60px;
   background:red;
   float:left;
   margin-left:5% auto;
  }
  
  tr, td {
   padding:0;
   margin:0;
  }
  </style>
 </head>
 <body>
  <h1>Web 2.0 CSS, XHTML Solution (^_~)</h1>
  <div class='box'>
   <div class='list'></div>
   <div class='list'></div>
   <div class='list'></div>
  </div>
  <br /><br />
  <div class='box'>
   <div class='list'></div>
   <div class='list'></div>
   <div class='list'></div>
   <div class='list'></div>
   <div class='list'></div>
  </div>
  <h1>Web 1.0 Table Solution</h1>
  <table style='width:100%;border:#000000 1px solid;'>
   <tr>
    <td style='background:red;width:60px;'>Location</td>
	<td style='text-align:center;'>Run</td>
	<td style='background:red;width:60px;'>Location</td>
	<td style='text-align:center;'>Run</td>
	<td style='background:red;width:60px;'>Location</td>
   </tr>
  </table>
  <br /><br />
  <table style='width:100%;border:#000000 1px solid;'>
   <tr>
    <td style='background:red;width:60px;'>Location</td>
	<td style='text-align:center;'>Run</td>
	<td style='background:red;width:60px;'>Location</td>
	<td style='text-align:center;'>Run</td>
	<td style='background:red;width:60px;'>Location</td>
	<td style='text-align:center;'>Run</td>
	<td style='background:red;width:60px;'>Location</td>
	<td style='text-align:center;'>Run</td>
	<td style='background:red;width:60px;'>Location</td>
   </tr>
  </table>
 </body>
</html>
Mit Zitat antworten
  #2 (permalink)  
Alt 28-08-2011, 20:28
Benutzerbild von ApoY2k ApoY2k
 Registrierter Benutzer
Links : Onlinestatus : ApoY2k ist offline
Registriert seit: Nov 2006
Beiträge: 359
ApoY2k befindet sich auf einem aufstrebenden Ast
ApoY2k eine Nachricht über ICQ schicken ApoY2k eine Nachricht über Skype™ schicken
Standard

Wenn ich dich richtig verstehe, willst du dass die DIVs gerade so groß sind, dass alle die größtmögliche Größe haben und innerhalb des Eltern-Elements gleichverteilt sind?

Wenn ja, dann ist das mit CSS alleine nicht möglich. Du wirst mit JavaScript die Größe des DIVs auslesen und die Kinder einzeln anpassen.

Es kann auch gut sein, dass es in CSS3 dafür eine Lösung gibt, ich habe aber momentan keine parat.
__________________
This is what happens when an unstoppable force meets an immovable object.
Mit Zitat antworten
  #3 (permalink)  
Alt 28-08-2011, 20:45
Kikunosuke
 Registrierter Benutzer
Links : Onlinestatus : Kikunosuke ist offline
Registriert seit: Jul 2007
Beiträge: 16
Kikunosuke ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Genau. Nur das die Divs eine feste Grösse (60x60) haben. Dadurch das die Anzahl dieser Div's ändert kann ich keinen statischen Wert im Stylesheet setzten. Innerhalb des Elternelements (width:960px;) sollten die Divs mit fixer Grösse gleichmässig verteilt sein.
Zumal ich bisher keine Lösung gefunden habe ohne JS habe ich mir auch schon Gedanken gemacht wie ich am besten das Problem lösen sollte.

Was denkt Ihr was als 'workaround' am besten passen würde?

Anbieten würde sich eine PHP Lösung Elternelement (960px – (Anzahl Locations x 60px)) und das margin dementsprechend im sytle='' unterbringen.

Variante 2 wäre wohl eine Berechnung mit JS.

Variante 3 dürfte die Tabellenlösung sein.

Wobei ich zugeben muss, überzeugt bin ich von keiner dieser Varianten.

Geändert von Kikunosuke (28-08-2011 um 20:46 Uhr) Grund: Smilies deaktiviert
Mit Zitat antworten
  #4 (permalink)  
Alt 29-08-2011, 00:58
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

PHP sollte sich nicht mit clientseitigem Layoutkram herumschlagen müssen. Tabellen zu Layoutzwecken zu missbrauchen, entspricht nicht ihrer Bestimmung und sollte vermieden werden. Wenn du jedoch keinen Plan von JS haben solltest, wäre eine Tabelle eine Alternative.

Meine Empfehlung: JS, aber so, dass User mit deaktiviertem JS trotzdem eine Fallback-Variante haben, die vielleicht nicht so schick, aber trotzdem benutzbar, übersichtlich und logisch ist.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 30-08-2011, 17:06
Kikunosuke
 Registrierter Benutzer
Links : Onlinestatus : Kikunosuke ist offline
Registriert seit: Jul 2007
Beiträge: 16
Kikunosuke ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hallo Amica

Ja das stimmt schon. Deshalb suche ich auch nach der besten Möglichkeit. ^_~

JS würde auch nicht ein Problem darstellen nur ich sehe es ja schon bei mir selbst. Ich surfe nach wie vor mit deaktiviertem JS.

Ich habe auch noch einen Tipp erhalten mit CSS und "display:table". Leider ist die Variante noch nicht kompatibel mit "genügend" Browsern. Aber ich bin noch dran. ^_^



gruss kiku
Mit Zitat antworten
  #6 (permalink)  
Alt 03-09-2011, 12:27
Breezzer
 Registrierter Benutzer
Links : Onlinestatus : Breezzer ist offline
Registriert seit: Nov 2005
Beiträge: 98
Breezzer ist zur Zeit noch ein unbeschriebenes Blatt
Standard

dass php keine layoutaufgaben umsetzen sollte, finde ich auch. ebenso sollten tabellen nur für entsprechenden inhalt eingesetzt werden. in diesen beiden punkten stimme ich amica zu.

bevor jedoch für eine benötigte darstellung js eingesetzt wird und usern ohne "eine Fallback-Variante (...), die vielleicht nicht so schick, aber trotzdem benutzbar" ist angeboten wird, würde ich da trotzdem mal ein auge zudrücken und lieber php oder tabellen verwenden, wenn dadurch mehr leute die gleiche darstellung erhalten.
ich finde, wir haben als entwickler viel zu oft diesen bescheuerten "ist-das-valide"-gedanken, den ich gerade noch nachvollziehen kann. aber diese sorgen darum, ob eine art der umsetzung "cooler" ist als eine andere (hier z.b. eben js vs. php) haben nur wir - und kein einziger endverbraucher der seite, der im endeffekt über erfolg oder misserfolg eines projektes entscheidet. dem ottonormalverbraucher ist es eben wurst, ob das design durch css, js oder php beeinflusst wird, auf tabellen oder layern basiert, etc. das einzige was für ihn zählt ist die benutzerfreundlichkeit und das aussehen, also das, was eben nach php, js und html herauskommt.
also sollten wir entwickler uns auch mal daran orientieren

also...lange rede, kurzer sinn: wenn es kein problem sein sollte, dass manche user dein vorhaben anders dargestellt bekommen, dann lass php oder tabellen außen vor. wenn aber die darstellung wichtig ist und auf möglichst vielen systemen gleich sein soll, dann scheiß drauf, dass tabellen out sind und php nicht für css missbraucht werden sollte.

meine meinung - wenn der kunde eine rosa webiste haben möchte, dann bekommt er sie. auch, wenn ich rosa abgrundtief hasse. der vergleich hinkt etwas, hat aber auch was wahres.
Mit Zitat antworten
  #7 (permalink)  
Alt 03-09-2011, 12:50
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

@Breezzer: Mit dieser Sichtweise berücksichtigst du aber weder Barrierefreiheit (in diesem Fall vielleicht noch vernachlässigbar), noch den evtl. bestehenden Anspruch, automatisch alternative Layouts anzubieten, bspw. für die kleineren Bildschirme mobiler Geräte.


@Thema: Eine Alternative zu display:table stellt ggf. noch inline-block in Kombination mit text-align:justify dar. Das erfordert ein zusätzliches (leeres) Element am Schluss, das man „breit genug“ macht, dass es in die nächste Zeile gezwungen wird (andernfalls werden die vorhergehenden Elemente nicht über die komplette Zeile verteilt). Das kann auch ein Pseudo-Element sein, wenn man kein zusätzliches ins Markup packen will.
Beispiel: http://jsfiddle.net/Xhne2/
Die Höhe des umgebenden Elements müsste man noch beschränken bzw. verringern; dabei aber überlegen, wie man das macht, ohne dass die Inhalte ggf. unzugänglich werden.
(Ältere IE stellen das natürlich in der Variante mit Pseudoelement nicht korrekt dar, und für inline-block müsste man auch noch einen der bekannten Hacks verwenden. Darüber hinaus kennt der IE aber auch noch ein proprietäres text-align-last, mit dem man auch für die letzte Zeile eines „Textes“ explizit justified-Ausrichtung erzwingen kann - das wäre dann ggf. für ältere IE ein möglicher Workaround.)
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #8 (permalink)  
Alt 03-09-2011, 13:05
Breezzer
 Registrierter Benutzer
Links : Onlinestatus : Breezzer ist offline
Registriert seit: Nov 2005
Beiträge: 98
Breezzer ist zur Zeit noch ein unbeschriebenes Blatt
Standard

@wahsaga:
"automatisch alternative layouts anzubieten" fällt bei mir eben auch unter diese seltsame entwicklersichtweise. ich hatte schon zwei-drei mal den fall, dass ich für mobile seiten eine komplett frisches layout erstellen musste, weil durch js, css, etc. eben kein switch der ein und der selben seite für alle endgeräte möglich war. die darstellung musste einfach passen und war alá web2.0 nicht zufriedenstellend umzusetzen. gut, dass waren auch sehr spezielle fälle, aber darauf wollte ich mich oben ja auch schon beschränken. wenn Kikunosuke eine saubere und einheitliche darstellung dringend verlangt, dann muss eben der entwickler zurückstecken (und ggf. mehrarbeit leisten) und nicht das projekt.

ich bin ja selber entwickler und möchte ja auch am liebsten immer alles immer web2.0 und totaaaal cool und nerdig machen. aber es gibt fälle, in denen es nicht geht und Kikunosuke könnte so einer sein.

---------------------

da ich aber keine weiteren konstruktiven vorschläge habe als die bereits genannten, halte ich jetzt die klappe und verziehe mich ins ethikforum, falls es hier soetwas gibt... :-)
Mit Zitat antworten
  #9 (permalink)  
Alt 03-09-2011, 13:16
wahsaga
  Moderator
Links : Onlinestatus : wahsaga ist offline
Registriert seit: Sep 2001
Beiträge: 25.236
wahsaga befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Breezzer Beitrag anzeigen
"automatisch alternative layouts anzubieten" fällt bei mir eben auch unter diese seltsame entwicklersichtweise.
Wohingegen deine für mich eher unter die berüchtigte „Designer-Sichtweise“ fällt - wenn das nicht überall exakt zu 100% so aussieht, wie ich das in meinem Photoshop gebastelt habe, bin ich beleidigt
__________________
I don't believe in rebirth. Actually, I never did in my whole lives.
Mit Zitat antworten
  #10 (permalink)  
Alt 04-09-2011, 22:28
Kikunosuke
 Registrierter Benutzer
Links : Onlinestatus : Kikunosuke ist offline
Registriert seit: Jul 2007
Beiträge: 16
Kikunosuke ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Hey wahsaga

Dein Beispiel mit text-align:justify; gefällt mir doch recht gut ich werde mich daran machen und das zu testen und allenfalls zu implementieren. Diese Variante dürfte auch für den Android, iOS und Screenreader gut lesbar sein.

Vielen Dank euch allen.

Gruss kiku
Mit Zitat antworten
Antwort

Lesezeichen

Stichworte
css, div, horizontale ausrichtung, html


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FF vs IE - Div's Philbil HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 10 21-01-2007 00:09
Horizontale Liste floaten miguel_rkc HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 2 09-08-2005 22:56
Horizontale Tabellen auslesung danielm76 PHP Developer Forum 9 26-09-2004 13:22
Probleme mit gewichteter Verteilung XGremliN PHP Developer Forum 5 03-06-2004 11:02
verteilung von order by rand() Lord_Xar SQL / Datenbanken 11 08-11-2003 00:21

Themen-Optionen
Thema bewerten
Thema bewerten:

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.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 10:32 Uhr.