framedesign durch css und div's erzeugen

[costal martignier]

hallo miteinander,

ich möchte ein frameartiges design mit divs erstellen, das ganze soll dann folgendermassen
aussehen :

-----------------------------------------------------------
|     titlediv    feste breite (100%) variable höhe       |
-----------------------------------------------------------
|            |                                            |
|            |                                            |
|  navidiv   |        bodydiv immer gleiche feste breite  |
|            |        aber variable höhe                  |
|feste breite|                                            |
|  variable  |                                            |
|  höhe      |        höhe kann grösser oder kleiner sein |
|            |        als die höhe vom navidiv            |
|            |                                            |
|            |                                            |
|            |    body und navi zusammen 100%             |
|            |                                            |
|            |                                            |
|            |                                            |
|            |                                            |
|            |                                            |
|            |                                            |
|            |                                            |
|            |____________________________________________|
|            | footerdiv immer gleich breit wie bodydiv   |
|____________| höhe variabel                              |
             |____________________________________________|
             |          copyrightdiv IM footerdiv         |
             |____________________________________________|

(ich hoffe das wird bei euch richtig dargestellt)

ich habe nun sehr lange rumprobiert mit position absolute relative  float und display und und und,
aber langsam habe ich das gefühl was ich da vor habe geht nicht mit css und div.

ich möchte gerne ein etabellenloses design machen, mit tabellen funzt es einwandfrei ;-)
aber wird sind doch nun in der tabellenlosen zeit angekommen oder nicht ?
also wäre sehr dankbar wenn ihr mir auf die sprünge helfen könntet
besten dank und bis danndann
costal martignier

[André Laugks]

Hallo!

ich habe nun sehr lange rumprobiert mit position absolute relative  float und display und und und,
aber langsam habe ich das gefühl was ich da vor habe geht nicht mit css und div.

Ich sitze auch gerade an einem Projekt und mir kommt mal wieder das kalte Grausen.

aber wird sind doch nun in der tabellenlosen zeit angekommen oder nicht ?

Naja..., einige hätten das hier gerne im Forum. Leider ist das in der Realität nicht immer möglich.

Ich versuche Tabellen nur noch auf minimalste zu reduzieren. Wenn da im NN4 mal was versprengt, kann ich mit Leben. Zu dolle darf es aber auch nicht sein.

also wäre sehr dankbar wenn ihr mir auf die sprünge helfen könntet

Es gibt im Web unzählige Tutorials, wie man Tabellenlayout ohne Tabellen hinbekommt.

Schaue mal bei denen in den Quellentext.
http://www.einfach-fuer-alle.de/index.php

Beispiele:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

MfG, André Laugks

[dbenzhuser]

Ohne jetzt die nächste pro/contra Tabellen-Diskussion anfangen zu wollen:

Schaue mal bei denen in den Quellentext.
http://www.einfach-fuer-alle.de/index.php

Diese Seite zeigt mir doch schon, dass der float-statt-Tabellen-Ansatz keinen Sinn macht.

Jede Seite hat eine Mindestbreite, unter der die Anzeige mit dem betreffenden Layout keinen Sinn mehr macht.
Bei "Barierefreies Webdesign - Einfach für alle" werden natürlich divs eingesetzt:
Wenn ich nun das Browserfenster zusammenschiebe, oder die "Schrift größer Buttons" benutze verabschiedet sich die rechte Navigationsleiste unter den Rest, da findet es keiner, schon gar niemand mit einer Seeschwäche.
Ein bischen mehr zusammenschieben und auch der Hauptteil entschwindet. Übrig bleibt ein ziemlich verstümmeltes Layout, das überhaupt niemandem mehr hilft. Weder dem netten Herrn mit 3cm Hornbrille und Bildschirmlupe, dem Internetanfänger, der so überhaupt nix mehr findet, noch mir, der jetzt erst recht vom Scrollen genervt ist und verschwindet.

Mit Tabellen ist fest deffiniert, welches Element NEBEN einem anderen steht. So kann ich die Seite bis zu dem Grad wo es noch Sinn macht zusammenschieben. Dann ist natürlich vertikales Scrollen angesagt, zumindest aber bleiben alle Elemente an einem sinnvollen Platz.

Die lustige Seite mit der Biene macht also jedem nicht behinderten Nutzer das Leben schwer, hilft aber denen mit Screenreader kein Stück:
<div>Text1</div><div>Text2</div><div>Text3</div>
wird von denen genau so behandelt wie
<table><tr><td>Text1</td><td>Text2</td><td>Text3</td></tr></table>

Ich spreche mich also klar dafür aus, Tabellen da wo es Sinn macht durchaus noch fürs Layout einzusetzen.
Ich meine, EINE Tabelle (für die Grundstruktur der Seite) würde www.einfach-fuer-alle.de barrierefreier machen.

Mein Fazit:
Tabellen wo immer sinnvoll möglich vermeiden.
Aber nicht allgemein verdammen.
Es steht trotz allem nicht die zugrunde liegende Technik im Vordergrund, sondern das 1. visuelle und 2. strukturelle Ergebnis.
Auf visuelle gutes Layout zu verzichten, damit der eine blinde unter 10000 Usern ein theoretisch besseres Layout vorgelesen bekommt ist kilometerweit am Ziel vorbeigeschossen.

Möglich, dass dafür der theoretische Hintergrund der "Tabelle" neu definiert werden muss.

*noch nicht schlagen, bitte noch kurz gedulden!*

dbenzhuser

Alle obengenannten Aussagen spiegeln nur die momentane, rein subjektive Meinung des Autors wider, und sollen nicht als allgemeingülitge Grundsätze gelten.

*jetzt dürft ihr schlagen.*

[dbenzhuser]

...Dann ist natürlich vertikales Scrollen angesagt...

horizontal natürlich.

[Jeena Paradies]

Hallo ,

Wenn ich nun das Browserfenster zusammenschiebe, oder die "Schrift größer Buttons" benutze verabschiedet sich die rechte Navigationsleiste unter den Rest, da findet es keiner, schon gar niemand mit einer Seeschwäche.
Ein bischen mehr zusammenschieben und auch der Hauptteil entschwindet. Übrig bleibt ein ziemlich verstümmeltes Layout, das überhaupt niemandem mehr hilft.

Mit welchem Browser hast du das angeguckt?

Ich sitze hier vor einem 14" Monitor 640x480, und Firebird Browser. Bei mir verrutscht hier überhaupt nichts. Das einzige was ich bemängeln könnte ist, dass wenn man die Schrift größer macht sie aus dem Navi Container nach rechts herausragt, und einen horizontalen scrollbalken erzeugt. Finden kann ich sie aber dennoch super.

Grüße
Jeena Paradies

[dbenzhuser]

Servus

Mit welchem Browser hast du das angeguckt?

Neuester IE, 1280x1024, WinXP
Jetzt mit Netscape 4 (Uni) sieht die ganze Seite schon ganz anders aus, offenbar ein komplett anderes Stylesheet, wenn nicht sogar mehr.
Ich werde nachher mal mit ein paar anderen Browsern testen, sollte IE aber weiterhin Probleme veranstalten bleibe ich dabei. Und wenn man nur der "behinderte Minderheit der IE-Nutzer" moeglicherweise Probleme bereitet, kann was nicht stimmen. (Zumindest kann der Ansatz dann nicht als perfekt barrierefrei gelten)
Ausserdem musste ich heute morgen frueh aufstehen, da entstehen manchmal etwas zu heftige Texte ;)

mit freundlichem Gruss,
dbenzhuser

[Jeena Paradies]

Hallo ,

Mit welchem Browser hast du das angeguckt?
Neuester IE, 1280x1024, WinXP

Ach ja der IE hat er uns denn nicht schon alle mal zum verzweifeln gebracht? ;-) Habs mir jetzt mit dem IE angeschaut, und es ist genau so wie du es sagst.

Zumindest kann der Ansatz dann nicht als perfekt barrierefrei gelten

Da gebe ich dir recht.

Grüße
Jeena Paradies

[wahsaga]

hi,

Und wenn man nur der "behinderte Minderheit der IE-Nutzer" moeglicherweise Probleme bereitet, kann was nicht stimmen.

