You are not logged in.

  • Login

CSS (HTML) Profis?

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

1

Friday, September 26th 2008, 5:25pm

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.

fast_tam

Professional

Posts: 1,013

Location: Erding

Occupation: GER

  • Send private message

2

Friday, September 26th 2008, 5:57pm

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

3

Thursday, October 9th 2008, 12:44pm

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

Sage

Posts: 3,804

Occupation: GER

  • Send private message

4

Thursday, October 9th 2008, 1:00pm

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..

This post has been edited 2 times, last edit by "ZwerG_Serge" (Oct 9th 2008, 1:09pm)

KoH_Bats_

Intermediate

Posts: 216

Location: Haimelkofen

Occupation: GER

  • Send private message

5

Thursday, October 9th 2008, 1:44pm

hey, coole Aufgabe ;)
Schau mal meine Lösung:
KoH_Bats_ has attached the following file:
  • web.zip (1.5 kB - 70 times downloaded - latest: Nov 16th 2023, 7:56pm)

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

6

Thursday, October 9th 2008, 1:50pm

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_

Intermediate

Posts: 216

Location: Haimelkofen

Occupation: GER

  • Send private message

7

Thursday, October 9th 2008, 1:54pm

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?

This post has been edited 2 times, last edit by "KoH_Bats_" (Oct 9th 2008, 2:00pm)

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

8

Thursday, October 9th 2008, 1:55pm

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 ^^

This post has been edited 1 times, last edit by "Zecher_Websonic" (Oct 9th 2008, 1:55pm)

two_face

Intermediate

Posts: 349

  • Send private message

9

Thursday, October 9th 2008, 2:00pm

vielleicht so?
two_face has attached the following file:
  • 3spalten.rar (895 Byte - 99 times downloaded - latest: Jan 15th 2024, 10:59am)

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

10

Thursday, October 9th 2008, 2:03pm

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_

Intermediate

Posts: 216

Location: Haimelkofen

Occupation: GER

  • Send private message

11

Thursday, October 9th 2008, 2:03pm

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_

Intermediate

Posts: 216

Location: Haimelkofen

Occupation: GER

  • Send private message

12

Thursday, October 9th 2008, 2:04pm

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

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

13

Thursday, October 9th 2008, 2:07pm

@ two_face: dein mittlerer Bereich ist keine fixe 600 pixel

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

14

Thursday, October 9th 2008, 2:08pm

@ 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 ?!

This post has been edited 1 times, last edit by "Zecher_Websonic" (Oct 9th 2008, 2:12pm)

two_face

Intermediate

Posts: 349

  • Send private message

15

Thursday, October 9th 2008, 2:09pm

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_

Intermediate

Posts: 216

Location: Haimelkofen

Occupation: GER

  • Send private message

16

Thursday, October 9th 2008, 2:39pm

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_ has attached the following file:
  • web 0.2.zip (1.6 kB - 63 times downloaded - latest: Jan 5th 2024, 7:40am)

Zecher_Websonic

Master

  • "Zecher_Websonic" started this thread

Posts: 1,915

Location: Dorfzentrum

Occupation: GER

  • Send private message

17

Sunday, October 12th 2008, 3:27pm

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

Master

Posts: 2,748

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

Occupation: GER

  • Send private message

18

Sunday, October 12th 2008, 3:41pm

Quoted

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_

Intermediate

Posts: 216

Location: Haimelkofen

Occupation: GER

  • Send private message

19

Sunday, October 12th 2008, 8:10pm

@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)

This post has been edited 1 times, last edit by "KoH_Bats_" (Oct 12th 2008, 8:13pm)