Site mit divs und CSS

**Schnoop** · 20.04.2006, 09:20

PHP-Code:


  <tr>



    <td valign="top">

        <br />

        <table width="60" border="0" cellpadding="0" cellspacing="0" class="schwarz">

          <tr>

            <td colspan="3">

            <div><img src="images/banner.jpg" width="677" height="86" alt="Banner"></img></div>

            </td>

          </tr>

          <tr>

**Koala** · 20.04.2006, 10:38

äh - ja? wo ist das Problem?

Wegen class="schwarz"?

Ging nicht anders wegen html-strict.

**wahsaga** · 20.04.2006, 10:53

Original geschrieben von Koala
äh - ja? wo ist das Problem?

Was soll denn die Tabelle dort - wenn du gar keine tabellarischen Daten darzustellen hast?

Du hast doch behauptet, ein Layout "mit Divs und CSS" gemacht zu haben ...?

**Koala** · 20.04.2006, 11:04

Da hast Du allerdings recht, vielleicht bau ich
da noch ein div ein.

**Schnoop** · 20.04.2006, 11:40

Irgendwie seh ich mehr Tabellen als wie(ich liebe es

) div's.

Einfach nen div um nen Bild zu klatschen ist nicht Sinn und Zweck der Angelegenheit.

Und by the way.

Strict die die Seite auch nicht.

**Quetschi** · 20.04.2006, 11:42

Ich hab das Gefühl, dass du da noch was nicht so ganz verstanden hast

Diese Seite hat keinerlei Inhalt, die tabellarisch dargestellt werden sollen - folglich haben im Quellcode eigentlich die ganzen tables nix verloren - nur weil du um das ein oder andere table-tag noch ein div drumrum-gepackt hast und in CSS die eine oder andere Klasse definiert hast kann man hier noch lange nicht von einer Seite mit CSS-Layout sprechen.

**Koala** · 20.04.2006, 11:53

die Kritik ist durchaus angekommen.

Ich wollte mit "divs und css" ausdrücken,
daß ich für die Website kein Javascript verwendet
hab um den Effekt mit den Infotexten zu erreichen.

Bin ja auch froh, daß ich es überhaupt so weit
hingekriegt hab.

Kann man mit divs genauso einfach arbeiten wie mit
Tabellen?

Leider geht ja bei html-strict <div align="center">
nicht mehr, das heißt ich muß für jeden Mist bei
html-strict nen Style definieren und dem jeweiligen
Element zuordnen.

Wenn ich bei Dreamweaver MX "strict" einstelle,
dann erstellt mir Dreamweaver für jeden Mist nen
neuen Style (wenn ich z.B. nur mal kurz eine andere
Schriftgröße will, hab ich - schwupps - nen neuen Style).

Da hab ich dann bald mehr CSS als html.

**Quetschi** · 20.04.2006, 11:57

Lösung:
Kein Dreamweaver sondern nen einfachen Quellcode-orientierten Html-Editor verwenden, html vernünftig strukturieren und entsprechend mit css formatieren - du wirst dich wundern wie wenig html und css notwendig ist um ans Ziel zu kommen.

Infos gibts hier:
http://de.selfhtml.org/html/index.htm
http://www.css4you.de/

**wahsaga** · 20.04.2006, 12:08

Original geschrieben von Koala
Leider geht ja bei html-strict <div align="center"> nicht mehr, das heißt ich muß für jeden Mist bei html-strict nen Style definieren und dem jeweiligen Element zuordnen.

Genau das ist ja der Sinn der Trennung von Inhalt und Layout ...

**Koala** · 20.04.2006, 12:39

Das mag schon sein, daß der Sinn darin besteht Layout und Inhalt
zu trennen.

Beim "normalen" html kann man mit div align center Elemente
in der Mitte zentrieren, bei denen die Breite vorher NICHT feststeht.

z.B. steht bei meinem horizontalen Menu die Breite nicht von
vornherein fest.

Um jetzt das div trotzdem zentriert zu bekommen muß ich das del-Tag benutzen und ihm den Style container zuordnen:

.container {clear:both; text-decoration:none;}

und außerdem:

* html .container {display:inline-block;}

hier noch das CSS für das Menu:

dl#artist {
margin:0 auto;
display: table-cell;
white-space: nowrap;
}
dl#artist dt {
display:none;
}
dl#artist dd {
padding:0;
margin:0;
}

Da dürft ich ja dann auch nicht display: table-cell; schreiben,
ist ja keine Tabelle.

**wahsaga** · 20.04.2006, 12:47

Original geschrieben von Koala
Um jetzt das div trotzdem zentriert zu bekommen muß ich das del-Tag benutzen

Bitte was? Wieso del?

und ihm den Style container zuordnen

.container {clear:both; text-decoration:none;}

Du "ordnest" ihm keinen Style zu, sondern vergibst ihm eine Klasse.

Und ja, auf die Elemente dieser Klasse beziehst du dich dann anschließend möglicherweise im CSS mit einem entsprechenden Selektor.

Da dürft ich ja dann auch nicht display: table-cell; schreiben, ist ja keine Tabelle.

Das hat damit überhaupt nichts zu tun.

Noch mal:
HTML ist Struktur, und CSS ist Darstellung.
Struktur ist HTML, und Darstellung ist CSS.

So und nicht anders.

**Koala** · 20.04.2006, 13:05

wegen dem del-Tag:

I have had a few people ask if they could center a floated left menu when the width of the items in the menu is not known, and I had thought that it was not possible.

Where the width is known it is a simple matter of specifying a total width for the <ul> tag (block level) and using margin:0 auto; for non IE browsers and text-align:center; on an outer div for IE. This is demonstrated in the first example above where the overall width is 408px (400px for the list items and 8px for the borders).

However, upon further investigation, I find that it is possible in IE5.5, IE6, Firefox, Mozilla, NN, Opera and Safari to do this using 'non-standard' but validating techniques.

for Internet Explorer

What we need to do is enclose the ul tag in an outer container that will take on the width of the <ul> and then center this outer container.

After a little trial and error I have found that IE can be made to work using an outer <del> tag styled using display:inline-block; and then using text-align:center; in an outer div. To get rid of the strikethrough that is produced using <del> use text-decoration:none;

for other browsers

For Firefox, Mozilla, NN, Opera and Safari we need to use a different method of producing our horizontal unordered list. One that doesn't use 'float:left' or 'display:inline'. Again we have a validating CSS answer in 'display:table/table-cell' and this is how the example above is produced.

With the <ul> tag styled as a 'table' we can easily center it using margin:0 auto;

So, as usual, we are just left with this not working in Mac IE5.

Site mit divs und CSS