CSS Layout & Positionierung

alexsb

hmm

Registered: Jun 2001
Location: near Graz
Posts: 1566

14.07.2003 - 22:02

ok, folgendes

Code:

.forum-data{
  font-size:12px;
  padding:5px;
  font-weight: 500;
  text-align: center;}

.forum-data.data-one{
  background:#fff;
}

.forum-data.data-two{
  background:#E9ECEC;
}

das sind die beiden ersten ebenen, jetzt möchte ich von der zweiten ebene (forum-data.data-one/two) noch eine weitere Ableitung machen, aber nicht forum-data.data-one.width und forum.data-two.width separat definieren da die ja gleich sein sollen

inzwischen denk ich aber daß das nicht geht

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

14.07.2003 - 22:22

du kannst die einzelnen classes per "," trennen...

ok, jetz is meine antwort genauso schrott wie die frage

bsp:
class1, class2 {
width:20%;}

hf

alexsb

hmm

Registered: Jun 2001
Location: near Graz
Posts: 1566

14.07.2003 - 23:23

meine güte, an die einfachsten sachen denk ich nicht, :bash:

, danke vielmals!

btw: wie formulierst dass denn besser

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

15.07.2003 - 20:37

Zitat von alexsb
meine güte, an die einfachsten sachen denk ich nicht, , danke vielmals!

btw: wie formulierst dass denn besser

das is leider meistens so

btw: zerst stand nur der erste satz da, den rest hab ich dazueditiert, war ich wohl schnell genug

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

18.08.2003 - 13:05

AKA websites deren Layout ohne Tables umgesetzt wurde.

Vielleicht macht es fuer Interessierte Sinn eine Liste von Table-less Seiten zum lernen anzufuehren, auch um zu Zeigen welche Designs ohne Tables umzusetzen sind. Table-less bezieht sich auch das primaere Layout einer Seite. Wenn wired.com "stock markets" in einem Table darstellt, ist das ja nicht falsch, im gegenteilt, es ist sinnvolle Nutzung von Mark-Up.

Auffuehren moechte ich aber nicht jene BLOGger seiten oder aehnliche von Hardcore Professionalisten sondern vordergruendig Seiten die eine groessere Zielgruppe ansprechen (Magazine, etc ...)

http://atvplus.at/ (Rektal, 2004.06.01)
http://blogger.com/ (Rektal, 2004.07.29)
http://csszengarden.com/ (the.sh3ll, 2003.08.20) [S], [1]
http://eltern-bildung.at/ (Rektal, 2003.08.18) [F]
http://eurogreens.at/ (Rektal, 2004.05.10)
http://joukedevries.nl/ (Rektal, 2003.08.18)
http://gmx.at/ (Rektal, 2004.11.23)
http://langenacht.orf.at/ (Rektal, 2003.08.29) [F]
http://mozillanews.org/ (Rektal, 2004.02.12)
http://www.netbank.de/ (Rektal, 2003.09.17)
http://trusecure.com/ (Rektal, 2003.08.18)
http://wired.com/ (Rektal, 2003.08.18) [S]

Legende:
[S] Seite enthaelt ein- oder mehrere alternative Stylesheets (Mozilla: View / Use Style / .. , Opera: View / Style / ...).
[F] Seite verwendet tables fuer Formularpositionierung.

[1] Danke an the.sh3ll fuer den Link zu csszendgarden.com. Diese Seite ist wirklich einer der besten die technologisch zeigt was machbar ist, wie man sinnvoll einmal geschriebenen Mark-Up vielfaeltigst mit CSS praesentieren kann.

Wuerde die Liste auch gerne Erweitern wenn mir jemand also Links per PM schickt trag ichs hier ein.

Bearbeitet von Rektal am 23.11.2004, 10:29 (gmx.at hinzugefuegt)

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

18.08.2003 - 19:03

... ahh.. der kreuzzug gegen "<table>-usage-for-design" geht in die nächste runde

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

19.08.2003 - 08:22

Sozusagen. Wobei eigentlich geht es eher gegen sinnloses Mark-UP als gegen Table, aber Table-less zieht mehr die Leute an :>

Sie dazu zu erziehen, mehr als nur die Elemente table,tr und td kennen zu lernen und diese richtig einzusetzen.

Bimminger

christoph-bimminger.at

