Die Divs... :/

Hi na,

ich war jetzt schon auf paar Seiten um mir das mit dem div beizubringen, also Seitenlayouts will ich mit Divs erstellen, weil anscheinend nun Tabellenlayouts Old School sind. Entweder bin ich zu dumm dafür, oder ich versteh es einfach mal nich. :p
Wollt mal fragen, ob jemand ein Schritt-für-Schritt Tutorial kennt, um die Layouts später mit DIV’s programmieren zu können.

Liebe Grüße,
Tobi. :p :p :ps:

Moin,

da kann man nur css4you empfehlen.
Dazu würde ich aus den Workshops aus der gleichen Seite mir noch “Das Boxmodell” anschauen und ansonsten das Gute alte SelfHTML bemühen, um sich

-Tags genauer anzuschauen.

MfG
myPages

Moin moin!

Ich habe mir mal überlegt, da du ein Anfänger bist, dass dir die Theorie nicht so viel sagen wird, wie die Praxis. Deswegen habe ich dir ein paar Links zusammengestellt, wo die verschiedenen Arten von CSS-Layouts schon dargestellt sind und wo du diese praxisnah erlenen kannst. Also los gehts :wink:

[ul]
[li]http://www.dynamicdrive.com/style/layouts/category/C11/[/li]
[li]http://www.intensivstation.ch/en/templates/[/li]
[li]http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html[/li][/ul]

Ich hoffe ich konnte dir weiterhelfen! :wink:

Dankeschön für eure beiden Beiträge. Finde das gut mit den Beispielen, da kann man das sicherlich besser verstehen.

Mfg Tobi

Das Mißverständnis basiert schon darauf, daß das Layout
besonders viel mit dem Element div zu tun hätte. Das ist ein
ähnlicher Irrtum wie der mit den Tabellen.

Was den (X)HTML-Quelltext anbelangt, so verwendet man immer
die Elemente, die den Inhalt korrekt beschreiben, deswegen hat
(X)HTML ja zahlreiche verschiedene Elemente.
Nur wenn es keine passenden Elemente gibt, verwendet man
div- oder span-Elemente, etwa auch um Inhalte zu gruppieren.

Auf jegliche Elemente kann man dann CSS anwenden.

Das hier ist eine kleine Anleitung von mir anhand von
Beispielen:
hoffmann.bplaced.net/hilfe.php?m … =csserstes

@hoffmann dein link geht nciht

Bei mir kommt da beim Anklickern die gewünschte Seite, was
passiert bei dir?

das hier

Habe ich behoben ;o)
Das war ein Fehler in der Seite.
Dummerweise hat der XML-parser von aktuellen Opera-Versionen
da offenbar einen Fehler, der zeigt solche Fehler nicht an.
Müßte ich öfter mal mit Amaya oder so gucken, ob da noch
weitere solche Fehler sind, ‘normale’ browser funktionieren da
offenbar nicht zuverlässig genug. Die Geckos sind da offenbar
schon besser als Opera, aber wer weiß, was die übersehen ;o)

Hi na,
ich hab das jetzt so einigermassen verstanden und will jetzt ein bisschen üben. komm schon eigentlich gut zurecht. allerdings hab ich eine frage.^^
wie muss der code sein, dass die rechte box auf höhe der beiden anderen boxen ist??

die siete findet ihr unter http://img.bplaced.net/div
Den CSS-Code findet ihr unter http://img.bplaced.net/div/design.css

Mfg Tobi

Du hast das floaten vergessen :wink:

hab derzeit das gleiche problem…hab mit dem floaten schon alles durchprobiert aber irgendwie funktioniert das nicht so wirklich…

also hier die seite http://aschachinger.bplaced.net/
css: http://aschachinger.bplaced.net/css/style.css

der derzeit hellblaue bereich sollte auf gleicher Höhe wie der große Bereich in der Mitte und das Menü sein. Also wer super wenn mir wer helfen könnte!

Also eher cyan meinst du vermutlich?
Da wo das im Quelltext steht, wirst du das eher positionieren
müssen.
#main könnte man auch mit float ausrichten und in der Breite
begrenzen, beides nicht unbedingt besonders sinnvoll.

Bei einer Positionierung würde man vermutlich auch das
Menü und den Inhalt ebenfalls positionieren.

Gibt also mehrere mehr oder weniger sinnvolle Strategien…

Hab das versucht mit float aber des klappt immernoch nicht ^^
was kann ich machen?
oder kann jemand mal den quelltext/code so machen, das das mit den boxen geht??

mfg tobi

Moin,

3 nebeneinander.

<div style="float:left;">1. Box</div>
<div style="float:right;">2. Box</div>
<div style="float:left;">3. Box</div>

Die dritte sollte in der Mitte sein. (vereinfacht anhand des css4you-Beispiels)

Macht doch einfach mal die Beispiele auf css4you (hier -> unten) durch und schaut euch an, was passiert, wenn ihr float-Attribute ändert.

MfG
myPages

Das ändert dann ja die Reihenfolge der Inhalte im Quelltext,
was meist nicht sehr sinnvoll ist.
Mal abgesehen von einer Index-Seite ist es ohnehin eine
schlechte Sitte, Menü/Navigation oder gar Nebensächliches
Beiwerk immer oben in den Quelltext zu schreiben.
Bei einem Vorlesebrowser oder ohne CSS müssen sich die
Nutzer immer durch den ganzen Kram durchwühlen, bis sie
zum eigentlichen Inhalt kommen. Ist meist eleganter, wenn man
die Projektnavigation ziemlich weit hinten im Seitenquelltext
unterbringt oder eben mit dem Element link im head-Bereich ;o)

Der Reiz des Spieles liegt ja eben darin, das bereits im (X)HTML-
Quelltext sinnvoll und ergonomisch anzuordnen und dann bei
den verschiedenen Layouts eben CSS zu verwenden, ohne beim
(X)HTML wieder alles umzusortieren.

Moin hoffmann,

ich kann dir ja nur zustimmen, aber zum Erlernen von float-Verhältnissen und Layouts ohne Tabellen schadet es gewiss nicht. Über das Layout seiner eigentlichen, eigenen Seite sollte man dann hinterher eh nachdenken.

MfG
myPages

Naja…Also ich muss sagen das ich mir momentan über die zugänglichkeit meiner Seite ohne CSS nicht so viele Gedanken mache. Will eigentlich eher einmal eine einigermaßen ansenliche Seite aufbauen.
Hab irgendwo einmal gelesen (glaube das es sogar selfhtml war), dass man das Layout eher mit Float als mit position erstellen sollte…
Werd dan glaub ich wieder auf position umsteigen weil das irgendwie einfach ist^^

Moin,

nein positionieren ist nicht einfacher. Mit float kann man ohne Probleme Designs erstellen, aber man muss sich halt ein wenig damit beschäftigen.

Afaik musst du wenn du ein Element positionierst, die anderen im Prinzip auch positionieren, was aber zu viel Aufwand wäre. Es geht ja nicht nur darum eine Webseite der breiten Masse zugänglich zu machen, sondern auch darum den Code möglichst schlank/elegant und valide zu halten.

Positionieren sollte keine Standard-Werkzeug fürs Layout sein. Float eignet sich gut, aber man muss sich wie gesagt damit beschäftigen.

MfG
myPages

Naja…dann werd ich mich dort nocheinmal reinhängen…

Es ist mir schon klar, dass wenn man eine ordentliche Seite macht, sie der Masse zugänglich seine sollte.

Aber sie dir doch meine Seite einmal an :ps:

MFG
Andi