"Christmas - the time to fix the computers of your loved ones" « Lord Wyrm

css: positionierung, border

dio 15.07.2004 - 19:44 772 13
Posts

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
wird meine erste seite ohne tables, bitte um nachsicht ;)

(1) positionierung

ich hab 3 divs, möchte die nebeneinander haben (content, subcontent, navi; anordnung stimmt so). was is die beste lösung? position: absolute und dann mit left: wert einrücken? (alle angaben der page in %, damits immer von der auflösung her passt) oder mit float ?

(2) border

wie gesagt, 3 divs nebeneinander. beim navi-div weiß ich, dass er der kleinste ist und immer bleiben wird (von der höhe) -> ich brauch border rechts, unten und oben. aber wie mach ich das mit content und subcontent? bei zb 404 ist subconent größer als content; wenn ich bei content und subcontent border links, rechts, oben, unten einstell, überschneidet sich der border leider, was einen dadurch dickeren rahemn zur folge hat. das möcht ich vermeiden.

(3) text in divs

der text soll nie aus den divs herausstehn, das funktioniert auch solange ich nicht ein langes wort verwende. ist das wort länger, als der div breit, steht das wort leider heraus. kann man das umgehn, dass er die buchstaben, die zuviel sind, in die nächste zeile schiebt?



ist leider ohne html beispiele, weil ich bis jetzt nur herumprobiert hab. ich hoff es is klar, was ich mit (2) mein.

tia
Bearbeitet von dio am 15.07.2004, 20:00

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4420
1) geht beides, spricht gegen beides nix. Aus nicht nachvollziebaren gruenden habe ich immer nur floats verwendet (wobei ich auch noch nie liquid designs umsetzen musste, da die kunde auch heute noch auf fixe-breite layouts stehen).

2) die g'schicht mit den border gehoert zu den schwersten loesbaren problemen :) da ich nur fixe-breite layouts hatte, ists hier relativ einfach, man behilft sich mit fake background-colors/images ;)

3) nicht moeglich. es gibt zwar css-attribute dafuer, aber nicht browser support. das beste was du machen koenntest, waere "overflow: auto;" aber das suckt, weil keiner checkt warum der content bereich auf einmal einen scrollbalken hat der zudem ueberhaupt nicht ins design passen wuerde. Redakteuere schulen dass es nicht geht. Oder im CMS darauf aufpassen. Ich hab das bei Userinput (z.b. foren) so geloest das ich den text in woertern aufteile und ausgehen von der mir zur verfuegungstehenden breite (fixe-breite layout sei dank ;) ) einen statistisch guten mittelwert nehme und nach diesem die woerter aufbreche mit spaces; wirkt super, ausser bei urls, aber da nur der url-text gesplittet wird und nicht der eigentliche link, auch kein riesiges problem

nur finde ich nicht so weise: content/subcnotent/navi ? der surfer ist es gewohnt (useability) dass die navigation links ist (die suche ist rechts oben).

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
danke mal für die ausführliche und aufschlussreiche antwort. zum thema subcontent: war für statistiken, sprich popular downloads, top refers etc gedacht :) aber warscheinlich hast du recht. ich bin nur langsam das gewöhnliche *links darf menu sein, maximal noch rechts, sonst is die site nix*-design leid :).

anscheinend sollte ich mir auch überlegen, ob ich mich nicht auf fixe größen festlegen sollte.

wie du das mit den fake background images meinst, kann ich leider nicht nachvollziehen (zm nicht ohne tabellen).

edit: das *leidsein* des designs war an die "normalen seitenbesucher" gerichtet, nicht gegen dich ;)
Bearbeitet von dio am 15.07.2004, 23:11

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4420
Wegen dem Background: ist schwer zu erklaren, aber schau dir mal http://www.eurogreens.at/ an (es kann auch sein das ich nicht ganz deine Frage verstaenden hab).

Dort siehst du den linken und rechten gruenen Bereich, der gleich abschliesst. Dass z.B. ist ein Background-image, auch der weiss schmale Streifen (border) dazwischen. Warum? Weil in den zwei gruenen Bereichen floats liegen. Und es ist nicht moeglich mit reinem CSS/HTML zwei Floats auf gleiche Hoehe zu halten (wie z.b. es einfach mit einer Zeile und zwei Zellen in einem Table ist).