diese benutzergruppe behindert sich doch durch die auswahl ihres browsers schon selber, unabhängig davon, ob weitere körperliche oder geistige beeinträchtigungen vorliegen ...

gruss,
wahsaga

[Peppy]

hallo,

hier -> http://css-discuss.incutio.com/
findest du diverse vorlagen. sowohl für zweilspaltige als auch für dreispaltige layouts.
einfach mal durchklicken und schauen, ob da das richtige für dich dabei ist.

peppy

[Maxx]

Hallo Costal

ich möchte ein frameartiges design mit divs erstellen

titlediv    feste breite (100%) variable höhe
navidiv

ich hatte einmal etwas ähnliches versucht, allerdings wieder verworfen. Vielleicht kannst du mit dem Ansatz (der Ansatz an sich ist uralt ... und auch nicht von mir) etwas anfangen.

http://www.maxx4u.de/drweb/dynamischenav/leiste.html

Viele Grüße,

Jochen

[benni]

Hi!

ich möchte ein frameartiges design mit divs erstellen, das ganze soll dann folgendermassen
aussehen :

---

titlediv    feste breite (100%) variable höhe
navidiv
feste breite
variable
höhe
____________
____________________________________________
copyrightdiv IM footerdiv
____________________________________________

(ich hoffe das wird bei euch richtig dargestellt)

probier ichs mal:
<div id="header" style="width: 100%;">Header</div>
<div id="navi" style="float: left; width: 150px;">
Navilink1
Navilink2
</div>
<div id="body" style="margin-left: 150px;">
Body eben
</div>
<div id="footer" style="margin-left: 150px;">
footer
</div>

Der Nachteil hierbei ist, dass der content-bereich bei kleineren Auflösungen nicht unter die Navigation rutschen kann. Aber da ist wohl wieder die Frage deines Clientels.

Übrigens so ähnlich zu bewundern auf http://benni.homelinux.net/hp und http://blog.benni.homelinux.net. Letzteres bitte mit !IE, da der ein anderes Stylesheet ausgeliefert bekommt.

ich habe nun sehr lange rumprobiert mit position absolute relative  float und display und und und,
aber langsam habe ich das gefühl was ich da vor habe geht nicht mit css und div.

Oft liegts weniger am CSS sonder viel mehr an den browsern ;-)

ich möchte gerne ein etabellenloses design machen, mit tabellen funzt es einwandfrei ;-)
aber wird sind doch nun in der tabellenlosen zeit angekommen oder nicht ?

Jup. Und das ist auch gut so :-).

viele Grüße,
benni

[costal martignier]

hallo zusammen,

ersteinmal vielen dank für die ganzen antworten,
ich habe es nun tatsächlich geschafft ein tabellenloses design zu verwirklichen.

geholfen hat mir vorallem dieser link hier, der ist echt genial
     http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

wenn es jemanden interessiert kann er hier das ergebniss sehen
     http://comawiki.martignier.net

evtl. könnt ihr mir ja auch sagen ob das ganze bei euch auch gut ausschaut,
ich bin hier unter linux und habe nur die gängigen browser unter linux zum testen
opera iexplore 6 (unter wine) mozilla galeon

netscape 4.7 vergessen wir mal, wer noch mit dem surft ist mir egal,
der hat auch nix auf eminer seite zu suchen ;-)

besten dank und bis danndann

[Jeena Paradies]

Hallo ,

Kopiert von: http://comawiki.martignier.net/CoMaWiki
------------------------------------------------
CoMa steht also für die anfangsbuchstaben meines vor- und nachnamen,
aber auch für die Nebelhülle eines Kometen (laut RalfLehmann),
und beduetet auf lateinisch haar (laut GhostDog?)
CoMaWiki ist mein erstes grösseres projekt, es ist das system von dem diese webseiten erzeugt werden.
es ist ein wikiclon mit vielen vielen genialen features, und noch lange nicht am ende mit der entwicklung.
geplante features findest du hier, und bereits implementierte features
findest du hier
------------------------------------------------
In diesem kurzen Text von deiner Seite finde ich schon mal auf Anhieb 15 Rechtschreibfehler. Ich glaube dass deine Umschalttaste nicht richtig funktioniert, da es  sich meistens um Groß- Kleinschreibung handelt. Da mir auch der Hinweiß sehr geholfen hat:

