Neues Design. Neue Meinungen bitte.

[Phil]

Hi,
ich bins wieder, der langsam nervende Phil mit seinen CSS Problemen.^^
Ich habe mal ein neues Design angefertigt um mal den Kopf frei zu kriegen beim alten war es nach einer Zeit einfach zu durcheinander.

Hier ist der Link:

Klicken -> http://lmg.byto.de/PHIL/TEST/index/index/index.php
           http://lmg.byto.de/PHIL/TEST/index/index/index.php

Ein paar spezielle Fragen:

• Flexibel?
• dezent und nicht zu bunt / halbwegs seriös ?
• Kontakt | Impressum Position gut gewählt oder eher schlecht?
• Copyright Position gut gewählt oder eher schlecht?
• ordentlicher Quelltext oder Hürdenlauf?

Kritik, Änderungs/Verbesserungsvorschläge, weitere Ideen, Tipps ?
Her damit!

Danke schonmal im Vorraus.
mfg

Phil

[D.R.]

Hi,

ich bins wieder, der langsam nervende Phil mit seinen CSS Problemen.^^
Ich habe mal ein neues Design angefertigt um mal den Kopf frei zu kriegen beim alten war es nach einer Zeit einfach zu durcheinander.

Hier ist der Link:

Klicken -> http://lmg.byto.de/PHIL/TEST/index/index/index.php
           http://lmg.byto.de/PHIL/TEST/index/index/index.php

Mal so nebenbei: warum gibst du den Link eigentlich immer doppelt an? Einmal reicht doch auch.

Ein paar spezielle Fragen:

• Flexibel?

Ja, da hat sich einiges getan. Aber irgendwie wird bei mir (800x600) ein horizontaler Scrollbalken angezeigt. Hab auch schon rausgefunden was es ist (weiß aber noch nicht warum). Neben der Navi befundet sich folgender Text:

"Philipp Zentner 2006 ©"

Dieser rutscht irgendwie ein bisschen raus (FF 1.5.0.4)

• dezent und nicht zu bunt / halbwegs seriös ?

Ich die Farbgebung gefällt mir schon wesentlich besser. Das könntest du so lassen!

• Kontakt | Impressum Position gut gewählt oder eher schlecht?

Diese liegen bei mir irgendwie auf dem Bild. Ist aber vielleicht Absicht.

• Copyright Position gut gewählt oder eher schlecht?

Schlecht, da außerhalb des Bildes.

• ordentlicher Quelltext oder Hürdenlauf?

Was soll das denn: hr id="trennlinie". Du kannst doch auch hr formatieren. hr ist immer eine trennlinie.

Kritik, Änderungs/Verbesserungsvorschläge, weitere Ideen, Tipps ?

Bis auf die oben genannten Dinge bis jetzt noch nicht.

Einen schönen Mittwoch noch!

[Phil]

Ja, da hat sich einiges getan. Aber irgendwie wird bei mir (800x600) ein horizontaler Scrollbalken angezeigt. Hab auch schon rausgefunden was es ist (weiß aber noch nicht warum).

Hab ich auch auf (1024*768)
und ich hab ABSOLUT keine Ahnung wäre nett wenn du ein bisschen achsehn könntest worans liegt.

Neben der Navi befundet sich folgender Text:

"Philipp Zentner 2006 ©"

Dieser rutscht irgendwie ein bisschen raus (FF 1.5.0.4)

wie meisnt du das genau? aus dem Fenster?

• Kontakt | Impressum Position gut gewählt oder eher schlecht?

Diese liegen bei mir irgendwie auf dem Bild. Ist aber vielleicht Absicht.

ô.O öhm nein die sollten eigendlich unten rechts neben dem bild einige px vom rechten Rand entfernt sein

• Copyright Position gut gewählt oder eher schlecht?

Schlecht, da außerhalb des Bildes.

außerhalb des Bildes (Header-Grafik) oder des Fensters?

