Text zerschießt Design

Computer: Software & Programmierung HTML & CSS
#1

Hallo!

Ich bastel zur Zeit an meiner Site. Solange der Text nicht länger als eine Bildschirmseite lang ist, sind Logo und Menü dort, wo sie sein sollen (siehe http://membres.lycos.fr/carstudium/index.htm), sobald er aber länger ist, werden diese nach unten gezogen (siehe http://membres.lycos.fr/carstudium/fussballbuecher.htm). Woran liegt das und was kann ich tun? Bei den Bildern habe ich ein ähnliches Problem, da sich top überhaupt nicht auswirkt. Auch der Text auf der Index-Seite könnte ruhig oben anfangen…

MfG und danke!
Car

#2

Hallo!

Ich bastel zur Zeit an meiner Site. Solange der Text nicht
länger als eine Bildschirmseite lang ist, sind Logo und Menü
dort, wo sie sein sollen (siehe
http://membres.lycos.fr/carstudium/index.htm), sobald er aber
länger ist, werden diese nach unten gezogen (siehe
http://membres.lycos.fr/carstudium/fussballbuecher.htm). Woran
liegt das und was kann ich tun? Bei den Bildern habe ich ein
ähnliches Problem, da sich top überhaupt nicht auswirkt. Auch
der Text auf der Index-Seite könnte ruhig oben anfangen…

Was genau hast du denn aus probiert?
Das hier sollte doch helfen:

 ...

bzw.


    
    
     Hallo und herzlich willkommen! 
     ...
    
    LG, piranja
#3

Hallo piranja!

Was genau hast du denn aus probiert?

Mit align statt valign, das war’s. Danke!

MfG
Car

#4

(OT) Re: Text zerschießt Design

Ich bastel zur Zeit an meiner Site.

Gut, solange du noch bastelst kann man es vielleicht retten. BITTE ändere die Farben. dieses Braun auf Blau wird mit Schriftglättung zu reinem Kopfweh im HTML-Format. Zur Zeit ist der Kontrast zwischen Hintergrund und Text sehr gering (beides dunkel), und die Farben passen nicht wirklich zusammen. Mach probeweise mal die Schrift heller und/oder den Hintergrund dunkler.

#5

War Orange, ist mir aber auch schon aufgefallen
(bzw. meinen armen Testopfern *g*). Ich habe es jetzt auf Gelb geändert und es sieht schon deutlich besser aus.

MfG
Car

[Bei dieser Antwort wurde das Vollzitat nachträglich automatisiert entfernt]

#6

Hallo nochmal!

Jetzt sieht es so aus, gibt es noch irgendwelche Verbesserungsvorschläge?

http://www.stud.fh-hannover.de/~frankes/

Folgendes muss erfüllt sein:
Konzept mit Oberthema, schlüssig aufbereitet für definierte Zielgruppe, einheitliches Erscheinungsbild
mindestens 10 Seiten bzw. Unterseiten
fünf unterschiedliche Seitentypen
alle Seiten als Tabelle konzipiert
jede Seite sauber dokumentiert : Ansprechpartner (E‑Mail‑Link), Titel, Datum, Hauptmenü, Meta‑Tags
Kommentare im HTML‑Code
Anker, interne/externe Verknüpfung, Bild‑Link
interaktives Element (Formular, Map, CGI‑Modul,…)
Style-Sheets

Konzept mit Oberthema, schlüssig aufbereitet für eine definierte Zielgruppe, einheitliches Erscheinungsbild
in HTML 4 bzw. XHTML (in den Metadaten angeben!)
mindestens 10 Seiten (bzw. Unterseiten)
davon mindestens 5 unterschiedliche Seitentypen (Aufbau und Gestaltung)
alle Seiten als Tabelle konzipiert (keine Frames), gut zugängliches Menü
jede Seite sauber dokumentiert :
Meta-Daten im Header, DOCTYPE-Zeile, aussagekräftige Seitentitel
auf jeder Seite Ansprechpartner (E‑Mail‑Link), Datum der Aktualisierung
gliedernde Kommentare im HTML‑Code
mindestens je ein: Anker, interne/externe Verknüpfung, verlinkte Bilder
Mindestens ein interaktives Element (Formular, Map, dynam. Buttons…)
Einsatz von Style-Sheet(CSS)-Befehlen (im Header oder ausgelagert)

Habe ich da was übersehen?

MfG
Car

#7

Hi Car,

Kommentare im HTML‑Code
Anker, interne/externe Verknüpfung, Bild‑Link
interaktives Element (Formular, Map, CGI‑Modul,…)
Style-Sheets

Bei den Pseudoformaten sollte man auf die Reihenfolge achten:
:link, :visited, :hover, :active
http://de.selfhtml.org/css/eigenschaften/pseudoforma…
(ich weiß jetzt nicht genau, ob es an der falschen Reihenfolge liegt, oder daran, das :link &:visited nich definiert ist, aber der hover Effekt funktioniert bei Mozilla/Opera nur bei den schon besuchten Links)

in HTML 4 bzw. XHTML (in den Metadaten angeben!)

Du könntest die einzelnen Seiten hier nochmal überprüfen lassen:
http://validator.w3.org/
(bei den Bildern fehlen z.T. die alt="" Attribute und bei der tabelle hast du hborder geschrieben, statt border)

Einsatz von Style-Sheet(CSS)-Befehlen (im Header oder
ausgelagert)

Ich weiß jetzt nicht, wie umfangreich das sein soll, aber du könntest auch noch weitere Style Sheet Befehle Einsetzen z.B.
statt --> und in der css Datei:
h1 {text-align:center}, für die Hintergrundfarbe, für die Schriftgröße… dann könntest du imho auch einen anderen DOCTYPE verwenden
http://carsten-protsch.de/zwischennetz/doctype/einle…

Zur Farbauswahl find ich: http://www.knorrpage.de/colormatch.html ganz nützlich (vorallem auch die Links „five other great ones:“)

Gruß

Sebastian

1 Like
#8

Hallo nochmal!

Hi,

Jetzt sieht es so aus, gibt es noch irgendwelche
Verbesserungsvorschläge?

http://www.stud.fh-hannover.de/~frankes/

Args! Ich bin blind! Sorry, aber blau, gelb und orange… ein Freund hat mal gesagt: „Serioese Seiten haben einen weiszen Hintergrund haben.“ Ich persoenlich mag dann auch noch eher sparsamen Einsatz von Farben: weiszer Hintergrund, schwarze Schrift und noch ein paar Verzierungen in einer Farbe bzw. Nuancen davon. Aber was versteh ich schon davon. YMMV.

alle Seiten als Tabelle konzipiert

Ich werd im Leben nie begreifen, warum Tabellen als gestalterisches Mittel miszbraucht werden. Viel schlimmer noch, dasz es hier offenbar sogar verlangt wird. Und dadurch, dasz die rechten Zellen die Hoehe andern huepft links die Navigation rum (hier: Mozilla).

Ansonsten: ich kann es auf den Tod nicht leiden, wenn Leute an meiner GUI rumfummeln. Ich gebe Dir mein browser-Fenster, darin darfst Du machen was Du willst. Aber mein mousecursor gehoert mir!

Alles meine persoenlichen Meinungen,
Gruss vom Frank

#9

Hallo Sebastian!

(ich weiß jetzt nicht genau, ob es an der falschen Reihenfolge
liegt, oder daran, das :link &:visited nich definiert ist,
aber der hover Effekt funktioniert bei Mozilla/Opera nur bei
den schon besuchten Links)

Doch, das war’s. Das Problem ist mir zwar aufgefallen, doch wusste ich nicht, woran es lag. Jetzt klappt’s endlich auf mit Mozilla. Die berühmte Toleranz des Internet Explorers…

in HTML 4 bzw. XHTML (in den Metadaten angeben!)

Du könntest die einzelnen Seiten hier nochmal überprüfen
lassen:
http://validator.w3.org/
(bei den Bildern fehlen z.T. die alt="" Attribute und bei der
tabelle hast du hborder geschrieben, statt border)

Ist jetzt fehlerfrei.

Ich weiß jetzt nicht, wie umfangreich das sein soll, aber du
könntest auch noch weitere Style Sheet Befehle Einsetzen z.B.
statt -->
und in der css Datei:
h1 {text-align:center}, für die Hintergrundfarbe, für die
Schriftgröße… dann könntest du imho auch einen anderen
DOCTYPE verwenden
http://carsten-protsch.de/zwischennetz/doctype/einle…

Mal gucken, so genau sind wir auf den DOCTYPE nicht eingangen, schaden kann es aber sicher nicht.

Danke!

MfG
Car

#10

Hallo Frank!

Args! Ich bin blind! Sorry, aber blau, gelb und orange…
ein Freund hat mal gesagt: „Serioese Seiten haben einen
weiszen Hintergrund haben.“ Ich persoenlich mag dann auch
noch eher sparsamen Einsatz von Farben: weiszer Hintergrund,
schwarze Schrift und noch ein paar Verzierungen in einer Farbe
bzw. Nuancen davon. Aber was versteh ich schon davon. YMMV.

Ist sicherlich Geschmackssache. Ich finde, dass farbige Seiten optisch mehr hermachen. Ich hatte die Vorgängerversion mit weißem Hintergrund und schwarzer Schrift und sonderlich gut sah es nicht aus.

alle Seiten als Tabelle konzipiert

Ich werd im Leben nie begreifen, warum Tabellen als
gestalterisches Mittel miszbraucht werden. Viel schlimmer
noch, dasz es hier offenbar sogar verlangt wird. Und dadurch,
dasz die rechten Zellen die Hoehe andern huepft links die
Navigation rum (hier: Mozilla).

Was würdest du denn verwenden? Ich finde schon, dass Tabellen gegenüber Frames (die wir sowieso nicht verwenden dürfen) Vorteile haben.

Ansonsten: ich kann es auf den Tod nicht leiden, wenn Leute an
meiner GUI rumfummeln. Ich gebe Dir mein browser-Fenster,
darin darfst Du machen was Du willst. Aber mein mousecursor
gehoert mir!

Ist verständlich, ging aber auch wieder ums Design.

MfG
Car

#11

Hallo Frank!

Hi,

Ist sicherlich Geschmackssache.

Ja. Genauso, wie meine Vorliebe fuer serifenlose Fonts, zumindest am Bildschirm.

Ich finde, dass farbige Seiten optisch mehr hermachen. Ich hatte
die Vorgängerversion mit weißem Hintergrund und schwarzer
Schrift und sonderlich gut sah es nicht aus.

Wie gesagt, ich mag das so (vielleicht hab ich zuviel vom W-W-W gesehen). Gegen Farben ist nichts einzuwenden, aber etwas schlichter vielleicht.

[Tabellen als gestalterisches Mittel miszbraucht]

Was würdest du denn verwenden? Ich finde schon, dass Tabellen
gegenüber Frames (die wir sowieso nicht verwenden dürfen)
Vorteile haben.

Das stimmt: frames sind noch haeszlicher. Ich persoenlich mag ja divs und wuerde die Navigation in ein zwei verschachtelten Listen und den Inhalt in ein als normaler Absatz setzen. Also etwa so: http://der-frank.org/tmp/car.html

Aber ich hab keine grosze Ahnung davon, mach wie Du denkst.

Gruss vom Frank.

#12

Das stimmt: frames sind noch haeszlicher. Ich persoenlich mag
ja divs

Mit divs habe ich bislang überhaupt nicht gearbeitet. Da wir sie auch nicht verwenden dürfen, kommt es jetzt sowieso nicht in Frage, aber für andere Sachen werde ich es mir mal angucken.

MfG
Car