css: positionierung, border

dio

Here to stay

Registered: Nov 2002
Location: Graz
Posts: 4887

15.07.2004 - 19:44

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: 4452

15.07.2004 - 22:19

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: 4887

15.07.2004 - 23:09

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: 4452

16.07.2004 - 08:05

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: 4887

17.07.2004 - 18:06

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: 4887

21.08.2004 - 15:16

ich spiel mich derzeit etwas mit divs (damit ich zurecht komm, wenn ich's wirklich einsetz) und hab folgendes problem:

IE:

FF:

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: 4452

22.08.2004 - 04:59

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: 4887

22.08.2004 - 10:45

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: 4452

22.08.2004 - 15:44

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: 4887

23.08.2004 - 17:38

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: 4452

23.08.2004 - 17:46

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: 4887

23.08.2004 - 19:08

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:

ie:

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: 4452

23.08.2004 - 22:32

Zitat von diokletian
Zitat von charmin
ok jetz samma mal ehrlich

wer geht bitte in die nachtschicht?

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: 4887

23.08.2004 - 23:05

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

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.

dio Here to stay Registered: Nov 2002 Location: Graz Posts: 4887	15.07.2004 - 19:44 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: 4452	15.07.2004 - 22:19 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: 4887	15.07.2004 - 23:09 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: 4452	16.07.2004 - 08:05 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: 4887	17.07.2004 - 18:06 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: 4887	21.08.2004 - 15:16 ich spiel mich derzeit etwas mit divs (damit ich zurecht komm, wenn ich's wirklich einsetz) und hab folgendes problem: IE: FF: 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: 4452	22.08.2004 - 04:59 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: 4887	22.08.2004 - 10:45 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: 4452	22.08.2004 - 15:44 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: 4887	23.08.2004 - 17:38 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: 4452	23.08.2004 - 17:46 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: 4887	23.08.2004 - 19:08 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: ie: 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: 4452	23.08.2004 - 22:32 Zitat von diokletian Zitat von charmin ok jetz samma mal ehrlich wer geht bitte in die nachtschicht? 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: 4887	23.08.2004 - 23:05 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 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.

css: positionierung, border

Forum Index > Software > Coding Stuff

dio

Rektal

dio

Rektal

dio

dio

Rektal

dio

Rektal

dio

Rektal

dio

Rektal

dio