Also muss getrickst werden:
Code:
+----------------------------------+
| DIV mit background image         |
| +-------------+ +--------------+ |
| | float links | | float rechts | |
| +-------------+ |              | |
|                 |              | |
|                 +--------------+ |
|                                  |
| +------------------------------+ |
| | *                            | |
| +------------------------------+ |
+----------------------------------+
* - Ein fast nicht sichtbarer, schmaler Bereiche der mit clear: both immer unter den Floats leigt. Er sorgt dafuer, dass das aeussere DIV mit dem background-image erzwungen wird, laenger als beide floats zu sein (das waere sonst nicht der fall, da floats aus dem document flow rausgenommen werden). Dadurch erstreckt sich das background image immer bis unter beide floats und erzeugt die Illusion, die beiden Spalten waeren gleich lang (sinds in wirklichkeit aber nicht). Und damit das funktioniert, muss aber eine fixe Pixel-breite, wegen background-image, vorhanden sein ...

Schnapp dir ev. auch den Source der Seite und du wirst sehen was ich meine.

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
danke für deine antwort.

die idee ist gut, jedoch hilft mir das leider nicht bei dashed border :( wirklich zu schade, dass man auf die größe und höhe von divs nicht dynamisch reagieren kann.

ich denke nicht, dass man ohne tables einen "fakeborder" so schön hinbekommt wie http://www.sogamed.com (edit: site aktuell down).

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
ich spiel mich derzeit etwas mit divs (damit ich zurecht komm, wenn ich's wirklich einsetz) und hab folgendes problem:

IE:
click to enlarge

FF:
click to enlarge

der code dazu:

Code: PHP
<html>
<head>
<title>asdf</title>
</head>
<body>
<div style="position: absolute; width: 20%; left: 0; border: 1px solid;">
test
</div>
<div style="position: absolute; width: 45%; left: 20%; border: 1px solid;">
test3
</div>
<div style="position: absolute; width: 10%; left: 65%; border: 1px solid;">
test bla
</div>
</body>
</html>

wie gsagt, ich spiel mich nur damit, is natürlich kein sitecode :) dennoch, ich hatte gehofft, ma kann des für alle browser passend machen :(

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4420
Na bummsti. Hab ich noch nie so gemacht. Glaub werd ich auch net wenn ich dass sehe.

Du kannst die loecher "ein wenig" stopfen, in dem du einen DOCTYPE verwendest der den IE in den Standards-Mode setzt (zumindest IE6).

Es sollte dir aber klar sein, dass du mit width die Breite des Inhaltes ohne border angibst, d.h. bei jeder Box kommen auf beinden Seiten nochmal 1px dazu.

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
doctype hab ich natürlich auch probiert, hat leider nix geändert :) das mit dem border is mir schon klar, war auch nur dazu gedacht, mir zu zeigen, ob die abstände passen. das schlimme is: im mozilla passt alles :( also werd ich nicht um "float" herumkommen, und die divs in einem overall div nebeneinander legen müssen?

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4420
Genau. Aber im Prinzip ist nix verkehrt an floats (und sind bewaehrt, die meisten COL Layouts die ich kenne arbeiten mit floats).

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
so, hab nun alles mit floats probiert ;) positionierung funktioniert so weit so gut, aber schon wieder steh ich an :(: height-angabe bei divs. ich hab natürlich schon google bemüht, leider stoß ich dabei nur auf das prob mit "height: 100%". bei mir is es allerdings so, dass ich divs mit height von 3px brauche. mit firefox / mozilla funktioniert das auch, aber iexplorer verweigert mir (auch mit doctype) eine ordentliche darstellung.

langsam aber doch sehe ich die vorteile von divs in den hintergrund rücken - um ehrlich zu sein scheint es mit tables besser zu gelingen, seiten sowohl für mozilla als auch iexplorer zu schreiben :(

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4420
Der MS IE Win geht bei "height" nicht unter "line-height", du musst also beide auf 3px setzen.

HTH

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
wow thx. würd mich aber doch interessieren, woher du das nun weißt :) mit google hab ich, wie geschrieben, nichts dazu gefunden.

bin gerade wieder bei einem darstellungs(problem bzw. unterschied) angekommen:

ff:
click to enlarge

ie:
click to enlarge

Code: PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>testseite divs</title></head>
<body>
<div align="center">

<div style="border: 1px solid; width: 650px">

<span style="width: 500px; float: left;">
test
</span>

<span style="width: 150px; float: left;">
test2
</span>

</div>

</body>
</html>
gibts dafür auch ein "workaround", dass es in beiden browsern gleich dargestellt wird?

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4420
Zitat von diokletian
Zitat von charmin
ok jetz samma mal ehrlich

wer geht bitte in die nachtschicht? :D
Sowas nennt sich schlichtweg Erfahrung und sind die Dinge, die bei einem Fachmann den Marktwert steigen lassen ;)

Zitat
Code: PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>testseite divs</title></head>
<body bgcolor="#426289" text="#000000" id="all" link="#000020" vlink="#000020" alink="#000020">
<div align="center">

<div style="border: 1px solid; width: 650px">

<span style="width: 500px; float: left;">
test
</span>

<span style="width: 150px; float: left;">
test2
</span>

</div>

</body>
</html>

Am Anfang prinzipiell immer davon ausgehen: Gecko good, IE bad.

Dann schlaegt man im Standard nach und sieht warum: floats werden aus dem "document flow" ausgehebt, sie verbrauchen praktisch keinen Platz in dem dokument. Dadurch wird das sie umgebende DIV nicht auf die Hoehe gezogen.

Du musst ein Element platzieren dass eine Eigenschaft besitzt, den Inhalt nachzuziehen. Diese Eigenschaft nennt sich das clear-Property und kann auf jedes Element zugewiesen werden, z.B.

Code: PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>testseite divs</title></head>
<body bgcolor="#426289" text="#000000" id="all" link="#000020" vlink="#000020" alink="#000020">
<div align="center">

<div style="border: 1px solid; width: 650px">

<span style="width: 500px; float: left;">
test
</span>

<span style="width: 150px; float: left;">
test2
</span>

<br style="clear: left;">

</div>

</body>
</html>
Mehr Infos siehe http://www.overclockers.at/showthre...434#post1069434 bzw. http://www.w3.org/TR/CSS21/visuren.html#floats

HTH

dio

Here to stay
Registered: Nov 2002
Location: Graz
Posts: 4761
Zitat von Rektal
Sowas nennt sich schlichtweg Erfahrung und sind die Dinge, die bei einem Fachmann den Marktwert steigen lassen ;)
sehr fein, dann is meiner schon gstiegn :D
Zitat



Am Anfang prinzipiell immer davon ausgehen: Gecko good, IE bad.

Dann schlaegt man im Standard nach und sieht warum: floats werden aus dem "document flow" ausgehebt, sie verbrauchen praktisch keinen Platz in dem dokument. Dadurch wird das sie umgebende DIV nicht auf die Hoehe gezogen.

Du musst ein Element platzieren dass eine Eigenschaft besitzt, den Inhalt nachzuziehen. Diese Eigenschaft nennt sich das clear-Property und kann auf jedes Element zugewiesen werden, z.B.

Code: PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head><title>testseite divs</title></head>
<body bgcolor="#426289" text="#000000" id="all" link="#000020" vlink="#000020" alink="#000020">
<div align="center">

<div style="border: 1px solid; width: 650px">

<span style="width: 500px; float: left;">
test
</span>

<span style="width: 150px; float: left;">
test2
</span>

<br style="clear: left;">

</div>

</body>
</html>
Mehr Infos siehe http://www.overclockers.at/showthre...434#post1069434 bzw. http://www.w3.org/TR/CSS21/visuren.html#floats

HTH
thx again, ich bin sowieso davon ausgegangen, dass die ausgabe von gecko respektive ff noch eher "stimmt", als die vom ie.
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz