Sie sind nicht angemeldet.

  • Anmelden

CSS (HTML) Profis?

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

1

26.09.2008, 17:25

CSS (HTML) Profis?

hey Leute. Ich brauche ein Layout mit drei Spalten. Inneres Div (oder egal was) soll fix 600 pixel breit sein und die beiden äußeren haben jeweils ihre eigene Farbe und sollen sich der Fenstergröße entsprechend immer anpassen.

Kriegt das Jemand hin? scheint unmöglich zu sein.

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

3

09.10.2008, 12:44

Hallo Tam,

danke für den Link, bin endlich mal dazu gekommen, mir den anzusehen.

Also wenn ich das Tool/oder wie auch immer man das nennen soll, richtig interpretiert habe, dann macht es nichts Anderes, was ich nicht auch schon selber kann.

Die ganze Breite nutzten deren Layouts auch nicht, ich möchte aber wirklich immer die ganze Breite des Bildschirms nutzen.

flexibel | 600px fix | flexibel, so dass man links und rechts nicht mehr den Background sieht und vertial das ganze sich mittig ausrichtet.

Entweder kann es das Tool auch nicht oder ich bin einfach nur zu blöd es zu bedienen.

Jemand noch Ideen?

ZwerG_Serge

Erleuchteter

Beiträge: 3 804

Beruf: GER

  • Nachricht senden

4

09.10.2008, 13:00

links und rechts "flexibel" sollen dann wohl immer gleichgroß sein? weil zwei "flexible" bereiche, das geht rein von der Logik her nicht. (woher sollen die denn wissen welcher Bereich jeweils wieviel platz einnimmt ;))

Also im Grunde brauchst du zwei Elemente, das äußere muss das innere integrieren. Beim äußeren Element brauchst du dann als eigenschaft "text-align: center"

Dadurch wird dein inneres Element Zentriert.

beim äußeren stellst du dann die "width:100%" und beim inneren Feste Größe.

edit: beim inneren musst du afaik noch als html align="center" im Tag eingeben. Bin mir nicht mehr sicher, aber afaik ist das so eine Problemstellung die allein mit CSS nicht zu bewältigen war..

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »ZwerG_Serge« (09.10.2008, 13:09)

KoH_Bats_

Fortgeschrittener

Beiträge: 216

Wohnort: Haimelkofen

Beruf: GER

  • Nachricht senden

5

09.10.2008, 13:44

hey, coole Aufgabe ;)
Schau mal meine Lösung:
»KoH_Bats_« hat folgende Datei angehängt:
  • web.zip (1,5 kB - 70 mal heruntergeladen - zuletzt: 16.11.2023, 19:56)

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

6

09.10.2008, 13:50

jo die beiden Äußeren können von mir aus immer gleich gross sein, aber müssen sich halt beide flexibel verhalten.
Das was Du meinst, funktioniert zwar, aber ich möchte links, sowie rechts, wirklich einen BEreich haben, wo ich sachen reinmachen kann, das geht mit deinem Prinzip nicht. Hoffe Du verstehst was ich meine. Ich beherrsche schon HTML und CSS weitgehend, aber dieses Design kriege ich einfach nicht hin.



und der linke und rechte flexible Bereich haben eigene Hintergrundbilder.

KoH_Bats_

Fortgeschrittener

Beiträge: 216

Wohnort: Haimelkofen

Beruf: GER

  • Nachricht senden

7

09.10.2008, 13:54

hm? geht doch? O_o

edit: ah, stimmt. geht noch nich ganz, weil ja nach links und rechts immer 300px verloren gehn. Willst du in die beiden Seiten floating content rein tun?

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »KoH_Bats_« (09.10.2008, 14:00)

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

8

09.10.2008, 13:55

hey Bats.

genau das will ich haben.

Ich wollte zwar auf Sachen wir absolute Positionen und Z-Indexe verzichten, aber wenns nicht anders geht, dann würde ich gerne dein Layout so verwenden, Darf ich? :)

EDIT: hatte meinen Beitrag schon gerstatet, bevor deiner da war ^^

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Zecher_Websonic« (09.10.2008, 13:55)

two_face

Fortgeschrittener

Beiträge: 349

  • Nachricht senden

9

09.10.2008, 14:00

vielleicht so?
»two_face« hat folgende Datei angehängt:
  • 3spalten.rar (895 Byte - 99 mal heruntergeladen - zuletzt: 15.01.2024, 10:59)

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

10

09.10.2008, 14:03

links soll es float:right sein und rechts float:left. der mittlere muss seinen innerhin inhalt mittig ausrichten. und was meinst du mit geht doch nicht? dass der linke und rechte komplett verschwinden wenn browserfenster zu klein? das ist z war nicht schön, aber für meien zwecke auch nicht sonderlich störend. wenn das aber behoben werden könnte, dass die mindestens 100 pixel breite haben müssen, dann ist es genau das was ich haben will

KoH_Bats_

Fortgeschrittener

Beiträge: 216

Wohnort: Haimelkofen

Beruf: GER

  • Nachricht senden

11

09.10.2008, 14:03

der mittlere Teil bleibt nicht stehn. und der eingebettete css-code is hässlich und unübersichtlich.
@Websonic: natürlich kannst dus benutzen :)

KoH_Bats_

Fortgeschrittener

Beiträge: 216

Wohnort: Haimelkofen

Beruf: GER

  • Nachricht senden

12

09.10.2008, 14:04

kein PC-User hat ne kleinere Auflösung als 800px breite - d.h. würd mir die Arbeit sparen.

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

13

09.10.2008, 14:07

@ two_face: dein mittlerer Bereich ist keine fixe 600 pixel

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

14

09.10.2008, 14:08

@ Bats: deshalb soll es ja auch 600 + 2 * 100 sein. und ich kenne Leute die nutzen eine Auflösung von 800 x 600 :)

ich denke two_face hat den Code mit reingenommen um es mal schnell zu machen. das in eine CSS zu exportieren kann ich ja auch selber machen ;)

und es interessiert michdennoch was du damit meintest, dass es doch nicht geht ?!

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Zecher_Websonic« (09.10.2008, 14:12)

two_face

Fortgeschrittener

Beiträge: 349

  • Nachricht senden

15

09.10.2008, 14:09

ich weis das konnt ich so schnell nicht lösen
wenn mir noch was einfällt post ich es
und das der css code drin steht und nicht wirklich aufgeräumt ist möge man mir verzeihen ich würd den so auch nicht benutzen ging halt schneller :)

KoH_Bats_

Fortgeschrittener

Beiträge: 216

Wohnort: Haimelkofen

Beruf: GER

  • Nachricht senden

16

09.10.2008, 14:39

Für die 2 * 100px brauchst ja nur in die beiden Seitenteile ein Div mit der Ausrichtung links btw. rechts und der Breite 100px reinstellen.
Mein Vorschlag is ja nur das Gerüst.
Hab noch ne Klasse in die Aussenseiten integriert, sonst würde links und rechts text verschwinden (wegen den -300px margin).
»KoH_Bats_« hat folgende Datei angehängt:
  • web 0.2.zip (1,6 kB - 63 mal heruntergeladen - zuletzt: 05.01.2024, 07:40)

Zecher_Websonic

Meister

  • »Zecher_Websonic« ist der Autor dieses Themas

Beiträge: 1 915

Wohnort: Dorfzentrum

Beruf: GER

  • Nachricht senden

17

12.10.2008, 15:27

hey, ich noch einmal :) dachte ich bekomme das selber hin, ist aber nicht, kiegs leider doch nicht hin.

der linke,mittlere und rechte Block soll 600 pixel hoch sein und die sollen alle nach oben und unten den abstand auto haben, also vertical mittig. Kriegt man das noch irgendwie hin? man müsste ja eigentlich den Container, den du gemacht hast 600 pixel hoch machen und dann, ja dann habe ich rumgespielt, kriegs aber nicht gebacken. könntest Du nochmal versuchen? dankööö :)

der Vigilant

Meister

Beiträge: 2 748

Wohnort: 51° 7'52.79"N 6°27'3.13"E

Beruf: GER

  • Nachricht senden

18

12.10.2008, 15:41

Zitat

Original von Zecher_Websonic
ich denke two_face hat den Code mit reingenommen um es mal schnell zu machen. das in eine CSS zu exportieren kann ich ja auch selber machen ;)

Nein, er ist im Original schon enthalten.

KoH_Bats_

Fortgeschrittener

Beiträge: 216

Wohnort: Haimelkofen

Beruf: GER

  • Nachricht senden

19

12.10.2008, 20:10

@Websonic:
dem #container die Position top:50% zuweißen, in 600px hoch machen und ne top-margin von -300px
d.h. den ganzen Container 600px machen, wie du schon meintest, ihn mit top:50% auf halbe höhe, aber hald immer um 300px zu tief setzten und das ganze mit der negativen top margin wieder ausgleichen.
(evtl. die Höhe von der #middle auf 100% zu setzten, da bis jetz ja die ganze Höhe von #middle abhängig war aber jetz ja fest is)

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »KoH_Bats_« (12.10.2008, 20:13)