Was soll das denn: hr id="trennlinie". Du kannst doch auch hr formatieren. hr ist immer eine trennlinie.

"trennlinei sit der name" und ich wollte es per css formatieren.

Danke.
Das Problem ist jetzt das ich weder bei mir im IE6 noch im Firefox eins dieser Probleme habe. Außer das mti dem Scrollbalken.

Phil

[D.R.]

Hi,

Ja, da hat sich einiges getan. Aber irgendwie wird bei mir (800x600) ein horizontaler Scrollbalken angezeigt. Hab auch schon rausgefunden was es ist (weiß aber noch nicht warum).

Hab ich auch auf (1024*768)
und ich hab ABSOLUT keine Ahnung wäre nett wenn du ein bisschen achsehn könntest worans liegt.

Habs gefunden:

  
html, body {  
margin-left:1em;  
color:#000066;  
height:100%;  
width:100%; <--------  
text-align:center;  
}

Wozu width:100%? Der Body nimmt doch ohnhin immer die gesamte Breite ein. width:100% ist eingentlich nur bei Tabellen sinnvoll. Wenn du also display:table(-cell) verwenden würdest, währe es sinnvoll, aber so macht es nur Probleme.

Warum?
Darum: margin-left:1em;

Du willst also 100%+1em[1] Gesamtbreite.

Du solltest dir folgendes merken:
Ein Block nimmt
1. immer die volle Breite (abzüglich der Margins usw) ein
und ist 2. immer so hoch wie sein Inhalt
(was du in der aktuellen navi allerdings beachtet hast, bzw. du hast keine fixe Größenangabe festgelegt)

Das Problem ist jetzt das ich weder bei mir im IE6 noch im Firefox eins dieser Probleme habe. Außer das mti dem Scrollbalken.

Ja doch, das mit den Scrollbalken führte zu allen anderen Problemen. Ansonsten: Du solltest dein Fenster testweise auch mal etwas kleiner machen, um diverse Fehler zu sehen. Wir nutzen doch alle einen Firefox oder?

Einen schönen Mittwoch noch!

[1]Das W3C legt fest, dass alle Angaben zur Breiten- /Höhenangabe addiert werden. Ich finde diese Regel zwar besonders bei %-Angaben doof, aber was soll man machen, außer auf CSS3 zu warten.

[Phil]

Hi,

Habs gefunden:

html, body {
margin-left:1em;
color:#000066;
height:100%;
width:100%; <--------
text-align:center;
}

>   
  
\_DANKE\_!!!  
  
  

> > Das Problem ist jetzt das ich weder bei mir im IE6 noch im Firefox eins dieser Probleme habe. Außer das mti dem Scrollbalken.  
>   
> Ja doch, das mit den Scrollbalken führte zu allen anderen Problemen. Ansonsten: Du solltest dein Fenster testweise auch mal etwas kleiner machen, um diverse Fehler zu sehen. Wir nutzen doch alle einen Firefox oder?  
>   
> Einen schönen Mittwoch noch!  
  
Dir auch!  
  
Phil

[peter]

Hi,

Wozu width:100%? Der Body nimmt doch ohnhin immer die gesamte Breite ein. width:100% ist eingentlich nur bei Tabellen sinnvoll. Wenn du also display:table(-cell) verwenden würdest, währe es sinnvoll, aber so macht es nur Probleme.

Aber Vorsicht mit den "display:table"-Eigenschaften, das kann der IE noch nicht !

siehe:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Zitat:
"Netscape 4.0 und der Internet Explorer 4.0 interpretieren die Angabe display:none korrekt. Die übrigen Angaben werden von der 4er-Versionen der beiden Browser jedoch nur unvollständig oder noch gar nicht interpretiert. Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 6 noch nicht."

gruß
peter

[D.R.]

Hi,

