CSS vs. HTML / Probleme im Allgemeinen

[Danny]

Hi an alle,

ich habe heute an einem normalen 3 Spalten layout gearbeitet.

Siehe: (1 Link = CSS / 2 Link = HTML)

http://projects.squaredancer.de/csshtml/css_3_spalten.html
http://projects.squaredancer.de/csshtml/html_3_spalten.html

Ich hatte nur Problem bei der CSS Version. Das an sich schlimme war ganz einfach die Tatsache, das ich es kaum hinbekommen habe einfach einen Container mit Breite 100% zu machen, in den dann wieder 3 Container á 20% 60% 20% kommen. Zumindest nicht so das es ohne irgendwelche Tricks im IE auch läuft und das alles skalierbar ist. Sehr umständlich das ganze.

In HTML: 2 Minuten.

Es macht zwar auf gewisse Art und Weise Spass und erleichtert wenn man das Layout in CSS macht. Aber es ist auch wieder ein Haufen Arbeit.

Hat jemand Tipps zu meinem Layout, wie ich in Zukunft einfacher 3 Spalten nebeneinander bekomme die sich zu einander skalieren?

[Kai345]

Grütze .. äh ... Grüße!

Ich hatte nur Problem bei der CSS Version. Das an sich schlimme war ganz einfach die Tatsache, das ich es kaum hinbekommen habe einfach einen Container mit Breite 100% zu machen, in den dann wieder 3 Container á 20% 60% 20% kommen. Zumindest nicht so das es ohne irgendwelche Tricks im IE auch läuft und das alles skalierbar ist. Sehr umständlich das ganze.

Soweit ich das in Erinnerung habe, hat der IE teilweise Probleme damit, wenn einem Element mehrere Klassen zugewiesen wurden, dann nummt er nur die letzte. Aber hab schon wieder vergessen, wann und wie das genau passiert.

Cü
Kai

[kungschu]

Hallo.

HTML und CSS lassen sich nicht gegenüberstellen. Das eine ist die Auszeichnungssprache, das andere die Formatierungssprache. Beides sollte immer strict getrennt werden. Tabellen sind nicht für Layoutzwecke zu missbrauchen.

Zumindest nicht so das es ohne irgendwelche Tricks im IE auch läuft und das alles skalierbar ist. Sehr umständlich das ganze.

Im IE läuft vieles nicht ohne Tricks, daher auch die Conditional Comments. Das zehrt nicht nur an deinen Nerven.

Ich halte CSS für sehr komfortabel und kann deine "Beschwerde" somit nicht nachvollziehen. Natürlich muss man sich einarbeiten.

Unter anderem findest du bei SelfHTML auch Beispiele für mehrspaltige CSS-Layouts.
Im Web sind unzählige Beispiele veröffentlicht, etwa:
http://www.dynamicdrive.com/style/layouts/category/C11/

usw. (google befragen)

Zeitgemäß ist heute XHTML 1.0 und CSS, Inhalt und Formatierung / Layout strict getrennt. Zudem sollten die Webseiten W3C konform sein.

MfG, Kungschu.

[stareagle]

Hallo,

du hast vergessen, dem übergeordneten Elementen (html und body) eine Breite von 100% zuzuweisen.

Also

  
html, body { width: 100%;  
           }  

Wobei du überlegen solltest, ob du wirklich eine Breite von 100% haben möchtest. Lange Textzeilen sind etwas unangenehm zu lesen. Besser wäre  es die maximale Breite des Inhalts zu beschränken. Ein Beispiel:

  
html { width: 100%;  
     }  
  
body { max-width:60em;  
       margin-left:auto;  
       margin-right:auto;  
     }  

Das funktioniert meines Wissens nach in allen Browsern außer dem IE6, der hoffentlich bald vom letzten Rechner verschwunden ist...

Die Margins zentrieren den Body-Bereich, wenn nötig.

Hat jemand Tipps zu meinem Layout, wie ich in Zukunft einfacher 3 Spalten nebeneinander bekomme die sich zu einander skalieren?

Drei Spalten bekommst du am einfachsten so hin:

  
div#links { width:10em;  
            float:left;  
          }  
  
div#rechts { width:10em;  
             float:right;  
           }  

Die Spalten sehen dann im HTML-Code so aus:

  
...  
<div id="links">  
...  
</div>  
<div id="rechts">  
...  
</div>  
<div id="mitte">  
...  
</div>  

Die Div-Elemente sind gegebenenfalls durch ein geeigneteres Body-Element zu ersetzen. Wenn du z.B. links eine <ul/> für die Navigation hast, brauchst du die nicht extra in ein <div/> stecken. Wenn unter der <ul/> natürlich noch was anderes stehen soll, musst du das ganze in ein <div/> stecken.

Außerdem sollten die IDs durch sinnvollere ausgetauscht werden (z.B. navigation, news...).

Gruß

Stareagle

[stefan]

Hallo.

Das funktioniert meines Wissens nach in allen Browsern außer dem IE6, der hoffentlich bald vom letzten Rechner verschwunden ist...

Ich kenn Leute, die sind noch mit dem 5.5er unterwegs. Kein Scherz!

Schöne Grüße stefan

[stareagle]

Ich kenn Leute, die sind noch mit dem 5.5er unterwegs. Kein Scherz!

Ich weiss, dass es noch solche Leute gibt... und das meine Hoffnung sich nicht erfüllen wird...

Aber die Leute müssen dann halt damit leben, dass einige Seiten bei ihnen nicht funktionieren. Wenn man noch diese alten Murks-Browser beachten - am besten auch noch den IE4 - dann wird es echt frustrierend.

Gruß

Stareagle

[at]

Hallo.

Ich kenn Leute, die sind noch mit dem 5.5er unterwegs. Kein Scherz!

Hier lief bis vor einigen Wochen noch ein IE 3.02. Allerdings konnte der kaum eine Seite auch nur annähernd korrekt darstellen, weshalb gleichzeitig ein NC 4.5 installiert war.
MfG, at