Zur Navigation

Spalten mit Divs - wo ist mein Denkfehler?

1 Lotti

Hallo ihr!

Ich bin mal wieder dabei zu basteln, diesmal für eine Malerin.

Diesmal möchte ich 3 Spalten machen. Links die Navigation - linksbündig, rechts die Adresse - rechtsbündig und in der Mitte Grafiken - zentriert.
Ich hab das jetzt so versucht:

#spalter {  position:relative; padding:5px; text-align:right; margin-right:10px; width:25%; float:right; font-size:80%; }
#spaltel { position:relative; padding:5px; text-align:left; float:left; margin-left:10px; width:25%;}
#spaltem {   position:relative; padding:5px;}

für Spalte M hab ich jetzt das angegeben:

<div id="spaltem" align="center"> <img src="pic/logo.jpg" width="250" height="136"><br><br>
<img src="pic/seebreit.jpg" width="500" height="351"> </div>

Das sieht aber komisch aus und ich bekomm die Mitte nicht zentriert. Weiss jemand Rat? Also mit spaltem width:510px; funktioniert es auch nicht.

Und dann ist ganz komisch, aber in ID funktionieren keine Links, auf die Art. Woran liegt das? Also ich denke ich weiss wie ich sie funktionierend bekomme, aber warum geht das so nicht?

Heute steh ich scheints komplett neben der Spur....

http://www.kunst-in-meissen.de

Liebe Grüsse

Lotti

02.02.2006 20:50 | geändert: 26.02.2006 12:13

2 Jörg

Hallo Lotti,

25% Breite sind viel, wenn das Bild 500px breit ist, wird's bei einer Auflöung von 1024*768 zu eng; und müssen die äußeren Spalten überhaupt flexibel sein?

Wenn du die Breiten heruntersetzt, und für die mittlere Spalte 510px definierst (Breite des breitesten Bildes + 2 * padding), kannst du letztere mit margin:auto zentrieren. Für den IE 5 - und je nach Doctype auch für den IE 6 - benötigst du zusätzlich ein text-align:center im übergeordneten Element, in diesem Fall im body (siehe auch: <div>-Layer in CSS zentrieren . Nebenbei: welchen Zweck erfüllt position:relative?

body { font-family: Times, "Times New Roman", serif; background-color:#CCCCFF; margin:0; padding:0; color:#663300; text-align:center; }

#spalter { padding:5px; text-align:right; margin-right:10px; width:20%; float:right; font-size:80%; }
#spaltel { padding:5px; text-align:left; float:left; margin-left:10px; width:20%;}
#spaltem { padding:5px; width:510px; margin:auto; }

Nachtrag

Und dann ist ganz komisch, aber in ID funktionieren keine Links, auf die Art.

Das habe ich jetzt nicht ganz verstanden?

02.02.2006 21:29 | geändert: 02.02.2006 21:31

3 Lotti

Hallo Jörg!
Du, ich sitze hier vor einem Haufen Fotos und versuche seit 3 Tagen meine Kreativität walten zu lassen, was vergrippt nichts wurde. Die Frau malt einfach sowas von genial, dass ich bei allem immer finde dass es einfach ihrer Bilder nicht würdig ist was ich da mache. Heute morgen ist ja dann unser Kater überfahren worden und ich dachte dann, ich fang einfach mal an und und schau mal was entsteht, wie ich es aufteile, was draus werden könnte. Darum flexible Breiten, weil was flexibel ist, passt sich leichter meinen momentan doch recht kläglichen Versuchen an ;-)

Muss aber nicht so sein, ich weiss nur noch nicht wie breit das dann alles wird. Momentan schiebe ich einen Haufen Fotos von einer Fensterseite zur anderen und schau wie es wirkt. Das mit dem Postition:relative weiss ich auch nicht warum ich das drin hab, vermutlich ein Überbleibsel aus einem alten CSS ;-)

Du siehst: Ich bin so richtig geistig auf der Höhe ;-)

Das mit den Links:
Geh mal auf die subdomain von mir und versuch mal die erste Unterseite links über die Navigation zu öffnen. Der Link sieht zwar aus wie ein Link, ist aber keiner, also er linkt nicht. Aber vielleicht muss ich auch nur mal den Rechner neu starten?

Dank dir! Ich probier das nachher mal aus und schau mal ob ich nicht doch war Gescheites hinbekomme.