Wozu width:100%? Der Body nimmt doch ohnhin immer die gesamte Breite ein. width:100% ist eingentlich nur bei Tabellen sinnvoll. Wenn du also display:table(-cell) verwenden würdest, währe es sinnvoll, aber so macht es nur Probleme.

Aber Vorsicht mit den "display:table"-Eigenschaften, das kann der IE noch nicht !

Was mir aber egal ist. Außerdem: "Dieser IE 6 wird sich in wenigen Sekunden selbst zerstören". Siehe dieses Forum. Warum sollte ich dann noch auf den IE 6 achten?

Das schöne an display:table(-cell) ist ja, dass man keinerlei zusätzliches Markup braucht. Für den IE kann man ja noch ein * html body {margin-top:10%} oder sowas einbauen. Mehr Arbeit möchte ich mir aber nicht machen.

siehe:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display

Ja, das weiß ich auch. Aber 1. s.oben und 2. ging es ja hier eher daran, WANN width:100% sinnvoll sei.

Einen schönen Donnerstag noch!

[Jonathan]

Ein paar spezielle Fragen:

• Flexibel?

Geht so...

• dezent und nicht zu bunt / halbwegs seriös ?

Es gibt einm paar unschöne Stellen, wie "dreidimensional angedeutete" Linien im sonst flachen Design, einer "header-Grafik", die recht schlecht in die Seite integriert ist (uneinheitliche Farben, große Abstände). Die hr id='zwischentrennX' kannst du IMHO einfach weglassen. Sonst ist es in Ordnung. Die Farben halte ich für in Ordnung, auch wenn man da viel mehr draus machen kann. Im übrigen denke ich, dass auch eine "farbenfrohe" seriös wirken kann. Es hängt auch viel von dem Layout, dem Schrift- und Text-Stil (sowohl von Aussehen/Schriftart/-größe als auch von Wortwahl und Satzbau her)

• Kontakt | Impressum Position gut gewählt oder eher schlecht?

In Ordnung.

• Copyright Position gut gewählt oder eher schlecht?

Unten unter der Seite fänd ich persönlich leichter zu finden und unauffälliger.

• ordentlicher Quelltext oder Hürdenlauf?

Du hast die ids vieler Elemente ziemlich schwachsinnig durchnummeriert. Wieso benutzt du keine Klassen?
Dann verwendest du teilweise die XML-Schreibweise <tag />, obwohl du als Doctype und Mimetyp HTML angibst. Außerdem hast du in der Nagigation und sonstwo massenhaft &nbsp;s verwendet. Das kann man besser lösen. Zudem sollte man aus der Navigation besser eine Liste machen.

Kritik, Änderungs/Verbesserungsvorschläge, weitere Ideen, Tipps ?
Her damit!

Siehe oben.

MfG Jonathan.

[Phil]

liger.

• ordentlicher Quelltext oder Hürdenlauf?
  Du hast die ids vieler Elemente ziemlich schwachsinnig durchnummeriert. Wieso benutzt du keine Klassen?

eigendl hatte ich über all die gleiche ID aber der W3 Validator wollte für jedes Element eine eigene ID.. ist halt Strict

Dann verwendest du teilweise die XML-Schreibweise <tag />, obwohl du als Doctype und Mimetyp HTML angibst.

Hatte zuerst html 1.0 Strict aber dann geändert in HTML und vergessen die / wegzumachen. Kommt aber jetzt.

Zudem sollte man aus der Navigation besser eine Liste machen.

Ich hab nicht hinbekommen das als Liste zu realiesieren ausserdem ist es in dem Fall viel mehr Aufwand!

mfg

Phil

[Jonathan]

eigendl hatte ich über all die gleiche ID aber der W3 Validator wollte für jedes Element eine eigene ID.. ist halt Strict

Gleiche id sollte man nie verwenden, egal ob strict oder sonstwas.
Eine id ist ja gerade der identifier, also der eindeutige Bezeichner pro Element. Mit klassen würde das viel besser gehen. Du gibst z.B. verschiedenen Elementen: class="hervorgehoben" und dann kannst du einfach im CSS z.B. schreiben „.hervorgehoben {color:red}“

