Zur Navigation

divs nebeneinander positionieren

1 Moni

Hi,

so hier mal ein Link:

http://www.house-of-blue-eyes.de/bachblueten1.html

wie kann ich jetzt das gleich daneben setzen?

Viele Grüße
Moni

25.01.2006 15:11

2 Jörg

Hallo Moni,

mir ist nicht ganz klar, was du genau mit "das" meinst. Ganz allgemein kannst du HTML-Block-Elemente mit float:left oder float:right nebeneinander anordnen. Beispiel für zwei Spalten mit jeweils 300px Breite:


<div class="links">Inhalt der linken Spalte</div>
<div class="rechts">Inhalt der rechten Spalte</div>
<div class="clear"></div>

und im CSS-Teil:


.links { 
float:left;
width:300px;
}
.rechts {
width:300px;
}
.clear {
clear:left;
}

Wegen dem float:left der ersten Box werden folgende Elemente rechts angeordnet, nicht unterhalb. Die dritte, leere Box hat hier die Funktion, diesen linken Umfluss wieder aufzuheben, das geschieht mit clear:left

25.01.2006 19:47

3 Moni

Hi Jörg,

das habe ich verstanden und es funktioniert auch so,
nur habe ich so das Problem, dass es nicht wie bei einer Tabelle so positioniert ist, dass zu der Bezeichnung auch die Einsatzart stimmt (Beschreibungen sind länger.

Oh weh ich hoffe ich habe mich einigermaßen ausgedrückt...

Ich habe es jetzt mal so hochgeladen, Du wirst sich sehen was ich meine.

25.01.2006 20:14

4 Jörg

Hallo Moni,

ok, ich verstehe - in diesem Fall werden die Informationen tatsächlich tabellarisch geordnet, somit handelt es sich um eine echte Tabelle und deswegen sollte hier auch eine Tabelle zum Einsatz kommen :). Das Ersetzen der Tabellen durch Divs macht in den über 90% der Fälle Sinn, wo es sich nur um Layout-Tabellen handelt. Aber dort, wo Daten und Texte bestimmten Spalten ("BEZEICHNUNG:", "ZUM EINSATZ VON:") und Zeilen zugeordnet sind, wäre es sogar unsinnig, keine Tabellen einzusetzen, denn für diesen Zweck wurden sie ja eigentlich geschaffen, und bei einem Aufbau mit Divs geht diese Strukturierung verloren. So bauen die Übersichtsseiten in diesem Forum z.B. auch auf Tabellen auf

25.01.2006 20:55 | geändert: 25.01.2006 20:58

5 Moni

Huhu Jörg,

sorry, dass ich so viel frage aber ich möchte ja lernen, wenn es nervt bitte sofort sagen...

Das habe ich mir fast gedacht, dass ich nicht ohne Tabellen auskomme.

Es sind einige Sachen dabei, die ich so gestalten sollte, der Übersicht wegen.

Wenn ich das nun mit div id machen würde müsste ich ja jeder einzelnen Zeile einen anderen Namen geben und somit, wäre dann ja mein CSS nachher riesig...

Ich habe es mal getestet, das ginge dann...

Viele lieben Dank, dass Du so geduldig mit mir bist!

25.01.2006 21:00

6 Jörg

Es ginge auch einfacher über CSS-Klassen - aber dennoch wäre der Einsatz von Divs an dieser Stelle nicht angebracht. Man liest ja hin und wieder von "tabellenlosen Webdesign" - mit diesem Begriff schießt man leider über das Ziel, nur die unsinnigen Tabellen ersetzen zu wollen (auch wenn diese zahlenmäßig bei weitem überwiegen). Bei vielen entsteht so der Eindruck, Taellen seien grundsätzlich schlecht. Und so kommt es auch ganz zwangsläufig zu Fragen, wie du sie jetzt hier gestellt hast.

25.01.2006 21:28

7 Moni

Also hätte ich Dir viel arbeit ersparen können, wenn ich gleich gefragt hätte:

Kann ich ganz ohne Tabellen arbeiten? (Beispiel: siehe alte HP, Linksite, Bachblüten usw.)

Man liest ja hin und wieder von "tabellenlosen Webdesign" - mit diesem Begriff schießt man leider über das Ziel, nur die unsinnigen Tabellen ersetzen zu wollen (auch wenn diese zahlenmäßig bei weitem überwiegen).

Stimmt, habe ich heute auch viel gefunden aber auch viele, die sagen, es geht halt doch nicht so ganz ohne, unter anderem wegen der unterschiedlichen Browser.

25.01.2006 21:34

8 Lotti

Hi Moni!

Ja, das geht. Moment, ich such mal, melde mich gleich wieder

25.01.2006 23:16

9 Lotti

Hi Moni!

Also ich hab das so gelöst:

Ich hab in das css zum Beispiel sowas geschrieben:
*.spalte { padding:10px; text-align:left; width:30%; float:left; } 

Dann hab ich ins html-Dokument zum Beispiel sowas geschrieben:
 <div class="spalte">Dies ist ein ganz intelligenter Text</div>
<div class="spalte">Dieser intellente Text steht jetzt in der Spalte neben der ersten Spalte</div>
<div class="spalte">und der hier ist auch noch da</div>
<div style="clear:both"></div>
und hier schreibt man dann ohne Spalten weiter oder fängt mit einem neuen <div> an 

Damit kannst du mal rumexperimentieren. Du kannst auch 2 verschieden grosse Spalten machen und dann zum Beispiel "sl" und "sr" (Spalte links und Spalte rechts) angeben :-)

Liebe Grüsse

Lotti

25.01.2006 23:24

10 Jörg

Da diese Frage immer wieder mal auftaucht, habe ich mal einen kleinen Artikel hierzu verfasst :):

Tabellenloses (?) Webdesign

viele, die sagen, es geht halt doch nicht so ganz ohne, unter anderem wegen der unterschiedlichen Browser.

Es geht schon bei den halbwegs modernen Browsern, je nach Layout ist vielleicht noch einiges an Übung und Trickserei notwendig.

Dem unfähigen Uralt-Browser Netscape 4 kann man das Style Sheet noch vorenthalten, so dass er keine Probleme macht - aber ich schätze mal, dass die wenigsten, die mit Tabellen arbeiten, diese Browserruine überhaupt noch im Sinn haben ;)

25.01.2006 23:27