Liebe Grüsse

Lotti

02.02.2006 21:54

4 Jörg

Zu den Links:

das erledigt sich, wenn du das position:relative rausschmeißt ;)

02.02.2006 22:10

5 Lotti

Schon gemerkt, aber warum ist das so? Es ist lustig, aber komplett unlogisch, find ich.

02.02.2006 22:12

6 schimmi

Hi Lotti,
wenn du noch Inputs suchst, schau doch mal auf www.virkuga.de
Gruß
schimmi

02.02.2006 22:21 | geändert: 02.02.2006 22:25

7 Jörg

Ich vermute mal, das hängt damit zusammen, dass du mit position:relative auch du eine Positionsveränderung für hover-Effekte angeben kannst. Bevor du mit der Maus den Link erreichst, tritt der Hovereffekt ein, der in diesem Fall verhinderrt, dass der Link klickbar ist. Mit der Tastatur kannst du die Links aber normal erreichen und sie funktionieren dann auch

02.02.2006 22:22

8 Lotti

danke :-)
Super spannend, echt. Mal sehen was man mit solchen Effekten machen kann.

02.02.2006 22:42

9 Lotti

Hi Schimmi!

Mensch sorry, dich hab ich glatt überlesen.
Sind ja auch spannende Sachen bei :-)

Ähnlich hab ich mir das auch vorgestellt, so mit anklicken und Bilder gucken und so. Aber ich grübel noch am Grunddesign. Sie malt sehr realistisch, also garnicht zeitgemäss, das passt auch alles irgendwie nicht auf dunkle Hintergründe. Ihr Flyer hat blaue Wölkchen und der sieht auch sehr passend aus, aber die Wölkchen werden beim Scannen pixelig und sehen am Bildschirm einfach nur blöd aus. Und nach der 10. Wölckchentextur die blöd wirkt, hab ich mich jetzt nach 2 Tagen Wölkchen davon verabschiedet zu versuchen das Layout des Flyers zu übernehmen.

Sie macht zum Beispiel Wandmalereien, also zum Beispiel Torbögen aus Blumen auf dunkle Wände dass es wirkt als könnte man durchgehen. Das inspiriert dazu ein Einstiegsbild draus zu machen, aber man müsste es in die gesamte Seite einbauen und dann wird es zu gross. Und rausgepixelt sieht es blöd aus.

Oder sie hat zum Beispiel einen alten Küchenschrank auf eine Wand gemalt, der wirkt ziemlich echt. Das bringt mich auf Ideen wie Schubladen-Links die aufgehen wenn man drauf klickt. Aber wenn ich versuche aus ihren Bildern eine Homepage zu machen, wirkt das nicht.

Dann macht sie sehr viele Blumen und da komme ich auf die Idee man konnte eine Linkleiste aus einer Blumenranke machen, aber das wirkt alles nicht wenn ich versuche das auseinanderzuschneiden und einzubinden.

Naja, damit probier ich halt schon seit 3 Tagen rum und meine Versuche aus ihren Bildern die Homepage zu machen, wirkt überladen und blöd. Also werde ich jetzt auch wieder klassischer und mach es mit Thumbnails wie viele andere Seiten auch. Ich finde so langsam wird es wenigstens vorzeigbar, aber das gewisse Etwas hat es noch nicht.

Liebe Grüsse

Lotti

02.02.2006 23:43

10 schimmi

Hi Lotti,
das hat jetzt zwar nicht direkt mit deiner Frage zu den Divs zu tun, aber...
Bei der Entwicklung von Virkuga.de haben wir die Künstler, die zuerst dabei waren angemailt und gefragt, wie sie Ihre Werke präsentieren wollen. Die einhellige Meinung war, daß sie einen schwarzen hintergrund ohne andere Farben oder Schriften drumherum haben wollen.
Nach meinem Ausstieg aus dem Projekt wurden die Seiten geändert und wie heute sichtbar gestaltet.
Heute würde ich auch alles mit css machen, aber wie gesagt, die großen Ansichten der Bilder auf einem einfarbigem Hintergrund.
(Evtl. könnte der Betrachter die Hintergrundfarbe aus einer Auswahl von x Farben selber wählen).

Gruß
schimmi

03.02.2006 06:40 | geändert: 03.02.2006 09:02