MfG Jonathan

[Phil]

Danke.
Wusste ich eigendl. -.-
Hab ich jetzt auch geändert!

mfg

Phil

[at]

Hallo.

Zudem sollte man aus der Navigation besser eine Liste machen.

Ich hab nicht hinbekommen das als Liste zu realiesieren ausserdem ist es in dem Fall viel mehr Aufwand!

Dann lass dir helfen.
MfG, at

[MudGuard]

Hi,

Klicken -> http://lmg.byto.de/PHIL/TEST/index/index/index.php

Gleiches Ergebnis wie vor einer halben Stunde ...

cu,
Andreas

[Twilo]

Hallo,

Klicken -> http://lmg.byto.de/PHIL/TEST/index/index/index.php

Gleiches Ergebnis wie vor einer halben Stunde ...

ich mußte auch mehrmals probieren

mfg
Twilo

[Janine]

<a href="index.php">Home</a>&nbsp;&nbsp;&nbsp;&zwnj;&nbsp;&nbsp;&nbsp;

so etwas muss nicht sein...
den Abstand bekommt man auch mit margin hin

 <div id="clear"></div>  
 <hr id="trennlinie" />

1. das ID="trennlinie" ist hier überflüßig :)
2. den DIV Tag darüber kannst du dir auch sparen, "clearen" kannst du auch mit den hr Tag

Janine!

[derletztekick]

Hallo Phil,

ich kann mich nicht so recht anfreunden mit Deinem Layout. Schau Dir den Screenshot aus Opera mal an...

Ich habe trotz einer großen Auflösung (und maximalen Fenster) Scrollbalken. Was soll der grüne Bereich eigentlich mal werden rechts?

Mit freundlichem Gruß
Micha

[Phil]

Hallo

»»Screenshot aus Opera mal an...

Danke für den Screen.. komisch ô.o.. ich werd versuchen zu ändern sieht eigendl. wesentlich anders aus.

Ich habe trotz einer großen Auflösung (und maximalen Fenster) Scrollbalken.

Habe ich beseitigt!

Was soll der grüne Bereich eigentlich mal werden rechts?

Da kommt der Inhalt rein. Links die News.

Mit freundlichem Gruß

Phil

[Gunther]

Hi Phil,

zunächst einmal möchte ich feststellen, dass du dich zwischenzeitlich wohl sehr intensiv mit der Materie beschäftigt hast. Das Ergebnis ist ein echter "Quantensprung" im Vergleich zu deinem ersten Versuch (von gestern/ vorgestern?)! *RESPEKT*

Ein paar spezielle Fragen:

• Kontakt | Impressum Position gut gewählt oder eher schlecht?

IMHO schlecht. Der Header hat nicht die volle Seiten-/ Spaltenbreite und die beiden Links wirken, als würden sie nicht richtig dazugehören und als wären sie rechts über den (unsichtbaren) Seitenrand hinausgerutscht (möglicherweise eine Folge der Art der Positionierung).
Besser wäre es vielleicht, die Headergrafik auf die "volle" Seitenbreite auszudehnen und die beiden Links farblich hinterlegt oben rechts über die Grafik zu legen.

• Copyright Position gut gewählt oder eher schlecht?

IMHO schlecht. Wirkt auf den ersten Blick als wäre es ebenfalls ein Menülink. Zerstört das Erscheinungsbild des Menüs, und mal ehrlich: Wen interessiert das eigentlich (außer den Verfasser)? Ich würde so etwas immer im (bei dir fehlenden) Footer, bzw. am jeweiligen Seitenende möglichst klein platzieren.

Kritik, Änderungs/Verbesserungsvorschläge, weitere Ideen, Tipps ?
Her damit!

