Der folgende Beitrag wurde am 06. 12. 2004, 15:40 Uhr von Nicola Straub veröffentlicht.
Hallo!
Mal wieder der Frust: Alles von Hand ganz sorgfaeltig aufgebaut,
im Firefox und Konqueror ganz prima - und dann der IE-Schock.
Dabei scheint es diemal gar keine so Frage von Chinesisch zu
Deutsch zu sein, sondern eher von Friesisch zu Bayerisch - aber
ich kriege es dennoch nicht hingepuzzelt und hoffe auf Eure
Erfahrung.
http://physalia.de/tmp/TEST.html ist das, was ich mir
aufgebaut habe. Im Grunde vier Boxen (3spaltiges Portaldesign):
--------------------------------------------------------------
| | |
| links | top |
| |-----------------------------------------------------
| | | |
| | content | rechts |
| | | |
| | | |
| | | |
--------------------------------------------------------------
Dabei moechte ich die Box oben mit der linken Box zusammenpappen.
Da ich oben ein Bild einsetzen moechte/muss, brauche ich auf
Flexibilitaet gar nicht zu achten (oder kann man es etwa trotz
Bannerbild noch skalierbar machen?) und habe _dieses Problem_
schon mal nicht.
Der IE packt die Top-Box nach unten und holt sie nur hoch, wenn
man ihr deutlich mehr Platz zugesteht. ABER: Er setzt die Boxen
auch dann nicht nahtlos. Das naheste, was ich den Boxen zugedeihen
lassen konnte, ist dies hier:http://physalia.de/tmp/TESTie.html
Abgesehen davon, dass es in Firefox, Mozilla und Konqui bescheiden
aussieht, stossen die Boxen auch im IE noch immer nicht zusammen.
Und ich bilde mir ein, mit allen Breiten, Margins, Paddings etc.
variiert zu haben ;-(
Wer verraet mir, was ich machen muss, um die Boxen zusammen zu
kleben. Und grundsaetzlich: Komme ich fuer dieses Layout nicht
ohne unterschiedliche Stylesheets fuer die Browserfamilien aus?
Es ist schon nervig. Als wuerde ich gar nicht dazu lernen,
das kann doch nicht sein!
Wieviele Layouts muss man gemacht haben, um mal einen prizipiell
vernuenftigen Start allein hinzukriegen?
*frustriert*
Nicola
Der folgende Beitrag wurde am 06. 12. 2004, 15:44 Uhr von Cheatah veröffentlicht.
Hi,
> Dabei scheint es diemal gar keine so Frage von Chinesisch zu
> Deutsch zu sein, sondern eher von Friesisch zu Bayerisch
interessanter Vergleich :-)
> Der IE packt die Top-Box nach unten und holt sie nur hoch, wenn
> man ihr deutlich mehr Platz zugesteht. ABER: Er setzt die Boxen
> auch dann nicht nahtlos.
Der IE hat sehr, sehr viele Bugs. Diejenigen, die hier vermutlich eine Rolle spielen, sind der Three Pixel Text Jog und der Doubled Float Margin Bug. Suche nach diesen Begriffen.
> Komme ich fuer dieses Layout nicht
> ohne unterschiedliche Stylesheets fuer die Browserfamilien aus?
Doch - allerdings kaum ohne CSS-Hacks.
> Wieviele Layouts muss man gemacht haben, um mal einen prizipiell
> vernuenftigen Start allein hinzukriegen?
42 ;-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Der folgende Beitrag wurde am 06. 12. 2004, 16:03 Uhr von Nicola Straub veröffentlicht.
ReHi,
> interessanter Vergleich :-)
;-))
> Der IE hat sehr, sehr viele Bugs. Diejenigen, die hier vermutlich eine Rolle spielen, sind der Three Pixel Text Jog und der Doubled Float Margin Bug. Suche nach diesen Begriffen.
Oh Mist. Das klingt nach SEHR viel Arbeit ;-(
Waer es dann evtl prinzipiell sinnvoller, die Top-Box durchgehend
anzulegen und darin die Bilder zu positionieren. Laufe ich in
weniger IE-Bugs, wenn das Layout so aufgebaut ist oder ist es
eh egal?
-----------------------------------------------------------
| |
| |
-----------------------------------------------------------
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
| | | |
-----------------------------------------------------------
*fragt hoffnungvoll*
Nicola
Der folgende Beitrag wurde am 06. 12. 2004, 16:13 Uhr von Cheatah veröffentlicht.
Hi,
> > Der IE hat sehr, sehr viele Bugs. Diejenigen, die hier vermutlich eine Rolle spielen, sind der Three Pixel Text Jog und der Doubled Float Margin Bug. Suche nach diesen Begriffen.
> Oh Mist. Das klingt nach SEHR viel Arbeit ;-(
ja - es _klingt_ nach sehr viel Arbeit ;-) Wichtig ist vor allem zu wissen, wie der Bug heißt; die Hacks dazu sind meist sehr leicht anzuwenden. Während der Recherche wirst Du sicher noch einige Bugs mehr sehen, es lohnt, sie sich einzuprägen.
> Waer es dann evtl prinzipiell sinnvoller, die Top-Box durchgehend
> anzulegen und darin die Bilder zu positionieren.
Wer mit Floating noch nicht zurecht kommt (darin schließe ich das Umgehen von und mit Browserbugs ein), sollte von absoluter Positionierung die Finger lassen. Beides ist nicht ohne, letzteres hat aber die "schärferen" Auswirkungen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Der folgende Beitrag wurde am 06. 12. 2004, 16:56 Uhr von Nicola Straub veröffentlicht.
Re!
> ja - es _klingt_ nach sehr viel Arbeit ;-) Wichtig ist vor allem zu wissen, wie der Bug heißt; die Hacks dazu sind meist sehr leicht
Stimmt, das war einfach und das Prinzip hatte ich auch schon
mal gesehen. Ich bin mit dem 3px-Hack schon sehr erfolgreich
gewesen, lokal in den IE geladen ist es jetzt ganz super!
Vom Server aus geladen bleibt aber immer noch ein Pixel (sieht
mir jedenfalls nach deutlich weniger als 3 aus!). Kennst du dazu
zufaellig auch noch einen 'VIB' (Very Important Bug) (oder auch
nur einen WKEFNB (well known except from Nicola-Bug)? ;-)
[link:http/physalia.de/tmp/TEST.html]
> > Waer es dann evtl prinzipiell sinnvoller, die Top-Box durchgehend
> > anzulegen und darin die Bilder zu positionieren.
> Wer mit Floating noch nicht zurecht kommt (darin schließe ich das Umgehen von und mit Browserbugs ein), sollte von absoluter Positionierung die Finger lassen. Beides ist nicht ohne, letzteres hat aber die "schärferen" Auswirkungen.
Ich hab jetzt nicht ganz verstanden, was du mit ersterem und letzterem meinst. Ersteres mein Layout, zweiteres durchgehendes
Top mit positionierten Bildern? Oder ersteres = Floating und
zweiteres = absolutes Positionieren?
Aber es hilft ja nix, ich muss ja das Ding hinbekommen. Und ich will
es eben nicht (mehr) mit Tabellen machen - was ja einfach waere,
aber eben nix, was ich will. Ich will es 'richtig' machen...
Herzlichen Dank jedenfalls!
Nicola
Der folgende Beitrag wurde am 06. 12. 2004, 17:00 Uhr von Nicola Straub veröffentlicht.
> zufaellig auch noch einen 'VIB' (Very Important Bug) (oder auch
> nur einen WKEFNB (well known except from Nicola-Bug)? ;-)
> [link:http/physalia.de/tmp/TEST.html]
Ich vergass: Es scheint mir nicht der Margin-Bug zu sein, denn
eine Reduzierung der left-margin von #top hat nix gebracht (tatsaechlich ist margin-left fuer #top fuer den IE in dem
Hack ja sogar mit 0 drin!)... Oder bin ich blind?
Gruss
Nicola
Der folgende Beitrag wurde am 06. 12. 2004, 18:46 Uhr von Cheatah veröffentlicht.
Hi,
> Ich bin mit dem 3px-Hack schon sehr erfolgreich
> gewesen, lokal in den IE geladen ist es jetzt ganz super!
> Vom Server aus geladen bleibt aber immer noch ein Pixel
wenn es lokal funktioniert, ist das CSS-Problem definitiv gelöst. Es muss jetzt um etwas anderes gehen, z.B. den Browser-Cache, einen Proxy oder die Serverkonfiguration.
> Kennst du dazu zufaellig auch noch einen 'VIB' (Very Important Bug)
Hihi :-) Also, ich kann Dir jedenfalls sagen, dass Du Dir die Seiten auch mal mit dem IE 5 ansehen solltest. Da ist noch einiges an (Hack-)Arbeit nötig.
> > Wer mit Floating noch nicht zurecht kommt (darin schließe ich das Umgehen von und mit Browserbugs ein), sollte von absoluter Positionierung die Finger lassen. Beides ist nicht ohne, letzteres hat aber die "schärferen" Auswirkungen.
> Ich hab jetzt nicht ganz verstanden, was du mit ersterem und letzterem meinst.
Floating und absolute Positionierung.
> Ich will es 'richtig' machen...
Mit diesem Vorhaben wirst Du hier hinreichende Unterstützung bekommen, das kann ich Dir versprechen.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Der folgende Beitrag wurde am 06. 12. 2004, 21:34 Uhr von Nicola Straub veröffentlicht.
Huhu!
Kind schlaeft - weiter geht's also...
> wenn es lokal funktioniert, ist das CSS-Problem definitiv gelöst. Es muss jetzt um etwas anderes gehen, z.B. den Browser-Cache, einen Proxy oder die Serverkonfiguration.
Siehst du die Haarlinie denn auch?
Ich hab Windoof nur unten auf dem Notebook und das kenne ich nicht
besonders gut (wer bootet schon freiwillig Windows ;-) Ich tippe
nicht auf den Cache, denn die 3px-Linie ist immerhin auf den duennen
Strich zusammengeschrumpft.
Serverkonfiguration? Hmm, mir faellt wirklich nix ein, was man dem
Server einreden koennte, damit er zwischen Boxen Haarlinien
zeichnet *gruebel*. Ich lad's mal wo anders hin und guck es dann
noch mal an.
> Hihi :-) Also, ich kann Dir jedenfalls sagen, dass Du Dir die Seiten auch mal mit dem IE 5 ansehen solltest. Da ist noch einiges an (Hack-)Arbeit nötig.
Ja, der rechnet ja umgekehrt - DAS Spiel hatte ich schon mal ;-(
> Floating und absolute Positionierung.
Also du raetst mir von einer anderen Konstruktion ab. Richtig verstanden?
> > Ich will es 'richtig' machen...
> Mit diesem Vorhaben wirst Du hier hinreichende Unterstützung bekommen, das kann ich Dir versprechen.
Ihr habt mich bisher immer toll unterstuetzt. Umso aergerlicher
finde ich es ja, dass ich schon wieder nicht allein auskomme ;-(
Besonders, weil es diesmal das erste Mal nicht Hobby ist, sondern
'gilt' - also mit Zeitlimit etc. pp. *nervoes*
Herzliche Gruesse
Nicola
Der folgende Beitrag wurde am 07. 12. 2004, 08:52 Uhr von Cheatah veröffentlicht.
Hi,
> Siehst du die Haarlinie denn auch?
ja. Ich könnte mir denken, dass es daran liegt, dass Du den margin-left von 195px auf -3px reduziert hast.
> Serverkonfiguration?
War nur 'n Beispiel, nicht mein Tipp :-)
> > Floating und absolute Positionierung.
> Also du raetst mir von einer anderen Konstruktion ab. Richtig verstanden?
Ja.
> Ihr habt mich bisher immer toll unterstuetzt. Umso aergerlicher
> finde ich es ja, dass ich schon wieder nicht allein auskomme ;-(
Warum? Je mehr Du fragst, umso mehr kannst Du lernen. Jetzt beispielsweise hast Du einige der wichtigeren IE-Bugs mit Namen kennengelernt, und vermutlich hast Du auch gefunden, wo diese und andere Bugs recht gut beschrieben stehen. Mach Dir also bitte keinen Kopf - Du versuchst, ein Problem selbst zu lösen, und wenn Du nicht weiter kommst, fragst Du hier nach. Etwas Besseres kann Dir und dem Forum nicht passieren! :-)
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Der folgende Beitrag wurde am 06. 12. 2004, 16:14 Uhr von schwarze Piste veröffentlicht.
Tachchen!
> -----------------------------------------------------------
> | |
> | |
> -----------------------------------------------------------
> | | | |
> | | | |
> | | | |
> | | | |
> | | | |
> | | | |
> | | | |
> | | | |
> -----------------------------------------------------------
Ganz anders, aber weil's letzte Tage erst als Modell angeboten wurde:
http://www.sbox.tugraz.at/home/h/hacki/html-und-css/samples/position-design/
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
http://www.smartbytes.de
Der folgende Beitrag wurde am 06. 12. 2004, 16:21 Uhr von wahsaga veröffentlicht.
hi,
> Ganz anders, aber weil's letzte Tage erst als Modell angeboten wurde:
>
> http://www.sbox.tugraz.at/home/h/hacki/html-und-css/samples/position-design/
also eigentlich http://www.glish.com/css/7.asp, oder ...?
gruß,
wahsaga
--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
Der folgende Beitrag wurde am 06. 12. 2004, 16:27 Uhr von schwarze Piste veröffentlicht.
Tachchen!
> also eigentlich http://www.glish.com/css/7.asp, oder ...?
Nicht unähnlich, aber mit Unterschieden wenn du das Fenster stark verkleinerst.
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
http://www.smartbytes.de
Der folgende Beitrag wurde am 06. 12. 2004, 22:08 Uhr von Detlef G. veröffentlicht.
Hallo Nicola,
ist alles, was auf der Seite zu sehen ist inhalttragend, also für den Inhalt
der Seite wichtig?
Wenn images/top2.jpg eher als Layoutelement oder Dekografik zu betrachten ist,
könnte diese auch als Background eingebunden werden, wodurch du dann auch
nicht unbedingt an die Breite gebunden wärst.
(Ich finde es nicht so toll, einen horizontalen Scrollbalken zu bekommen, wenn
mein Browserfenster auch nur ein paar Pixel kleiner als die Bildschirmbreite ist.)
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 06. 12. 2004, 22:35 Uhr von Nicola Straub veröffentlicht.
Hallo Detlef!
> ist alles, was auf der Seite zu sehen ist inhalttragend, also für den Inhalt
> der Seite wichtig?
Nein, der Wald oben traegt nur die Anmutung der Seite ;-)
> Wenn images/top2.jpg eher als Layoutelement oder Dekografik zu betrachten ist,
> könnte diese auch als Background eingebunden werden, wodurch du dann auch
> nicht unbedingt an die Breite gebunden wärst.
Ja, das war auch eine Idee von mir. Aber ich komme IMHO aus der
Breiten-Problematik nicht raus. Ich habe ja ein float im Content-DIV
und float gibt's ja nicht ohne width-Angabe (laut Selfhtml).
Ich hab mal max-width ausprobiert, aber das versteht ja keiner
(jedenfalls offenbar nicht mal Firefox her oder Konqui, beim IE weiss
ich es eh ;-(
Oder wie ist deine Idee?
> (Ich finde es nicht so toll, einen horizontalen Scrollbalken zu bekommen, wenn
> mein Browserfenster auch nur ein paar Pixel kleiner als die Bildschirmbreite ist.)
Me too. Ich bin GAR nicht gluecklich, ein starres 1024-Design zu machen.
Aber ich brauche ein Anmutung-tragendes grosses, dominierendes Bild.
Und ich sehe als moeglichen Platz dafuer eben nur oben quer (weil ich
die rechte Spalte spaeter noch fuer Inhalte brauche, wenn es mal
richtig gen Portal geht).
Wenn ich es trotzdem mittig floaten lassen koennte waer ich mehr als
gluecklich. Aber ich sehe leider keinen Weg ;-( Bin fuer jeden Hinweis
dankbar!
Herzliche Gruesse
Nicola
Der folgende Beitrag wurde am 06. 12. 2004, 23:16 Uhr von Detlef G. veröffentlicht.
Hallo Nicola
> Ja, das war auch eine Idee von mir. Aber ich komme IMHO aus der
> Breiten-Problematik nicht raus. Ich habe ja ein float im Content-DIV
> und float gibt's ja nicht ohne width-Angabe (laut Selfhtml).
Breiten müssen nicht unbedingt in px definiert sein.
> Oder wie ist deine Idee?
Es gibt die Möglichkeit prozentueler Breitenangaben (kombiniert mit
min-width in em) oder rechts und links float und die Mitte nimmt sich den
Rest.
Um das Verhalten gefloateter Elemente zu verstehen habe ich mit mal
Beispiele gemacht Divs mit festen Breiten und Divs mit prozentualen Breiten.
Spiele dort ein wenig mit der Fensterbreite und der Schriftgröße.
> Aber ich brauche ein Anmutung-tragendes grosses, dominierendes Bild.
> Und ich sehe als moeglichen Platz dafuer eben nur oben quer (weil ich
> die rechte Spalte spaeter noch fuer Inhalte brauche, wenn es mal
> richtig gen Portal geht).
Dort kann es doch auch sein. Muss es unbedingt komplett zu sehen sein?
Würde es stören, wenn es bei schmaleren Browserfenstern an der oder den
Seiten etwas beschnitten würde?
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 07. 12. 2004, 11:20 Uhr von Nicola Straub veröffentlicht.
Hallo Detlef!
> > und float gibt's ja nicht ohne width-Angabe (laut Selfhtml).
> Breiten müssen nicht unbedingt in px definiert sein.
Argh, stimmt ja!
> > Oder wie ist deine Idee?
> Um das Verhalten gefloateter Elemente zu verstehen habe ich mit mal
> Beispiele gemacht Divs mit prozentualen Breiten.
Geil. Und der absolute Overflow! Wonach entscheidet man denn, welche
Technik man nimmt? In Frage kommen IMO die Varianten 1 oder 6, wegen des
gleichen Verhaltens der Zwischenraeume...
Leider bin ich momentan voellig blockiert. Nachdem es gestern erst so gut
aussah - kann ich jetzt komplett neu beginnen und weiss erst noch nicht,
recht wie... Immer, wenn ich meine, ich hab dieses bloede Positionieren
verstanden, kommt irgend ein Effekt und zerhaut mir mein Verstaendis-
konstrukt im Kopf gleich mit zu Klump. Vielleicht ist heute auch nicht mein
Tag, aber Beispiel: das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
nicht mal ansatzweise begriffen ;-( Ich kann das einfuegen, wo ich will,
es passiert auch mal was, aber nix, was mir beim Verstaendis hilft.
Egal - ich brauche erst mal ein balastbares Grundkonstrukt - der Rest
muss warten ;-(
Ich hatte uebrigens ganz urspruenglich angefangen mit der Glish - The
Holy Grail-Variante. Kam aber ueberhaupt nicht damit klar und hab
schliesslich alles weggeworfen und von Hand auf nackter Datei neu
begonnen. Mein Problem war eben der durchgehende Streifen rechts und
der ueberlappende Top-Bereich. Ich habe es ja so gemacht, dass ich die
erste Spalte von oben nach unten durchgehen lasse. Alternativ koennte ich
auch drei Spalten so wie bei dir machen und darueber einen durchgehenden
Kopf, in dem ich nur das Logo und das Background-Bild entsprechende
positioniere. Hab ich hier mal probiert:
http://physalia.de/tmp/TESTh.html
Ich dachte schon, dass dies die einfachere Variante waere, ich koennte
das Top dann auf 100% Breite setzen und die Spalten dann drunter und
muss es dann 'nur' schaffen, die Linkeste oben 'anzukleben'. Nun wurde
mir aber vehement von dieser Variante abgeraten und ich kann nicht
ueberschauen,
was fuer gravierende Nachteile sie hat ;-(
Magst du mir noch einen Tipp geben, wie ich meinen Kopfbereich - den
der Seite meine ich diesmal ;-) - deiner Meinung nach anlegen soll,
wenn ich deine Variante 1 oder 6 nutzen will?
Und noch eine Frage zur Variante 6: Finde ich am logischten (also
rechts, links und Mitte nimmt sich - aber die Mittelbox rueckt dabei
weiter nach oben, als die lankierenden beiden. Das laesst sich dabei
wohl nicht wirksam vermeiden, oder? Dann muss ich wohl bei Variante 1 bleiben...
> Dort kann es doch auch sein. Muss es unbedingt komplett zu sehen sein?
> Würde es stören, wenn es bei schmaleren Browserfenstern an der oder den
> Seiten etwas beschnitten würde?
Nein, du hast mir genau das gezeigt, was ich mir auch gewuenscht haette,
aber nicht zu konstruieren wusste. 1000 Dank dafuer!
Herzliche Gruesse
Nicola
Der folgende Beitrag wurde am 07. 12. 2004, 11:51 Uhr von Nicola Straub veröffentlicht.
So,
die andere Baustelle...
> konstrukt im Kopf gleich mit zu Klump. Vielleicht ist heute auch nicht mein
> Tag, aber Beispiel: das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
> nicht mal ansatzweise begriffen ;-( Ich kann das einfuegen, wo ich will,
> es passiert auch mal was, aber nix, was mir beim Verstaendis hilft.
Oder vielleicht doch... Ich habe jetzt mal alle Boxen mit einem
Clearing versehen. Und siehe da: Wenn ich die Container-Box cleare,
dann umfliesst sie auch die anderen:
http://physalia.de/tmp/TEST.html
Die Container-Box selbst floatet allerdings nirgends nicht - nicht nach
meinem Verstaendis jedenfalls: Alles was ich zu Clearing gelesen
hatte, hiess immer "am Ende eines floatenden Elementes" muss man clearen.
Oder am Ende des letzten floatenden. Kurzum, mit meinem Verstaendis
stimmt da was nicht ;-(
Also jedenfalls habe ich jetzt dennoch einen umarmenden Container
(im Test blau).
Immerhin. Nur kuemmert es die Spalten dennoch nicht, dass ich sie auf
100 % Hoehe setze!
Ich koennte mir vorstellen, dass dies daran liegt, dass sie nicht damit
klarkommen, dass oben ja schon ein 100px hohes Element im
Container liegt und ihre 100% halt nur fuer den Restplatz gelten.
ABER: Spalte #links hat ja ihre vollen 100% Hoehe Platz und zieht sich
dennoch nicht nach unten durch.
Wie 'denken' diese Boxen?*
ratlos
Nicola
*Wenn diese ganzen CSS-Sachen eine logische Logik haetten, dann waere
es IMO nicht so schwierig fuer mich zu verstehen. So nach dem Motto
"4 ist groesser 2. Das kann man sich merken.
Aber diese komische Grafik-Logik ist fuer meinen Kopf
scheints zu komplex. Da gilt nicht 4 > 2 sondern "4 = links von 2"
dafuer dann vielleicht "6 = Abstand von 7 nur wenn 2" und so weiter
oder wie auch immer. Hab ich ein Problem durchschaut, kommt das naechste
und schon hab ich wieder nen buffer overflow im Kopf - meinem eigenen,
meine ich jetzt ;-) *grummel*
Der folgende Beitrag wurde am 07. 12. 2004, 12:12 Uhr von wahsaga veröffentlicht.
hi,
> Also jedenfalls habe ich jetzt dennoch einen umarmenden Container
> (im Test blau).
> Immerhin. Nur kuemmert es die Spalten dennoch nicht, dass ich sie auf
> 100 % Hoehe setze!
wird es vermutlich auch nie - siehe u.a. http://forum.de.selfhtml.org/?t=96020&m=583261, wo dieses thema zum wiederholten male angesprochen wurde.
gruß,
wahsaga
--
"Look, that's why there's rules, understand? So that you _think_ before you break 'em."
Der folgende Beitrag wurde am 07. 12. 2004, 12:24 Uhr von Nicola Straub veröffentlicht.
Hi!
> wird es vermutlich auch nie - siehe u.a. http://forum.de.selfhtml.org/?t=96020&m=583261, wo dieses thema zum wiederholten male angesprochen wurde.
Hatte ich schon gelesen! Und da sagt Ingo Turski:
*** snip ***
gar nicht. Nebeneinanderliegende Blockelemente beeinflussen sich nicht gegenseitig in ihrer Höhe wie Tabellenzellen.
*** snap ***
Soweit ich Tabellenzellen kenne, folgen die Hoehen _aller_ nebeneinander
liegenden Zellen der Hoehe der hoechsten Zelle.
Argh! NICHT. Da steht _nicht_. Hatte ich wirklich vorhin
ueberlesen ;-(
*grummel*
Nicola
Der folgende Beitrag wurde am 07. 12. 2004, 13:47 Uhr von schwarze Piste veröffentlicht.
Tachchen!
> > wird es vermutlich auch nie - siehe u.a. http://forum.de.selfhtml.org/?t=96020&m=583261, wo dieses thema zum wiederholten male angesprochen wurde.
Schon wieder eine neue Baustelle?
Containerbox strecken ist was ganz anderes als gleichlange Boxen!
Letzteres kannst du übrigens wirkich knicken, da gibt's höchstens "Lookalikes". ;-)
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
http://www.smartbytes.de
Der folgende Beitrag wurde am 07. 12. 2004, 14:25 Uhr von Nicola Straub veröffentlicht.
Hi!
> Schon wieder eine neue Baustelle?
Puzzle ich an einer Stelle was zusammen, faellt mir an andere Stelle
was neues auf ;-(
> Containerbox strecken ist was ganz anderes als gleichlange Boxen!
Ich hatte was von 100% Hoehe (und frag bloss nicht wo, ich hab heute
frueh (zu)viel gelesen) gehoert, mit der sich Boxen auf die Hoehe
der Verpackungskiste ziehen. Und dann gesehen, dass mein Container ja
selbst keine richtige Hoehe hat. Und so kam das Container-Hoehen-
Problem zum Spalten-nach-unten-ziehen-Problem...
> Letzteres kannst du übrigens wirkich knicken, da gibt's höchstens "Lookalikes". ;-)
Im Grunde ist ALLES CSS ja nur loolalike; wenn man sich die Seite
mal ohne das Stylesheet ansieht... Soll heissen, 'lookalike' find
ich nix per se Negatives. Nur wenn die Konstruktion dafuer womoeglich
800 neue Baustellen aufreisst... *seuftz*
Herzliche Gruesse
Nicola
Der folgende Beitrag wurde am 07. 12. 2004, 14:35 Uhr von schwarze Piste veröffentlicht.
Tachchen!
> Im Grunde ist ALLES CSS ja nur loolalike; wenn man sich die Seite
> mal ohne das Stylesheet ansieht...
Auch eine interessante Interpretation.
> Soll heissen, 'lookalike' find ich nix per se Negatives.
Was ich damit eigentlich sagen wollte und auch immer wieder gerne empfehle:
Wenn man schon die Boxen nicht gleich lang bekommt, dann kann man dennoch
manchmal diesen Look erzeugen. Wenn - wie in deinem Fall - die Boxen eine
feste Breite haben, kannst du dem Container (der sich ja inzwischen streckt)
ein sich vertikal wiederholendes Hintergrundbild verpassen, dass in deinem
Fall wohl links dunkelgrün wäre und rechts und in der Mitte sandfarben beige.
Dieser Look (und nicht mehr) würde sich an der Länge der längsten Spalte
orientieren, obwohl die Spalten natürlich nicht gleich lang sind. ;-)
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
http://www.smartbytes.de
Der folgende Beitrag wurde am 07. 12. 2004, 14:38 Uhr von schwarze Piste veröffentlicht.
Tachchen!
Ich nehme sandfarben beige zurück für hellgrün ... falsch im Kopf gehabt.
Hoffe, du hast mich trotzdem verstanden. ;-)
Gruß
Die schwarze Piste
--
ie:{ fl:( br:^ va:) ls:# fo:) rl:( n4:& ss:{ de:] js:| ch:? mo:) zu:$
http://www.smartbytes.de
Der folgende Beitrag wurde am 07. 12. 2004, 12:43 Uhr von Ingo Turski veröffentlicht.
Hi,
> > das Clearen hab ich - auch nach Genuss von Ingos Beschreibung
> > nicht mal ansatzweise begriffen ;-(
mach' Dir nichts draus. Kein einziger Browserhersteller hat die Specs bisher vollständig verstanden bzw. umgesetzt. ;-)
> Alles was ich zu Clearing gelesen
> hatte, hiess immer "am Ende eines floatenden Elementes" muss man clearen.
> Oder am Ende des letzten floatenden. Kurzum, mit meinem Verstaendis
> stimmt da was nicht ;-(
Ich versuche mich mal in ASCII-Art...
|--------------------Container--------------------|
|Überschrift {float:none} |
||-----------------|------------------------------|
||Menü {float:left}| Inhalt {float:none} |
||-----------------|-Container Ende---------------|
|Menü |
|Menü |
|----Menü Ende----|
Das Menü ist aus dem Textfluß genommen und beeinflußt damit nicht mehr die Höhe des umschließenden Containers. Berücksichtigt wird nur die Höhe der nichtfloatenden Elemente (Überschrift und Inhalt).
Nun ein clearendes Element:
|--------------------Container--------------------|
|Überschrift {float:none} |
||-----------------|------------------------------|
||Menü {float:left}| Inhalt {float:none} |
||Menü | |
||Menü | |
||----Menü Ende----| |
|Footer {clear:left} |
|--------------------Container Ende---------------|
Wenn Du nun davon ausgehen kannst, daß der Inhaltsbereich höher ist als das bzw. die floatenden Elemente, dann kannst Du dem Container eine Hintergrundfarbe zuweisen (in Deinem Fall grün), die dann durchgängig bis unten geht, und dem Inhaltsbereich eine andere Hintergrundfarbe (in Deinem Fall weiss für die Zwischenräume).
freundliche Grüße
Ingo
Der folgende Beitrag wurde am 07. 12. 2004, 14:19 Uhr von Nicola Straub veröffentlicht.
Hi!
Erst mal danke!
> Ich versuche mich mal in ASCII-Art...
>
> |--------------------Container--------------------|
> |Überschrift {float:none} |
> ||-----------------|------------------------------|
> ||Menü {float:left}| Inhalt {float:none} |
> ||-----------------|-Container Ende---------------|
> |Menü |
> |Menü |
> |----Menü Ende----|
> Das Menü ist aus dem Textfluß genommen und beeinflußt damit nicht mehr die Höhe des umschließenden Containers. Berücksichtigt wird nur die Höhe der nichtfloatenden Elemente (Überschrift und Inhalt).
Aha, drum ging mein Container nur um das Top-Element und nicht
weiter.
> Nun ein clearendes Element:
> |--------------------Container--------------------|
> |Überschrift {float:none} |
> ||-----------------|------------------------------|
> ||Menü {float:left}| Inhalt {float:none} |
> ||Menü | |
> ||Menü | |
> ||----Menü Ende----| |
> |Footer {clear:left} |
> |--------------------Container Ende---------------|
Hmmm.
> Wenn Du nun davon ausgehen kannst, daß der Inhaltsbereich höher ist als das bzw. die floatenden Elemente, dann kannst Du dem Container eine Hintergrundfarbe zuweisen (in Deinem Fall grün), die
Hab ich ja mal gemacht...
> dann durchgängig bis unten geht, und dem Inhaltsbereich eine andere Hintergrundfarbe (in Deinem Fall weiss für die Zwischenräume).
Das bedeutet, ich muss um die Mitte und rechts noch eine Box drumrum
machen, die ich dann weiss setzen kann...
Dann habe ich zwar den gruenen Bereich 'bis unten' - aber Mitte und links
machen immer noch, was sie wollen ;-(
Nur um's wirklich zu verstehen: Was _sagt_ dieses 'clear' denn nun genau
dem Browser? Ich schreibe es unten in das _umfloatende_ rechts-Element
rein, laut deiner Skizze. Also nicht am Ende des floatenden Elementes. Das
sit schon aehnlicher dem frueheren <br clear=all>, neben einem Bild
mit align,
wenn der folgende Text nicht mehr umfliessen soll.
Bei mir aber floatet (leider, *seuftz*) alles unterhalb des top-DIVs,
der Container zieht sich aber brav unter die alle drunter, wenn ich
_ihn_ 'cleare'. Ich verstehe, dass dies das von dir berechnete Ver-
halten ist und muss es mir einfach merken. Denn ich verstehe immer
noch NICHT die Logik - was denkt sich der Browser:
"Da ist dieses Element #bla, das hat die Eigenschaft
'float', also kuemmere ich mich um dieses nicht".
Und ein paar Zeilen liest er das clearing und denkt:
"Da ist dieses Element #bla, das hat die Eigenschaft
'float' nicht (mehr), also muss ich das beachten".
Verstehst du, was ich meine: Wie kann denn eine _Eigenschaft_
'gleichzeitig'
unterschiedlich sein. Hm, das trifft's nicht. Anders: Ob ich etwas bin,
um das man rumlaufen muss oder wo man durchschluepfen kann - das sind
doch komplett gegenlaeufige Auspraegungen dieser Eigenschaft. Wand oder Nebel.
Wie kann etwas erst Wand sein und dann ploetzlich Nebel?
Manchmal denke ich, mein Hirn ist nicht 'floatingly' enough, um diese
Grundprinzipien der CSS-Denke zu kapieren.
Nunja, steter Tropfen hoelt den Stein - vielleicht weicht auch mein
Granitbrett vor dem Kopf (bezueglich all der anderen Dinge) noch auf.
Nur habe ich nur wenige Tage fuer dieses Layout ;-(
Herzliche Gruesse
Nicola
Der folgende Beitrag wurde am 07. 12. 2004, 15:21 Uhr von Ingo Turski veröffentlicht.
Hi,
> Das bedeutet, ich muss um die Mitte und rechts noch eine Box drumrum
> machen, die ich dann weiss setzen kann...
so hatte ich mir das gedacht, ja.
> Nur um's wirklich zu verstehen: Was _sagt_ dieses 'clear' denn nun genau
> dem Browser? Ich schreibe es unten in das _umfloatende_ rechts-Element
> rein, laut deiner Skizze.
sorry, meine Skizze war ungenau. So:
|--------------------Container--------------------|
|Überschrift {float:none} |
||-----------------|------------------------------|
||Menü {float:left}| Inhalt {float:none} |
||Menü |------------------------------|
||Menü | ............................ |
||----Menü Ende----| ............................ |
|-------------------------------------------------|
|Footer {clear:left} |
|--------------------Container Ende---------------|
wäre es wohl klarer.
> "Da ist dieses Element #bla, das hat die Eigenschaft
> 'float', also kuemmere ich mich um dieses nicht".
> Und ein paar Zeilen liest er das clearing und denkt:
> "Da ist dieses Element #bla, das hat die Eigenschaft
> 'float' nicht (mehr), also muss ich das beachten".
falsch gedacht. Durch das clear wird - im obigen Beispiel - der Footer unter das Menü gesetzt. Der Footer befindet sich im Elementenfluß und dadurch umfaßt die Höhe des Containers nun - mitsamt dem Footer - auch das Menü; der gepunktete Bereich erhält also die Hintergrundfarbe des Containers.
freundliche Grüße
Ingo
Der folgende Beitrag wurde am 07. 12. 2004, 23:07 Uhr von Detlef G. veröffentlicht.
Hallo Nicola
> Geil. Und der absolute Overflow! Wonach entscheidet man denn, welche
> Technik man nimmt?
Die Beispiele sind keine fertigen Vorschläge, die einfach übernommen werden
können. Sie sollen nur das grundsätzliche Verständnis zu floatenden Boxen bei
verschiedenen Eigenschaften unterstützen.
Es wurden bewusst keine Anpassungen oder Hacks verwendet.
Mir ist an deiner Seite noch Einiges unklar.
Was soll jeweils "Header" sein?
(Designelement? Überschrift des Folgenden?)
Soll "Im Wald ist es schön grün. Jedenfalls, wenn nicht gerade Winter ist!"
wirklich die wichtigste Überschrift, die Hauptüberschrift der Seite sein?
Soll es sonst keine Überschriften geben?
Wenn du dir die Seite ganz ohne CSS ansiehst, entspricht das, was du dann
siehst, der logischen Struktur, die die Seite haben soll?
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 08. 12. 2004, 14:00 Uhr von Nicola Straub veröffentlicht.
Hallo Detlef!
> Die Beispiele sind keine fertigen Vorschläge, die einfach übernommen werden
> können. Sie sollen nur das grundsätzliche Verständnis zu floatenden Boxen bei
> verschiedenen Eigenschaften unterstützen.
> Es wurden bewusst keine Anpassungen oder Hacks verwendet.
Schon klar. Was ich meinte ist: Wie entscheidet man, ob man bei aehnlicher
Aufgabenstellung beispielsweise eher mit 3x float left oder (wie ich
es hatte) 2x float left + 1 float right waehlt. Letzlich siehst du ja,
hab ich dann selbst schon ausgewaehlt - meine Kriterien waren z.B.
das Verhalten des Abstandes der ganz rechten Box zum Rest, der sich
bei meinem Ansatz (#rechts = float right) eben veraenderte beim
Auseinanderziehen des Fensters (eben weil die Box ja rechts 'kleben' blieb
dabei. Ich habe also aus deinen Beispielen 'gelernt', meine rechte Box
auch links floaten zu lassen ;-)
> Mir ist an deiner Seite noch Einiges unklar.
> Was soll jeweils "Header" sein?
> (Designelement? Überschrift des Folgenden?)
Erwischt. Header ist eigentlich die H1 und dafuer ist die H1 eigentlich
ein Teaser, eine Subheadline. Wer ich noch entsprechend umbauen, denn
du hast voellig Recht!
> Soll "Im Wald ist es schön grün. Jedenfalls, wenn nicht gerade Winter ist!"
> wirklich die wichtigste Überschrift, die Hauptüberschrift der Seite sein?
> Soll es sonst keine Überschriften geben?
Eigentlich hatte ich hier eine Subheadline gesehen. Mein Problem war:
Ich hatte zu dem Zeitpunkt noch keinen einzigen Text fuer die Seiten
gesehen, so dass ich nur raten konnte, ob die Ueberschriften knackig
und ob Subheadlines ueberhaupt vorhanden sind/sein werden etc. Wie so oft,
gibt es nur einen Flyer (und den noch nicht mal fertig) als Vorlage
und leider keine aufs Web hin gestalteten Texte. Ich muss mir die
erst angucken und sehen, wie ich es dann mache...
> Wenn du dir die Seite ganz ohne CSS ansiehst, entspricht das, was du dann
> siehst, der logischen Struktur, die die Seite haben soll?
Bis auf die Ueberschriftenstruktur schon. Wie gesagt, hier muss ich aber
erst die Texte abwarten, um zu sehen, wie die strukturiert sind...
Danke fuer Deine wertvollen Hinweise!
Herzliche Gruesse
Nicola
Der folgende Beitrag wurde am 08. 12. 2004, 19:47 Uhr von Detlef G. veröffentlicht.
Hallo Nicola
> Schon klar. Was ich meinte ist: Wie entscheidet man, ob man bei aehnlicher
> Aufgabenstellung beispielsweise eher mit 3x float left oder (wie ich
> es hatte) 2x float left + 1 float right waehlt.
Das hängt z.B. davon ab, wie sich die Boxen bei Fensterverkleinerung neu
sortieren sollen. Für dein Layout (rechts und links eine Spalte, dazwischen
der Haupttext würde ich je nachdem, ob der mittlere Block eine feste Breite
haben soll Variante 6 oder 7 verwenden oder, wenn die Reihenfolge im
Quelltext unbedingt anders sein muss, die rechte und/oder linke Spalte
zur Not absolut positionieren.
> > Mir ist an deiner Seite noch Einiges unklar.
...
Diese Fragen stellte ich aus folgendem Grund. Das gewünschte Layout geht von
einer Tabellenstruktur aus. Es lässt sich nicht _einfach_ 100%ig in
CSS-Layut umsetzen. Der Vorteil eines CSS-Layouts bestände darin, im HTML
die inhaltliche Struktur darzustellen, und das Design auszulagern.
Wenn ich mir aber das HTML ansehe, dann ist diese Div-Suppe auch nicht
unbedingt besser, als eine Layouttabelle.
Dazu habe ich schon mehrfach geschrieben:
http://forum.de.selfhtml.org/archiv/2004/4/t78963/#m457213
http://forum.de.selfhtml.org/archiv/2004/12/t95859/#m582401
http://forum.de.selfhtml.org/archiv/2004/5/t81349/#m477537
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 08. 12. 2004, 22:15 Uhr von Nicola Straub veröffentlicht.
Hi!
> der Haupttext würde ich je nachdem, ob der mittlere Block eine feste Breite
> haben soll Variante 6 oder 7 verwenden oder, wenn die Reihenfolge im
> Quelltext unbedingt anders sein muss, die rechte und/oder linke Spalte
> zur Not absolut positionieren.
Variante 6 fand ich ja auch verfuehrerisch - mich hat der unterschied-
liche Abstand nachoben aber abgeschreckt. Bis ich das dann
(wenn es ueberhaupt geht) wieder debugged habe...
> Diese Fragen stellte ich aus folgendem Grund. Das gewünschte Layout geht von
> einer Tabellenstruktur aus. Es lässt sich nicht _einfach_ 100%ig in
> CSS-Layut umsetzen. Der Vorteil eines CSS-Layouts bestände darin,
Mein Problem, dass ich halt die Erfahrung noch nicht habe, ein Layout
so zu machen, dass ich CSS-Probleme umschiffe... Tatsaechlich bin ich
IHMO auch keine grosse Kuenstlerin. Ich bin so herangegangen: Ich hab
als Vorlage einen einzelnen Flyer, der zudem noch halb im Entwurfstadium
ist und von dem, nebenbei gesagt, so ziemlich gar nix webtauglich ist.
Ich bekomme gesagt, dass man mit der Site noch einiges vorhabe, so dass
ich davon ausgehe, dass ein (moeglichst typisches) Portallayout sein
muss.
Also versuche ich ein Portallayout mit einer entsprechenden Anmutung zu
versehen.
> Wenn ich mir aber das HTML ansehe, dann ist diese Div-Suppe auch nicht
> unbedingt besser, als eine Layouttabelle.
Hmm, das trifft mich. Aber eigentlich finde ich es gar nicht soooo
unuebersichtlich. Von den beiden Container-DIVs abgesehen natuerlich.
Die sind rein dem Layout geschuldet - die anderen vier spiegeln doch
exakt die vier (thematischen) Bereiche der Seiten wider...
> Dazu habe ich schon mehrfach geschrieben:
> http://forum.de.selfhtml.org/archiv/2004/4/t78963/#m457213
> http://forum.de.selfhtml.org/archiv/2004/12/t95859/#m582401
> http://forum.de.selfhtml.org/archiv/2004/5/t81349/#m477537
Jahaaa. Schoen waere es, so vorgehen zu koennen. Tatsaechlich habe
ich heute erst die mehr oder weniger endgueltigen Texte bekommen. Die
ersten Texte erst letzten Sonntag. Online stehen soll der Kram mit 17
Seiten eigentlich aber schon am Wochenende. Ich musste also schon
vorher anfangen, den Rahmen zu basteln. Vor allem, weil ich ja mangels
Erfahrung das nicht an einem Tag so fertig hinstellen kann. Um genau zu
sein, hab ich ja noch immer keine 'fertigen' Seiten, in die ich nun
die Inhalte fummeln koennte (siehe meinen 'neuen Versuch' ganz oben
im Thread).
Und da alles ueber zig Entscheidungs-Instanzen laufen muss, kann ich auch
nicht einfach zuwarten und dann wenn ich endgueltig die Inhalte kenne,
ein Layout drumrumbauen. Zumal - wie gesagt - die jetzigen Inhalte sind
IMHO nur ein billiger Abklatsch davon, was da eigentlich mal geplant
ist. Aber genau weiss man es ja nicht ;-(
Herzlichen Dank dennoch fuer deine Ueberlegungen,
ich koennte allerdings, um ehrlich zu sein, momentan
eher mal was aufbauendes gebrauchen *seuftz*
Herzliche Gruesse
Nicola
*die gern wieder einen Job als Projektleiterin haette
(ca. 20 h/Woche) - darin bin ich naemlich 'aus dem Stand'
richtig gut! *
Der folgende Beitrag wurde am 09. 12. 2004, 03:52 Uhr von Detlef G. veröffentlicht.
Hallo Nicola
> Variante 6 fand ich ja auch verfuehrerisch - mich hat der unterschied-
> liche Abstand nachoben aber abgeschreckt. Bis ich das dann
> (wenn es ueberhaupt geht) wieder debugged habe...
Dieser Fehler ist leicht zu beseitigen, er entsteht dadurch, dass beim
Zusammentreffen von margin-bottom und margin-top die Margins nicht addiert
werden sondern der größere gewinnt. Bei floatenden Elementen trifft dieses
nicht unbedingt zu.
Habe Divs mit festen Breiten und Divs mit prozentualen Breiten angepasst.
Deine Seite, kurz skizziert, ohne große Browseranpassungen.
> Mein Problem, dass ich halt die Erfahrung noch nicht habe, ein Layout
> so zu machen, dass ich CSS-Probleme umschiffe...
Große Erfahrungen meinerseits, möchte ich auch nicht behaupten. Mitte 2002
habe ich mich erstmalig mit HTML beschäftigt.
> Tatsaechlich bin ich IHMO auch keine grosse Kuenstlerin.
Ich auch nicht, habe aber einen Sohn, der da (Print-)Layouts entwirft.
> Ich bin so herangegangen: Ich hab
> als Vorlage einen einzelnen Flyer, der zudem noch halb im Entwurfstadium
> ist und von dem, nebenbei gesagt, so ziemlich gar nix webtauglich ist.
Das kenne ich: MS-Publisher-Drucklayout mit Tabellen umgestzt (Grund-HTML-Layout von Februar 2003).
> Hmm, das trifft mich.
War von mir nicht böse gemeint.
> Aber eigentlich finde ich es gar nicht soooo unuebersichtlich.
Es geht nicht unbedingt um die Übersichtlichkeit.
Ich meine nur, für die logische Struktur des Inhalts ist es unerheblich,
ob alles in Divs gepackt wird oder in Tabellen.
> Von den beiden Container-DIVs abgesehen natuerlich.
Die stören mich weniger, diese gruppieren ja lediglich die enthaltenen
Elemente.
Mich persönlich stört mehr:
> ...
> <div class="logo"><img class="logo" src="images/logo.gif" alt="Logo" /></div>
Warum muss das Logo extra in einem Div stecken?
> <br /><br />
Gibt es für soetwas nicht margin oder padding?
> <div class="header">Header</div>
Was soll das sein? (eventuell eine Überschrift?)
> <div class="menue">
> <ul>
Muss die Liste wirklich noch extra in ein Div?
> ...
> Jahaaa. Schoen waere es, so vorgehen zu koennen. Tatsaechlich habe
> ich heute erst die mehr oder weniger endgueltigen Texte bekommen. Die
> ersten Texte erst letzten Sonntag.
Wichtig ist dabei nicht unbedingt wortwörtlich der endgültige Text, vielmehr
die Struktur. Wieviele Texte, wie strukturiert.
> Online stehen soll der Kram mit 17 Seiten eigentlich aber schon am Wochenende.
Also möglichst schon, bevor die Texte gleiefert sind. ;)
> Herzlichen Dank dennoch fuer deine Ueberlegungen,
> ich koennte allerdings, um ehrlich zu sein, momentan
> eher mal was aufbauendes gebrauchen *seuftz*
Tut mir leid, dass du so im Zeitdruck bist.
Ich denke, du solltest es vielleicht ersteinmal mit einer einfachen
Layouttabelle das Spaltenlayout umsetzen, was du ja kannst.
Damit solltest du die Seiten sehr schnell und ohne große Probleme
online stellen können. Auch dabei kannst du ja alle Eigenschaften ins
CSS auslagern.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 09. 12. 2004, 12:50 Uhr von Nicola Straub veröffentlicht.
Hallo Detlef!
> Dieser Fehler ist leicht zu beseitigen, er entsteht dadurch, dass beim
> Zusammentreffen von margin-bottom und margin-top die Margins nicht addiert
> werden sondern der größere gewinnt. Bei floatenden Elementen trifft dieses
> nicht unbedingt zu.
Erstaunlich. Und ist dies dann wieder logisch? Weil die gefloateten
Elemente 'ja aus dem Fluss' genommen sind? Ich kriege diese Logik
nicht im meinen Schaedel *seuftz*
> Deine Seite, kurz skizziert, ohne große Browseranpassungen.
Oh Mann. Ist das wunderschoen! Warum bin ich daran so komplett
gescheitert? Ich hatte ja natuerich ausfuehrlich versucht, den
Mittelteil dehnbar zu machen. Mit width:100% oder auch width:auto.
Beim mir nahm sich das Teil dann aber immer gleich 100% der
Fensterbreite oder mindestens schob es das rechte Element nach
unten! Womit genau hast du es nun bezwungen? Mit der festen
Containerbreite? DAS war alles, was mir fehlte?
> > Mein Problem, dass ich halt die Erfahrung noch nicht habe, ein
> Große Erfahrungen meinerseits, möchte ich auch nicht behaupten. Mitte 2002
> habe ich mich erstmalig mit HTML beschäftigt.
Ach, da hab ich ja viel laenger Erfahrung! *lach* Ich treibe mich ja im
Web seit 1995 rum und seit 1997 oder so hab ich schon Projektleitung
fuer Webprojekte gemacht. Hab _natuerlich_ auch immer klein, klein
selbst gebastelt und bin eh eine, die sich immer alles genau erklaeren
laesst (meine armen frueheren MitarbeiterInnen ;-)) Seit 2002 betreue
ich auch die deutsche Geocaching-Website
http://www.geocaching.de - ABER: das ist halt alles ganz billig
in HTML gemacht und dann stellenweise halt in jeweils dem, was ich grad
zugelernt hab (Includes, Mini-PHP und so weiter). So richtig an CSS
rangerasselt bin ich erstmals Anfang des Jahres mit dem Nachbau
eines (in Frames bestehenden) Layouts. Dann hab ich mit dem Quellendreieck
(demnaechst unter http://www.eifeler-quellendreieck.de/ ja ein
Layout gemacht, das ich recht einfach umsetzen konnte.
> > Hmm, das trifft mich.
> War von mir nicht böse gemeint.
Meine ich auch nicht. Aber ich bin nunmal so drauf, dass ich das, was ich mache,
immer 100% und _richtig_ machen will. Und wenn ich dann halbwegs zufrieden
und sogar mal ein bischen Stolz bin und dann stellt sich raus: Das
ist Megamist (und ich hab's nicht mal gemerkt!) - dann haut mich sowas
halt aus den Schuhen.
> > Aber eigentlich finde ich es gar nicht soooo unuebersichtlich.
> Es geht nicht unbedingt um die Übersichtlichkeit.
> Ich meine nur, für die logische Struktur des Inhalts ist es unerheblich,
> ob alles in Divs gepackt wird oder in Tabellen.
Eben. Bzw. ich finde es dann schon in DIVs sinnvoller, weil man die
ja 'sprechend' benennen kann. Das macht den Code viel uebersichtlicher,
als noch zu Tabellenzeiten, wo ich immer mit Kommentaren arbeiten musste,
um mir noch merken zu koennen, wo welche Inhalte reinkommen (guck nur mal
in den Quellcode meiner Geocaching-Seiten *grusel*)
> > Von den beiden Container-DIVs abgesehen natuerlich.
> Die stören mich weniger, diese gruppieren ja lediglich die enthaltenen
> Elemente.
> Mich persönlich stört mehr:
> > <div class="logo"><img class="logo" src="images/logo.gif" alt="Logo" /></div>
> Warum muss das Logo extra in einem Div stecken?
Weil es ohne nicht geklappt hat bei mir. Schiess mich tot - ich meinte,
es muesse doch reichen, dem img-Tag die Logo-Klasse mitzugeben. Aber
das kam dann nicht im Browser an, jedenfalls ignorierte er meine Formatierungen
und nahm sie nur an, wenn ich die Klasse in einem DIV benannte. Ich hatte
das noch auf meiner Debugging-Liste...
> > <br /><br />
> Gibt es für soetwas nicht margin oder padding?
Jaaaaahaaa. Guck mal. Ich war erst dabei, generell die Seite hinzustellen.
Die Bilder und den Kram hab ich 'nur schnell reingefummelt' - um einen
Gesamteindruck zu bekommen. Obwohl du Recht hast - meist bleiben solche
Schnellschuesse dann immer bis zuletzt erhalten, weil man sie nie
mehr anfasst ;-(
> > <div class="header">Header</div>
> Was soll das sein? (eventuell eine Überschrift?)
Ja, das hab ich ja schon gestern rausgefummelt, siehe mein letztes
Ergebnis http://physalia.de/tmp/TESTh.html und mein Posting dazu (ganz oben).
> > <div class="menue">
> > <ul>
> Muss die Liste wirklich noch extra in ein Div?
Hmm, selbes Problem wie beim Image. Ich hatte urspruenglich - wenn ich mich
noch korrekt erinnere - das als ul class="menue" machen wollen, aber
dann war das irgendwie nicht belastbar. Weiss jetzt nicht mehr, aber
es klappte wohl nicht und dann hab ich es halt so festgezogen.
> Wichtig ist dabei nicht unbedingt wortwörtlich der endgültige Text, vielmehr
> die Struktur. Wieviele Texte, wie strukturiert.
Eben. Und ich kannte weder die Texte noch so recht die Inhalte. und
die Struktur schon gar nicht (meine erste Vorlage war ein 'leerer' Flyer
mit Titelbild und die Textseiten hatten oben und unten ein kleines
Minibild statt Seitenzahl. Ach ja: Und ganz nebenbei hat sich die
Seitenzahl nun komplett verdoppelt. Und die Bilder sind teilweise in
einer Qualitaet, dass ich nicht weiss, wie der Drucklayouter sie
nutzen konnte *grummel*.
> > Online stehen soll der Kram mit 17 Seiten eigentlich aber schon am Wochenende.
Korrektur: 18 Seiten mind.
> Also möglichst schon, bevor die Texte gleiefert sind. ;)
korrekt! Einige Texte stehen noch immer aus!
> Tut mir leid, dass du so im Zeitdruck bist.
> Ich denke, du solltest es vielleicht ersteinmal mit einer einfachen
> Layouttabelle das Spaltenlayout umsetzen, was du ja kannst.
> Damit solltest du die Seiten sehr schnell und ohne große Probleme
> online stellen können. Auch dabei kannst du ja alle Eigenschaften ins
> CSS auslagern.
Nee. Das geht nicht. Ich hab mich da committet. Vor allem vor mir
selbst (aber nicht nur). Und ich will auch ein vernuenftiges
Print-Stylesheet machen koennen und so weiter...
Vor allem aber: Wenn ich es jetzt so mache und hernach noch mal neu
- dann finde ich nie ein Ende! Und so ein Auftrag muss ja auch mal
beendet
werden. Ich bin eh denkbar ungeeignet fuer selbstaendige Projekte,
weil ich eben nicht einfach mal was wieder loslassen kann. Ich hoffe,
ich lerne das noch. Oder finde wieder einen Job in meiner eigentlichen
Profession ;-)
Heute vormittag habe ich uebrigens meinen letzten Entwurf auf den
aktuellen IE zugeschneidert http://physalia.de/tmp/TESThIE.html
- und bin schon wieder in ein echtes Problem gelaufen. Dazu poste ich aber
noch mal neu oben in den Thread.
Meine bange Frage nun aber an dich: Ich wuerde es ja viiiiel lieber so
flexibel haben, wie du es jetzt hinbekommen hast! Darf ich mir das
nehmen und darauf noch mal neu aufbauen? Darf ich dir dann eine Flasche
Wein o.ae. zukommen lassen?
Erst mal muss ich jetzt allerdings was essen, hab schon das Fruehstueck
ausfallen lassen. und dann mal gucken, ob mein kleiner Mann mich
ab eins ueberhaupt noch arbeiten laesst, der war heute frueh um halb sieben
schon seltsam drauf und wollte auch nicht so gern bei der Tagesmutter bleiben
(was es sonst im ganzen letzten Jahr nicht einmal gab! Ausgerechnet jetzt... ;-(
Herzliche Gruesse und 1000 Dank!
Nicola
Der folgende Beitrag wurde am 09. 12. 2004, 13:46 Uhr von Ingo Turski veröffentlicht.
Hi,
> > Deine Seite, kurz skizziert, ohne große Browseranpassungen.
>
> Oh Mann. Ist das wunderschoen!
hat allerdings leider noch einen kleinen Schönheitsfehler im IE:
* html #container {
width:985px;
}
sorgt selbst bei maximiertem 1024er Fenster für horizontales Scrolling.
Ich würde den Wert entweder reduzieren oder auf eine Weite verzichten und die Waldgrafik rechts bis zum Baum beschneiden und dem Header eine dazu passende Hintergrundfarbe geben. Evtl. auch max-width mit expression (böse) simulieren.
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
Der folgende Beitrag wurde am 09. 12. 2004, 19:53 Uhr von Detlef G. veröffentlicht.
Hallo Ingo
> ... Evtl. auch max-width mit expression (böse) simulieren.
Richtig und nicht zu übertrieben eingestzt, sind diese durchaus brauchbar.
Ich hatte die Seite allerdings, wie geschrieben nur kurz so geändert, wie ich
herangegangen wäre, ohne mir noch Zeit für Anpassungen, Optimierungen und
Browsertests zu nehmen.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 09. 12. 2004, 19:56 Uhr von Detlef G. veröffentlicht.
Hallo Nicola
> Erstaunlich. Und ist dies dann wieder logisch? Weil die gefloateten
> Elemente 'ja aus dem Fluss' genommen sind? Ich kriege diese Logik
> nicht im meinen Schaedel *seuftz*
Warum genau es so ist, und ob es logisch ist, weiß ich nicht.
> ... Warum bin ich daran so komplett
> gescheitert? Ich hatte ja natuerich ausfuehrlich versucht, den
> Mittelteil dehnbar zu machen.
Du hast dir Variante 6 nicht genau genug angesehen. ;)
> Mit width:100% oder auch width:auto.
> Beim mir nahm sich das Teil dann aber immer gleich 100% der
> Fensterbreite oder mindestens schob es das rechte Element nach
> unten!
Prozentuale Breitenangaben beziehen sich auf die Gesamtbreite, nicht auf den
verbleibenden Rest.
> Womit genau hast du es nun bezwungen? Mit der festen
> Containerbreite? DAS war alles, was mir fehlte?
Erst die Elemente mit float in den Quelltext, dann das ungefloatete, dessen
Inhalt sich dann den Rest nimmt, bzw. dieses Element mittels margin von den
anderen fernhalten.
> http://www.geocaching.de - ABER: das ist halt alles ganz billig
> in HTML gemacht und dann stellenweise halt in jeweils dem, was ich grad
> zugelernt hab (Includes, Mini-PHP und so weiter).
Dann kannst du mehr als ich. Mit PHP habe ich mich noch nie beschäftigt.
Meine Webspaces sind ohne PHP und solange diese nicht unbedingt PHP
erfordern bleibt es bei statischen Seiten.
> ... immer 100% und _richtig_ machen will.
Geht mir genauso, weil mir das neue Layout noch nicht 100%ig gefällt,
verwende ich es (noch) nicht und aktualisiere weiter das alte
Tabellenlayout.
> ... Schiess mich tot
Nein! Warum sollte ich?
> es muesse doch reichen, dem img-Tag die Logo-Klasse mitzugeben.
Ja.
(Oft sind es kleine einfache Fehler, die man total übersieht.)
> Ja, das hab ich ja schon gestern rausgefummelt, siehe mein letztes
> Ergebnis http://physalia.de/tmp/TESTh.html und mein Posting dazu (ganz oben).
Die Seite selbst hat keine Überschrift?
Wie wäre die Überschrift der Gesamtseite bzw. des Projektes?
Deine h1 wären bei mir ganz starke h2-Kandidaten.
Noch etwas zu dieser Seite:
Du hast sie in UTF-8 kodiert und dies auch mittels meta-Tag angegeben.
Dein Server leifert die Seite aber als ISO-8859-1 aus. Viele Browser
halten sich richtigerweise an die Angaben des Servers.
> Meine bange Frage nun aber an dich: Ich wuerde es ja viiiiel lieber so
> flexibel haben, wie du es jetzt hinbekommen hast! Darf ich mir das
> nehmen und darauf noch mal neu aufbauen?
Was meinst du, wozu ich das online gestellt habe?
Damit es geheim bleibt und du es auf keinen Fall verwendest?
Natürlich kannst du es verwenden.
Aber Vorsicht, ich habe es nur auf die Schnelle zusammengeschrieben, keine
extra Anpassungen (z.B. IE5) und keine Browsertests, nur kurz im
Mozilla 1.7.3 und IE6 drübergesehen.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 09. 12. 2004, 20:48 Uhr von Nicola Straub veröffentlicht.
Hallo Detlef!
> Die Seite selbst hat keine Überschrift?
> Wie wäre die Überschrift der Gesamtseite bzw. des Projektes?
> Deine h1 wären bei mir ganz starke h2-Kandidaten.
Das Projekt steht ja immer im (Browser-) Titel und im Logo.
Die Seite hiesse im Beispiel 'Unsere Visionen'. DAS kaeme dann
auch noch zusaetzlich in den Titeltag. Ich hab nirgends was
hoeherrangiges als 'Unsere Visionen'. Nachrangiges wohl, die
'Ueberschriften' der Navigations-Rubriken koennten dann H2s
werden. Ich wollte nur nicht noch eine andere Schriftgroesse...
> Noch etwas zu dieser Seite:
> Du hast sie in UTF-8 kodiert und dies auch mittels meta-Tag angegeben.
Das ist nur deshalb, weil ich hier ja an SUSE 9.2 sitze und waehrend
dieser Puzzle-ei (Pusselei?) einfach irgendwann dieser Zeichenmurks
in den einkopierten Texten auf den Wecker ging - ich konnte nie
sehen,
wie denn nun ein Text wirkt oder wie weit die Navigationsbegriffe
so laufen im Vergleich zueinander etc. Da hab ich das auf UTF-8
gesetzt und konnte in Ruhe arbeiten.
Ich maskiere am Ende eh alle Sonderzeichen - Ingo hat mir schon mal
erklaert, dass dies nicht sein muss, aber ich bin es gewohnt mit
Zeichensatzwirrwarr zu leben (auf der GC.de haben wir haufenweise
aus anderen Quellen gezogene Daten und damit oft schon Texte mit
unterschiedlichen Zeichensaetzen in _einer_ Seite gehabt). Drum hab ich
mir das mit dem Maskieren der Umlaute angewoehnt. Phase 5 macht das
ja automatisch fuer einen, Quanta offenbar leider nicht und so
werd ich das bei Gelegenheit wohl per sed machen... Und dann auch den
Zeichensatz im Kopf wieder anpassen.
> Dein Server leifert die Seite aber als ISO-8859-1 aus. Viele Browser
> halten sich richtigerweise an die Angaben des Servers.
Ui, wusste ich gar nicht, dass der Server den im Dokument explizit genannten
Zeichensatz dominieren kann. Wo ist denn dabei schon wieder die Logik
*staun*? _Wenn_ sich schon mal jemand die Muehe macht, den Zeichensatz
zu definieren (wie oft stosse ich auf Seiten ohne Angabe!), dann sollte
man doch das auch ernst nehmen...
> Was meinst du, wozu ich das online gestellt habe?
> Damit es geheim bleibt und du es auf keinen Fall verwendest?
> Natürlich kannst du es verwenden.
Und wohin darf die Flasche Wein schicken? (Meine Mailadresse funktioniert).
> Aber Vorsicht, ich habe es nur auf die Schnelle zusammengeschrieben, keine
> extra Anpassungen (z.B. IE5) und keine Browsertests, nur kurz im
> Mozilla 1.7.3 und IE6 drübergesehen.
Schon klar. Puzzeln fuer den IE hab ich ja heute vormittag schon mal
geuebt ;-)
Herzliche Gruesse
Nicola
jetzt aber erst mal => Bett. Bin seit 6 auf den Beinen und hatte
nur 5,5 h Schlaf heute Nacht (minus die Halbwachmomente zum Kind
zudecken, Schnuller zurueckstecken etc.). Was ich jetzt noch machen
wuerde, wuerde im Chaos enden, fuerchte ich ;-(
Der folgende Beitrag wurde am 09. 12. 2004, 21:14 Uhr von Ingo Turski veröffentlicht.
Hi,
> Ui, wusste ich gar nicht, dass der Server den im Dokument explizit genannten
> Zeichensatz dominieren kann. Wo ist denn dabei schon wieder die Logik
> *staun*? _Wenn_ sich schon mal jemand die Muehe macht, den Zeichensatz
> zu definieren (wie oft stosse ich auf Seiten ohne Angabe!), dann sollte
> man doch das auch ernst nehmen...
nö. Wenn sich jemand die Mühe macht, dann weil der Server _keine_ Angaben übermittelt oder die Dateien auch offline funktionieren sollen (was allerdings offenbar nicht klappt - jedenfalls mag mein Firefox die UTF-Dateien des Forums offline nicht vernünftig darstellen).
freundliche Grüße
Ingo
--
[barrierefreie Webseitenerstellung » Suchmaschinenoptimierung | em?] (Tanzschritte gesucht?;-)
Der folgende Beitrag wurde am 10. 12. 2004, 00:30 Uhr von Detlef G. veröffentlicht.
Hallo Nicola
> Das Projekt steht ja immer im (Browser-) Titel und im Logo.
Ob den Browsertitel jeder liest? Zu oft steht dort nur "Neue Seite".
Kann den Text im Logo jeder lesen?
Es gibt auch Textbrowser, Screenreader, und Leute, die Bilder abgeschaltet
haben weil sie z.B. nur ein langsames Modem benutzen.
> ... Ich wollte nur nicht noch eine andere Schriftgroesse...
Muss die h1 unbedingt eine andere Schriftgröße haben?
Ob sie sich durch Schriftgröße, Schriftgewicht, Schriftart, Farbe oder die
Position auf der Seite hervorhebt, ist dir überlassen.
Auch das Logo selbst (natürlich mit sinnvollem alt-Text) kann in einem
h1-Element stecken (vielleicht nicht optimal aber möglich).
Es ist auch möglich sie nur anzuzeigen, wenn keine Bilder zu sehen sind,
also auch nicht der Logotext.
Auf Wiederlesen
Detlef
--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
Der folgende Beitrag wurde am 07. 12. 2004, 14:46 Uhr von Nicola Straub veröffentlicht.
Hallo!
Hab trotz des ganzen Frustes heute morgen es doch geschafft,
noch mal andere Layouts zu probieren.
Ich hab mit dem System von Detlef (Variante 1 + durchgehende Top-Box) gespielt.
Bin dort aber daran gescheitert, dass ich den Waldbanner nicht auf eine
Position left:22%; setzen kann... Also ganz so fluessig geht es
IMHO nicht, ich muesste die linke Box schon auf eine feste Breite
setzen.
Parallel hatte ich mein Layout auch einmal auf durchgehende Top-Box umgebaut:
http://physalia.de/tmp/TESTh.html
Hier auch den Banner in den Hintergrund und die Breite der Top-Box
automatisch. Den Banner dabei auf die Anfangsposition left:195px und
das Logo wie gehabt.
Ich finde, soweit sieht es gut aus - im IE ist alles noch verschoben,
aber ich hoffe, das ist nur Fleissarbeit und keine prinzipielle Sache
(oder?). Durch den Banner im Hintergrund und die variable Top-Breite
habe ich jetzt zwar keine Gummiband-Boxen, aber auch keinen Scrollbalken.
Die nicht mehr passenden Kisten rutschen einfach runter.
Wobei ich nicht weiss, ob der Auftraggeber dieses Verhalten besser findet,
als einen Scrollbalken. Aber ich kann ja die Top-Breite notfalls
einfach wieder festziehen.
Ich habe versucht, die Breite der Contentbox flexibler zu gestalten,
um ueber sie doch einen Gummibank-Effekt zu bekommen. Bin leider
gescheitert. Sowohl mit Prozentangabe als auch mit max-width gab
das nur Chaos bei mir (und ich hab noch nicht mal im IE geguckt, nur
Ff/Konqui erst mal). Sollte ich hier eine Moeglichkeit uebersehen haben,
die Sache noch etwas flexibler zu gestalten, damit die Kisten nicht gleich
den Abgang machen, wenn das Fenster mal schmaler wird, waere ich fuer
Hinweise extremst dankbar!
Mein Grundfrage an Euch aber ist: Was haltet Ihr davon? Sinnvoll,
belastbar,
vielversprechend? Oder schon wieder zurueck auf Anfang? (Wobei ich dann
wirklich keine Idee mehr hab ;-(
1000 Dank!
Nicola
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4