Registered: Nov 2001
Location: Linz
Posts: 684

25.01.2004 - 19:15

i steh trotz allem nu auf table-positioning... warum?? weils einfach auch auf alten browsern was gleichschaut, exakter is (ja, top und left als style im diiv verhaltet si zb beim opera anders als bei m$) , und schneller zum entwickeln geht. ladezeiten sind - bei gut durchdachtem aufbau - auch quasi gleich.

daher würd ich auch für diese page positioning mit tables bevorzugen :-)

funka

Legend
ex-prophet(down below)

Registered: Sep 2000
Location: Vienna / SF
Posts: 6131

25.01.2004 - 19:19

wenn das deine argumente sind, dann hast du die vorteile von css based layout nicht verstanden

Bimminger

christoph-bimminger.at

Registered: Nov 2001
Location: Linz
Posts: 684

25.01.2004 - 19:21

bin gern bereit was besseres zu hören...

ich nutz selbst css, allerdings nicht für layout sondern nur für andere designs... header, textabsätze, einführen diverser absatzklassen,... - so kann i das design relativ schnell umdrehn wenn s mal sein muss. und i hab a einheitliches schema über alle pages glegt.

was sind die argumente gegen table- und für css layout mal zusammengefasst?

orpheus

in a nutshell

Registered: Mar 2002
Location: Klagenfurt
Posts: 533

25.01.2004 - 21:32

Zitat von Bimminger
was sind die argumente gegen table- und für css layout mal zusammengefasst?

'Tables or CSS? Choosing a layout' by Craig Saila

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

26.01.2004 - 01:21

obwohl ich die vorzüge von css natürlich sehr zu schätzen weiss, hat noch immer niemand schlüssig erklären können, warum zb IE margin, border und padding so fundamental anders berechnen muß, als im standard vorgesehen.

Code:

[size=2]
<div style="border: 10px solid black; width:100px; height:100px">
 <H1>
   test1
 </h1>
</div>

<div style="border: 10px solid black; width:100px; height:100px; padding-left: 50px; margin-left: 50px;">
  <H1>
    test2
  </h1>
</div>
[/size]

http://www.webtip.cz/images/wt_tabvscss_rozmery.gif http://www.webtip.cz/images/wt_tabv...ozmery_msie.gif

//edit: die dadurch notwendig werdenden workarounds von inneinander verschachtelten divs und styles, kratzen dann wieder sehr stark an den konzeptionellen zielen von css. immerhing ab ie6 kann man den browser überreden es doch richtig zu rendern.

trotzdem ist natürlich css das sauberere konzept, als die zweckentfremdeten tables.

Bearbeitet von atrox am 26.01.2004, 01:53

funka

Legend
ex-prophet(down below)

Registered: Sep 2000
Location: Vienna / SF
Posts: 6131

26.01.2004 - 11:11

das liegt afaik einzig und allein am <h1> in dem fall
das wird vom ie mit ein wenig mehr style versehen als es sollte
test mal

<H1 style="margin: 0px; padding: 0px;">
dann siehst du was ich mein

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4452

26.01.2004 - 11:53

Ich glaub er meint warum IE ein anderes CSS Box model verwendet. Die Frage kann nur M$ beantworten.

Gutes Lesematerial http://www.w3.org/TR/css3-box/#the-box-width:
"The property 'box-sizing' was first proposed to provide an upgrade path for certain browsers that interpreted 'width' the wrong way. 'Box-width' and 'box-height' are proposed as improved versions of 'box-sizing'. However, newer versions of those browsers have already fixed the bug and it is not clear that these properties are really needed anymore. In cases where they could be useful on their own, it might be both more powerful and easier to use if there were a more generic solution, based on the idea of an extra box around the element, that can have not just its own width, but also other properties, such as borders, position, etc. Such an extra box can result from a transformation (XSLT, behaviors or otherwise, even something expressed in CSS itself), or from an extension of the box model, where every element has an (or as many as needed) implicit parents, addressed by a pseudo-element ':container' or similar."

atrox

in fairy dust... I trust!

Registered: Sep 2002
Location: HTTP/1.1 404
Posts: 2782

26.01.2004 - 12:51

ja, es geht um das box model.
IE6 behebt endlich das problem ... nach ~4 jahren oder so, allerdings nur mit entsprechenden DOCTYPE, ansonsten macht er den selben blödsinn wie bisher.