Layout & Design sind das Eine - Inhalte das Andere. Letztere vermisse ich bisher bei dir total. Auch das Thema/ der Inhalt einer Website kann (mit)entscheidend sein für das Layout & Design.

BTW: Irgendwie ist die Seite jetzt aber weder bündig an einem der Ränder, noch richtig zentriert -Absicht?

Gruß Gunther

[Phil]

Hi

zunächst einmal möchte ich feststellen, dass du dich zwischenzeitlich wohl sehr intensiv mit der Materie beschäftigt hast. Das Ergebnis ist ein echter "Quantensprung" im Vergleich zu deinem ersten Versuch (von gestern/ vorgestern?)! *RESPEKT*

Danke, ja das habe ich.

Kontakt, Imressum und Copyrght werden jetzt woanders positiobniert.

BTW: Irgendwie ist die Seite jetzt aber weder bündig an einem der Ränder, noch richtig zentriert -Absicht?

Die Seite hat immer einen festen Abstand nach oben und Links udn ist nciht zentriert. Absicht!
Zum Inhalt. Der komtm bei mir imemr GANZ zum Schluss wen das Layout&Design passt.

Gruß

Phil

[at]

Hallo.

Kontakt, Imressum und Copyrght werden jetzt woanders positiobniert.

Für zumindest zwei davon wäre der Papierkorb der bestgeeignete Ort.
MfG, at

[Powl]

Hi Phil,

zunächst einmal möchte ich feststellen, dass du dich zwischenzeitlich wohl sehr intensiv mit der Materie beschäftigt hast. Das Ergebnis ist ein echter "Quantensprung" im Vergleich zu deinem ersten Versuch (von gestern/ vorgestern?)! *RESPEKT*

Dem kann ich mich nur anschließen, man merkt, daß die Ratschläge aus dem Forum bei Dir auf fruchtbaren Boden fallen.
Weiter so!
Ich kann Deine Seite leider nicht mehr laden. Aber es sah nach einem Styleswitcher aus. Bei "A List Apart" (sehr gute Seite übrigens) findet man unter "style php" auch einen Artikel, der Dich interessieren könnte. Idee ist, einen cookie zu setzen, der beim nächsten Seitenaufruf wieder den letztmalig gewählten Style lädt. Ginge auch mit JS. Vielleicht hast Du so etwas schon implementiert oder möchtest das tun? Muß man aber auch nicht.
Wenn Du einen Syleswitscher mit einem Formular realisierst, dann lies auch mal in SELFHTML über die CSS-Möglichkeiten für Formularelemente nach. Das kann man auch schön ins Gesamtbild integrieren - natürlich ohne die Funktionalität für den Benutzer zu verschleiern.

Das mit dem Quantensprung sehe ich aber ganz genau so! Viel Erfolg weiterhin.

netten Tag
^da Powl

[Phil]

Hi Powl,

zunächst einmal möchte ich feststellen, dass du dich zwischenzeitlich wohl sehr intensiv mit der Materie beschäftigt hast. Das Ergebnis ist ein echter "Quantensprung" im Vergleich zu deinem ersten Versuch (von gestern/ vorgestern?)! *RESPEKT*
Dem kann ich mich nur anschließen, man merkt, daß die Ratschläge aus dem Forum bei Dir auf fruchtbaren Boden fallen.
Weiter so!

Danke.

Ich kann Deine Seite leider nicht mehr laden.

Das liegt an dem schei** Server. Ich brauch einen kostenlosen Server mit PHP ohne Werbung mit FTP. Ich weiß das es gute Server für meine Bedürfnisse gibt die nur 1€ kosten ich werd mir demnächst denke ich mal einen anlegen.
Ich hab die Page jetzt mal bei ohost hochgeladen auch wennse mit Werbung ist.

http://philz.ph.ohost.de/index/