Benutze zum Schreiben von Texten eine Textverarbeitungs-Software.

Diese zeigt dir dann gleich wo du Fehler hast. Wenn du was schnelles und nicht all zu großes haben willst, kann ich dir AbiWord empfehlen. Das kann sogar .doc Dateien einlesen und deine Dokumente als solche auch abspeichern.

Grüße
Jeena Paradies

[costal martignier]

In diesem kurzen Text von deiner Seite finde ich schon mal auf Anhieb 15 Rechtschreibfehler. Ich glaube dass deine Umschalttaste nicht richtig funktioniert, da es sich meistens um Groß- Kleinschreibung handelt. Da mir auch der Hinweiß sehr geholfen hat:

also ganz einfach, ich schreibe im netzt nur klein, und das aus überzeugung !!!

[Jeena Paradies]

Hallo ,

also ganz einfach, ich schreibe im netzt nur klein, und das aus überzeugung !!!

-------------------------------------------
Ein WikiWikiWeb oder kurz "Wiki" ist ein offenes Autorensystem für Websites. Diese bestehen oft aus hunderten oder tausenden Einzelseiten, die von dutzenden oder hunderten Teilnehmern bearbeitet werden. Ein WikiWeb kann zur Abwicklung von Projekten, zur Dokumentation und Unterstützung von Produkten, zur gemeinschaftlichen Produktion von Konzepten oder Büchern etc. verwendet werden.

Für die Entwicklung dieses Wikis wird jeder dringend benötigt, der hier und da eine sinnvolle und interessante Information, Kommentar oder sonstigen Hinweis oder Verweis einbringen kann. Lies hierzu einfach in zwei Minuten bei WieManWikiBenutzt nach und teste Deine Fähigkeiten im SandKasten.

Tip I: Durch Klicken auf StartSeite kommst Du immer wieder auf die Startseite zurück, wenn Du dich mal verlaufen hast. Da dieses Netz begriffsorientiert aufgebaut ist, ist die Navigation nicht bestimmt und jeder Schritt hat wie beim Schachspiel viele mögliche Folgeschritte.
---------------------------------------------

Warum bleibst du dann nicht konsequent?
Tip II: Versuche nicht, wenn Du an diesen Seiten arbeitest, die altgewohnte HTML oder Bibliothekarsordnung reinzubringen. Es funktioniert nicht. Andere Autoren werden wie in einem lebenden System Deine Inhalte verändern, löschen, verschieben und verlinken. Genieße einfach die Entwicklung und schöpfe Deine Kraft aus den Verlinkungen der Inhalte untereinander.

Grüße
Jeena Paradies

[costal martignier]

Warum bleibst du dann nicht konsequent?

hehehe das ist fremdcontent, nicht von mir geschrieben, sondern von einem anderen autor,
da das ganze ja ein wiki ist kann jeder etwas dazu beitragen ;-)

[Jeena Paradies]

Hallo ,

hehehe das ist fremdcontent, nicht von mir geschrieben, sondern von einem anderen autor,
da das ganze ja ein wiki ist kann jeder etwas dazu beitragen ;-)

Das habe ich mir schon fast gedacht :-)

Grüße
Jeena Paradies

[at]

Hallo.

In diesem kurzen Text von deiner Seite finde ich schon mal auf Anhieb 15 Rechtschreibfehler. Ich glaube dass deine Umschalttaste nicht richtig funktioniert, da es  sich meistens um Groß- Kleinschreibung handelt. Da mir auch der Hinweiß sehr geholfen hat:

In diesem kurzen Text aus deinem Beitrag finde ich schon mal auf Anhieb mindestens 4 Fehler. Ich glaube, dass deine Komma-Taste nicht richtig funktioniert, obwohl auch doppelte Leerzeichen und ein fehlender Schrägstrich anzumerken sind. Da mir der Hinweis auch sehr geholfen hat: "Hinweis" schreibt sich mit "s".
Nix für ungut.
MfG, at

[Jeena Paradies]

Hallo ,

Nix für ungut.

Im Boden versink...

Jeena Paradies