alexsb hmm Registered: Jun 2001 Location: near Graz Posts: 1566	14.07.2003 - 22:02 ok, folgendes Code: `.forum-data{ font-size:12px; padding:5px; font-weight: 500; text-align: center;} .forum-data.data-one{ background:#fff; } .forum-data.data-two{ background:#E9ECEC; }` das sind die beiden ersten ebenen, jetzt möchte ich von der zweiten ebene (forum-data.data-one/two) noch eine weitere Ableitung machen, aber nicht forum-data.data-one.width und forum.data-two.width separat definieren da die ja gleich sein sollen inzwischen denk ich aber daß das nicht geht
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	14.07.2003 - 22:22 du kannst die einzelnen classes per "," trennen... ok, jetz is meine antwort genauso schrott wie die frage bsp: class1, class2 { width:20%;} hf
alexsb hmm Registered: Jun 2001 Location: near Graz Posts: 1566	14.07.2003 - 23:23 meine güte, an die einfachsten sachen denk ich nicht, , danke vielmals! btw: wie formulierst dass denn besser
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	15.07.2003 - 20:37 Zitat von alexsb meine güte, an die einfachsten sachen denk ich nicht, , danke vielmals! btw: wie formulierst dass denn besser das is leider meistens so btw: zerst stand nur der erste satz da, den rest hab ich dazueditiert, war ich wohl schnell genug
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	18.08.2003 - 13:05 AKA websites deren Layout ohne Tables umgesetzt wurde. Vielleicht macht es fuer Interessierte Sinn eine Liste von Table-less Seiten zum lernen anzufuehren, auch um zu Zeigen welche Designs ohne Tables umzusetzen sind. Table-less bezieht sich auch das primaere Layout einer Seite. Wenn wired.com "stock markets" in einem Table darstellt, ist das ja nicht falsch, im gegenteilt, es ist sinnvolle Nutzung von Mark-Up. Auffuehren moechte ich aber nicht jene BLOGger seiten oder aehnliche von Hardcore Professionalisten sondern vordergruendig Seiten die eine groessere Zielgruppe ansprechen (Magazine, etc ...) http://atvplus.at/ (Rektal, 2004.06.01) http://blogger.com/ (Rektal, 2004.07.29) http://csszengarden.com/ (the.sh3ll, 2003.08.20) [S], [1] http://eltern-bildung.at/ (Rektal, 2003.08.18) [F] http://eurogreens.at/ (Rektal, 2004.05.10) http://joukedevries.nl/ (Rektal, 2003.08.18) http://gmx.at/ (Rektal, 2004.11.23) http://langenacht.orf.at/ (Rektal, 2003.08.29) [F] http://mozillanews.org/ (Rektal, 2004.02.12) http://www.netbank.de/ (Rektal, 2003.09.17) http://trusecure.com/ (Rektal, 2003.08.18) http://wired.com/ (Rektal, 2003.08.18) [S] Legende: [S] Seite enthaelt ein- oder mehrere alternative Stylesheets (Mozilla: View / Use Style / .. , Opera: View / Style / ...). [F] Seite verwendet tables fuer Formularpositionierung. [1] Danke an the.sh3ll fuer den Link zu csszendgarden.com. Diese Seite ist wirklich einer der besten die technologisch zeigt was machbar ist, wie man sinnvoll einmal geschriebenen Mark-Up vielfaeltigst mit CSS praesentieren kann. Wuerde die Liste auch gerne Erweitern wenn mir jemand also Links per PM schickt trag ichs hier ein. Bearbeitet von Rektal am 23.11.2004, 10:29 (gmx.at hinzugefuegt)
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	18.08.2003 - 19:03 ... ahh.. der kreuzzug gegen "<table>-usage-for-design" geht in die nächste runde
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	19.08.2003 - 08:22 Sozusagen. Wobei eigentlich geht es eher gegen sinnloses Mark-UP als gegen Table, aber Table-less zieht mehr die Leute an :> Sie dazu zu erziehen, mehr als nur die Elemente table,tr und td kennen zu lernen und diese richtig einzusetzen.
Bimminger christoph-bimminger.at Registered: Nov 2001 Location: Linz Posts: 684	25.01.2004 - 19:15 i steh trotz allem nu auf table-positioning... warum?? weils einfach auch auf alten browsern was gleichschaut, exakter is (ja, top und left als style im diiv verhaltet si zb beim opera anders als bei m$) , und schneller zum entwickeln geht. ladezeiten sind - bei gut durchdachtem aufbau - auch quasi gleich. daher würd ich auch für diese page positioning mit tables bevorzugen :-)
funka Legend ex-prophet(down below) Registered: Sep 2000 Location: Vienna / SF Posts: 6131	25.01.2004 - 19:19 wenn das deine argumente sind, dann hast du die vorteile von css based layout nicht verstanden
Bimminger christoph-bimminger.at Registered: Nov 2001 Location: Linz Posts: 684	25.01.2004 - 19:21 bin gern bereit was besseres zu hören... ich nutz selbst css, allerdings nicht für layout sondern nur für andere designs... header, textabsätze, einführen diverser absatzklassen,... - so kann i das design relativ schnell umdrehn wenn s mal sein muss. und i hab a einheitliches schema über alle pages glegt. was sind die argumente gegen table- und für css layout mal zusammengefasst?
orpheus in a nutshell Registered: Mar 2002 Location: Klagenfurt Posts: 533	25.01.2004 - 21:32 Zitat von Bimminger was sind die argumente gegen table- und für css layout mal zusammengefasst? 'Tables or CSS? Choosing a layout' by Craig Saila
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	26.01.2004 - 01:21 obwohl ich die vorzüge von css natürlich sehr zu schätzen weiss, hat noch immer niemand schlüssig erklären können, warum zb IE margin, border und padding so fundamental anders berechnen muß, als im standard vorgesehen. Code: `[size=2] <div style="border: 10px solid black; width:100px; height:100px"> <H1> test1 </h1> </div> <div style="border: 10px solid black; width:100px; height:100px; padding-left: 50px; margin-left: 50px;"> <H1> test2 </h1> </div> [/size]` http://www.webtip.cz/images/wt_tabvscss_rozmery.gif http://www.webtip.cz/images/wt_tabv...ozmery_msie.gif //edit: die dadurch notwendig werdenden workarounds von inneinander verschachtelten divs und styles, kratzen dann wieder sehr stark an den konzeptionellen zielen von css. immerhing ab ie6 kann man den browser überreden es doch richtig zu rendern. trotzdem ist natürlich css das sauberere konzept, als die zweckentfremdeten tables. Bearbeitet von atrox am 26.01.2004, 01:53
funka Legend ex-prophet(down below) Registered: Sep 2000 Location: Vienna / SF Posts: 6131	26.01.2004 - 11:11 das liegt afaik einzig und allein am <h1> in dem fall das wird vom ie mit ein wenig mehr style versehen als es sollte test mal <H1 style="margin: 0px; padding: 0px;"> dann siehst du was ich mein
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4452	26.01.2004 - 11:53 Ich glaub er meint warum IE ein anderes CSS Box model verwendet. Die Frage kann nur M$ beantworten. Gutes Lesematerial http://www.w3.org/TR/css3-box/#the-box-width: "The property 'box-sizing' was first proposed to provide an upgrade path for certain browsers that interpreted 'width' the wrong way. 'Box-width' and 'box-height' are proposed as improved versions of 'box-sizing'. However, newer versions of those browsers have already fixed the bug and it is not clear that these properties are really needed anymore. In cases where they could be useful on their own, it might be both more powerful and easier to use if there were a more generic solution, based on the idea of an extra box around the element, that can have not just its own width, but also other properties, such as borders, position, etc. Such an extra box can result from a transformation (XSLT, behaviors or otherwise, even something expressed in CSS itself), or from an extension of the box model, where every element has an (or as many as needed) implicit parents, addressed by a pseudo-element ':container' or similar."
atrox in fairy dust... I trust! Registered: Sep 2002 Location: HTTP/1.1 404 Posts: 2782	26.01.2004 - 12:51 ja, es geht um das box model. IE6 behebt endlich das problem ... nach ~4 jahren oder so, allerdings nur mit entsprechenden DOCTYPE, ansonsten macht er den selben blödsinn wie bisher.

CSS Layout & Positionierung

Forum Index > Software > Coding Stuff

alexsb

watchout

alexsb

watchout

Rektal

atrox

Rektal

Bimminger

funka

Bimminger

orpheus

atrox

funka

Rektal

atrox