Aber es sah nach einem Styleswitcher aus. Bei "A List Apart" (sehr gute Seite übrigens) findet man unter "style php" auch einen Artikel, der Dich interessieren könnte. Idee ist, einen cookie zu setzen, der beim nächsten Seitenaufruf wieder den letztmalig gewählten Style lädt. Ginge auch mit JS. Vielleicht hast Du so etwas schon implementiert oder möchtest das tun?

GENAU das hab ich vor! Ich bin gerade darbei das zu realisieren. Danke für den Link. =)

Muß man aber auch nicht.

Wenn Du einen Syleswitscher mit einem Formular realisierst, dann lies auch mal in SELFHTML über die CSS-Möglichkeiten für Formularelemente nach. Das kann man auch schön ins Gesamtbild integrieren - natürlich ohne die Funktionalität für den Benutzer zu verschleiern.

Das mit dem Quantensprung sehe ich aber ganz genau so! Viel Erfolg weiterhin.
netten Tag

Danke. Dir auch.

Phil

[Ashura]

Hallo Phil.

Klicken -> http://lmg.byto.de/PHIL/TEST/index/index/index.php

Bitte eine erreichbare URI verlinken, danke.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Phil]

So, ich habe mal einiges geändert!
1. Die horizontalen Scrollbalken sind nun weg.
2. Impressum, Kontakt sowie Coyright sind nun im erstellten Footer.
3. Das Linien Problem im opera wurde behoben.

Getestet wurde alles mit dem
Mozilla/5.0, Gecko/20060508, Firefox/1.5.0.4
Opera9 und IE6

Habt ihr sonstige Kritik oder ähnliches?
Guckts euch bitte alle noch einmal an!

mfg

Phil

[Phil]

Ihr könnt jetzt im Rechten Teil das komplette Design ändern indem ihr zwischen
Style 1 (den ihr bereits kennt)
und
Style 2(in grau/weiß/schwarz/blau/ a:hover:grünton)
wählen.

Sagt mir was euch besser gefälllt!

mfg

Phil

[wahsaga]

hi,

Ihr könnt jetzt im Rechten Teil das komplette Design ändern indem ihr zwischen
Style 1 (den ihr bereits kennt)
und
Style 2(in grau/weiß/schwarz/blau/ a:hover:grünton)
wählen.

Sagt mir was euch besser gefälllt!

Mir gefällt die Version am besten, wo die Optik zu den Inhalten passt.

scnr,
wahsaga

[at]

Hallo.

Mir gefällt die Version am besten, wo die Optik zu den Inhalten passt.

Dazu musst du nur CSS und die Anzeige von Bildern abschalten. Das Ergebnis muss den Vergleich auch nicht scheuen.
MfG, at

[B-ellanna]

Hi Phil,

2. Impressum, Kontakt sowie Coyright sind nun im erstellten Footer.

Da gehören sie ja auch hin, nur kann ich sie wegen des schlechten Kontrastes im Style 1 nicht lesen. Ich mußte erst markieren um den Text zu finden.

Ansonsten viel Erfolg weiterhin.
B-ellanna

[Manuel B.]

Ich grüsse den Cosmos,

Habt ihr sonstige Kritik oder ähnliches?

Du solltest das W3C-Logo entfernen, solange deine Seite nicht valide ist.

Möge das "Self" mit euch sein

[at]

Hallo.

Kritik, Änderungs/Verbesserungsvorschläge, weitere Ideen, Tipps ?

Veröffentliche unterschiedliche Stände unter unterschiedlichen Adressen. Derzeit veränderst du wahrscheinlich sehr viel, denn was ich unter der von dir angegebenen Adresse finde, entspricht weder dem im Laufe der Diskussion referenzierten Bildschirmfoto noch einem Zustand, den man guten Gewissens als brauchbar bezeichnen könnte. Ach ja, und nutze bitte zumindest Blindtexte, damit man sich ein besseres Bild von der späteren Darstellung machen kann.
Und weiterhin viel Spaß.
MfG, at