nicht angemeldet
Div Formatierung
Halli Hallo,
da ich das mit der "Div Tabelle" nicht hinbekommen habe Probiere ich das nun anders! Meine Idee ist folgende ich will eine Barrierefreie Internetseite bastel, die auch Blinde ansehen können. Da das Design nicht mit Table gemacht werden kann muss man das ja mit Divs machen. Ich versuche gerade einen Kopfleiste zu bauen, die ungefähr so aussehen soll.
######## ----div1---- ----div2---- ----div3----
bild div ----div4---- ----div5---- ----div6----
######## ----div7---- ----div8---- ----div9----
Meine Idee war nun folgende:
<!—-nächste Zeile-->
<html>
<head>
<title>ein titel</title>
<link rel="stylesheet" type="text/css" href="style/test.css">
</head>
<body>
<div style="background-image:url(../WebContent/images/kopf_links.gif);height:59px;width:41px;float:left;"></div>
<div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
</div>
<!—-nächste Zeile-->
<div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
</div>
<!—-nächste Zeile-->
<div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
</div>
</body>
</html>
Ich bekomme die Divblöcke nicht untereinander!
Vielleicht habt ihr ja ne idee?
Viele Grüße
Jan
-
hi, versuche mal in der 2. und 3. Zeile
<div style="clear:left;">
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
</div>gruss smashi
-
hi, versuche mal in der 2. und 3. Zeile
<div style="clear:left;">
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
<div style="width: 200px; border:1px solid red;float:left;"></div>
</div>gruss smashi
Hallo Smashi,
auch dir danke für die fixe Antwort! Aber leider kann ich das nicht verwenden, da die 9 Divs alle rechts neben dem Bild sein sollen!
Viele Grüße
Jan
-
dann pack doch die 3 Zeilen noch in ein extra div, dann sollte das auch funktionieren, musst nur schauen das das clear dann nicht global wirkt sondern nur auf die Zeilen.
-
dann pack doch die 3 Zeilen noch in ein extra div, dann sollte das auch funktionieren, musst nur schauen das das clear dann nicht global wirkt sondern nur auf die Zeilen.
Hey Smashi du hast recht! Es lebt! Kannst du mir jetzt noch erzählen wie man ein Div so vergrößert, dass es immer 100% der Restbreite Breit ist? also Quasi div1=178px div2=4px div3=rest?
-
dann pack doch die 3 Zeilen noch in ein extra div, dann sollte das auch funktionieren, musst nur schauen das das clear dann nicht global wirkt sondern nur auf die Zeilen.
Hey Smashi du hast recht! Es lebt! Kannst du mir jetzt noch erzählen wie man ein Div so vergrößert, dass es immer 100% der Restbreite Breit ist? also Quasi div1=178px div2=4px div3=rest?
sorry dass ich so ruede unterbreche, aber du hast jetzt 1:1 eine tabelle mit divs nachgebaut und dafur sogar 20 zeichen mehr html markup benutzt (attribute bzw selektoren nicht mitgerechnet)
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>als tipp:
mit
<div class="h1" />
<div class="h2" />
oder
<div class="p" />kann man auch wunderbar <h1 />, <h2 /> und <p /> ersetzen :D
-
sorry dass ich so ruede unterbreche, aber du hast jetzt 1:1 eine tabelle mit divs nachgebaut und dafur sogar 20 zeichen mehr html markup benutzt (attribute bzw selektoren nicht mitgerechnet)
Naja nur doof das der Kunde Blinde leute beschäfftigt und die sich auch die Internetseite angucken wollen und ich deshalb keine Tabelle nehmen darf! Ausser es sind wirklich "Tabellen"
-
Hallo,
Naja nur doof das der Kunde Blinde leute beschäfftigt und die sich auch die Internetseite angucken wollen und ich deshalb keine Tabelle nehmen darf! Ausser es sind wirklich "Tabellen"
Und was sollen Blinde mit ner leeren <div>-Suppe anfangen?
Ich verstehe ja sowieso nicht, was du damit erreichen willst.
Jonathan
-
Hallo,
Naja nur doof das der Kunde Blinde leute beschäfftigt und die sich auch die Internetseite angucken wollen und ich deshalb keine Tabelle nehmen darf! Ausser es sind wirklich "Tabellen"
Und was sollen Blinde mit ner leeren <div>-Suppe anfangen?
Ich verstehe ja sowieso nicht, was du damit erreichen willst.
Jonathan
Es wird ja nicht leer bleiben... Es soll ja noch Content rein. Ich weis leider selber nicht wie ein Blinder so eine Internetseite sieht von dem her kann ich dir auch nicht genau sagen was diese Firma damit erreichen will!
-
Hallo Jonathan!
Es wird ja nicht leer bleiben... Es soll ja noch Content rein. Ich weis leider selber nicht wie ein Blinder so eine Internetseite sieht von dem her kann ich dir auch nicht genau sagen was diese Firma damit erreichen will!
Ich glaube du _musst_ Dir unbedingt klar machen was Barrierefreiheit bedeutet. Der Begriff bedeutet nicht automatisch eine Divsuppe zu erstellen. Lies dir den vorgenannten, recht einleuchten Beitrag, zur Divsuppe durch.
Es würde den Rahmen dieses Beitrags sprengen das jetzt zu erklären, aber zumindest Grundlagen kann man sich bei einfach für alle erarbeiten.
Schönen Gruß
Afra
--
Endlich Ruhe-
Es würde den Rahmen dieses Beitrags sprengen das jetzt zu erklären, aber zumindest Grundlagen kann man sich bei einfach für alle erarbeiten.
Hallo Afra,
hab mir die 2 sehr interessanten Artikel durchgelesen und bin beeindruckt wie sehr ich mich in der <div>-suppe wieder gefungen habe!^^
Ich werde wohl noch ein wenig übern müssen bis ich dieses Design hinbekommen kann...
Viele Grüße
Jan
-
-
Hallo,
Es wird ja nicht leer bleiben... Es soll ja noch Content rein.
Wenn du da Content rein tun willst, ist es aber nicht besonders barrierefrei wenn du den <div>-Containern auch noch feste Breiten und höhen zuweist. Du weist nicht wie groß der Anzeigebereich ist und wie groß die Schrift dargestellt wird. Leute, bei denen die Sehfähigkeit (nur) eingeschränkt ist, werden möglicherweise z.B. eine größere Schriftgröße wählen.
Jonathan
-
-
-
-
-
Hey Smashi du hast recht! Es lebt! Kannst du mir jetzt noch erzählen wie man ein Div so vergrößert, dass es immer 100% der Restbreite Breit ist? also Quasi div1=178px div2=4px div3=rest?
du laesst bei div3 das float weg und machst als margin-left:182px;
ich glaube so sollte es gehen.
-
-
-
-
-
Hallo Jan!
ich glaube Du versuchst gerade ein Tabellenlayout durch eine Divsuppe zu ersetzen.
Mache Dir mal Gedanken, was Du in der ersten "Zeile" Benötigst. Handelt es sich dort eventuell um Links, dann könnte dies eine Liste sein.
Genauso solltest Du mit den weiteren Elementen verfahren. Mache Dir Gedanken welches semantische Element Du verwenden könntest.
Zu Deiner ursprünglichen Frage: Beschäftige Dich damit, was passiert, wenn Du Elemente floaten lässt. Du musst die Elternelemente wieder aus dem FLuß nehmen, dann werden diese auch in einer neuen Zeile dargestellt.
Schönen Gruß
Afra
--
Endlich Ruhe-
Hallo Jan!
ich glaube Du versuchst gerade ein Tabellenlayout durch eine Divsuppe zu ersetzen.
Mache Dir mal Gedanken, was Du in der ersten "Zeile" Benötigst. Handelt es sich dort eventuell um Links, dann könnte dies eine Liste sein.
Genauso solltest Du mit den weiteren Elementen verfahren. Mache Dir Gedanken welches semantische Element Du verwenden könntest.
Zu Deiner ursprünglichen Frage: Beschäftige Dich damit, was passiert, wenn Du Elemente floaten lässt. Du musst die Elternelemente wieder aus dem FLuß nehmen, dann werden diese auch in einer neuen Zeile dargestellt.
Schönen Gruß
Afra
Hallo Afra,
danke für deine fixe Antwort! Ich habe mir da auch viele gedanken drüber gemacht was ich eigentlich machen will und divs sind da einfach atm am besten, weil "noch" keine Links hin sollen.
Was ich mir überlegt habe das ich dem ganzen eine prozentuale Breite gebe und damit dann den Zeilenumbruch erzwinge, aber denke nicht das das die feine englische Art ist.
Viele Grüße
Jan
-
-
Servus,
du suchst nach der Wunderwaffe overflow.
Aber was Afra ja schon gesagt hat: Es macht absolut keinen Sinn, aber sowas von garkeinen, ein Tabellenlayout mittels einer Div-Suppe nachbauen zu wollen, da kannst gleich Tabellen verwenden. Beschaeftige dich mit mit semantischer Auszeichnung.
Gruss
Patrick--
sh:( fo:| ch:? rl:( br:> n4:( ie:% mo:) va:} de:> zu:) fl:| ss:| ls:[ js:| -
Hallo Jan!
da ich das mit der "Div Tabelle" nicht hinbekommen habe
Was stelle ich mir darunter vor?
Sprichst du von den entsprechenden Display Eigenschaften?Probiere ich das nun anders! Meine Idee ist folgende ich will eine Barrierefreie Internetseite bastel, die auch Blinde ansehen können.
Klingt irgendwie leicht sarkastisch für meinen Geschmack.
Da das Design nicht mit Table gemacht werden kann muss man das ja mit Divs machen.
Erstaunlich, welche Schlussfolgerungen die Leute immer wieder aus irgendwelchen Feststellungen ziehen.
Ich versuche gerade einen Kopfleiste zu bauen, die ungefähr so aussehen soll.
######## ----div1---- ----div2---- ----div3----
bild div ----div4---- ----div5---- ----div6----
######## ----div7---- ----div8---- ----div9----Oben schreibst du, dass du eine barrierearme Website erstellen möchtest, die auch für blinde Menschen geeignet ist, und dann ist ein Bild wesentlicher Bestandteil deiner Seite!?
Meine Idee war nun folgende:
Ich bekomme die Divblöcke nicht untereinander!
Vielleicht habt ihr ja ne idee?
BTW: Spätestens, wenn man das dritte Mal genau dieselben CSS-Anweisungen schreibt, sollte man sich mal mit Klassen beschäftigen.
Um es kurz zu machen: Unter deiner gewählten Rubrik und deinem eingangs geäußerten Willen, kann ich dir von deiner Idee nur abraten, denn das ist bestimmt nicht "barrierearm"!
Welche Inhalte sollen denn diese 9 DIVs alle haben, und ist das Bild ein reines Hintergrundbild (zur optischen Ausschmückung), oder enthält es Informationen?
Gruß Gunther