Homepage mit Kästchen

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

ich möchte für eine Homepage eine Startseite bauen, die etwa so aussieht:
http://www.klicktipps.de/test/Kaestchen.pdf

Die Kästchen sollen „unten-bündig“ stehen; in jedes Kästchen soll noch ein Text - horizontal und vertikal zentriert.

Nicht nur die Schrift im Kästchen, sondern möglichst das ganze Kästchen sollen als Link dienen.

Ich würde das Ganze gene mit CSS änderungsfreundlich realisieren, aber das übersteigt meine CSS-Fähigkeiten. *seufz*

Könnt Ihr mir verraten wie so was zu realisieren ist?

Schöne Grüße,
JoKu

#2

Schon mal dran gedacht, das ganze über ne Tabelle zu realisieren? Das wäre zumindest mein erster Gedanke gewesen

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

#3

Schon mal dran gedacht, das ganze über ne Tabelle zu
realisieren? Das wäre zumindest mein erster Gedanke gewesen

ja, klar habe daran gedacht. Damit hätte ich es auch relativ bald realisiert.
Aber ich will von der Tabllitis weg.
und mehr zu CSS.

Schöne Grüße,
JoKu

#4

Hallo,

ich möchte für eine Homepage eine Startseite bauen, die etwa
so aussieht:
http://www.klicktipps.de/test/Kaestchen.pdf

Die Kästchen sollen „unten-bündig“ stehen; in jedes Kästchen
soll noch ein Text - horizontal und vertikal zentriert.

Hier http://de.selfhtml.org/css/eigenschaften/positionier… ist das alles ziemlich ausführlich beschrieben. Sollte eigentlich nicht so schwer sein.

Cheers, Felix (der gerade selbst versucht, solche Sachen zu lernen)

#5

… ist relativ einfach. Guck mal hier:

http://www.walderdorff.org/test070928/boxlinkstest/b…

(die Farben sollen nichts repräsentieren :wink: )

Cheers, Felix

#6

Danke schon mal für Dein Engagement!

Hier http://de.selfhtml.org/css/eigenschaften/positionier…
ist das alles ziemlich ausführlich beschrieben.
Sollte eigentlich nicht so schwer sein.

selfhtml kenne ich recht gut, gucke ich auch immer als erstes rein;
aber bei dieser Sache komme ich allein damit nicht weiter; - sonst würde ich nicht hier posten.

… ist relativ einfach. Guck mal hier:
http://www.walderdorff.org/test070928/boxlinkstest/b…

sieht schon einigermaßen gut aus, zumindest im Netscape.
Bei IE (und den nutzen halt ca. 60% der Leuts *seufz*) ist aber alles verschoben.
Die Säulen mit den Links sind dort nicht mehr „unten-bündig“.

Die Kästchen bräuchte ich außerdem exakt quadratisch. Das werden sie wohl, wenn in height und width der gleiche em-Wert steht.

Gruß JoKu

#7

… ist relativ einfach. Guck mal hier:
http://www.walderdorff.org/test070928/boxlinkstest/b…

Kennst Du den Unterschied zwischen „id“ und „class“?
Dein Source ist ungültig, weil mehrere Elemente die selbe id haben, obwohl ids in einem Dokument eindeutig sein müssen.

Gruß,
-Efchen

#8

Hallo joku,

Danke schon mal für Dein Engagement!

na ja, ist halt was zum Üben :smile:

… ist relativ einfach. Guck mal hier:
http://www.walderdorff.org/test070928/boxlinkstest/b…

sieht schon einigermaßen gut aus, zumindest im Netscape.
Bei IE (und den nutzen halt ca. 60% der Leuts *seufz*) ist
aber alles verschoben.
Die Säulen mit den Links sind dort nicht mehr „unten-bündig“.

wenn du in den Sourcecode guckst, sieht du, dass ich da Boxes und Text mische. Das sollte man wohl nicht tun, weil dann die Darstellung je nach Browser unterschiedlich ist.

Die Kästchen bräuchte ich außerdem exakt quadratisch. Das
werden sie wohl, wenn in height und width der gleiche em-Wert
steht.

Darauf würde ich mich nicht verlassen. Wie ich das verstehe, bezieht sich der em-Wert auf den verwendeten Font. Vorteil: Wenn der Benutzer die Fontgröße ändert, ändert sich die Boxgröße auch. Nachteil: Je nach Font ist die Relation vertikal:horizontal unterschiedlich. Alternative wäre die Verwendung eines quadratischen Hintergrundbildes. (vielleicht versuche ich das auch mal)

Außerdem - wie efchen anmerkt, ist die Verwendung von div-ids, so wie ich sie gemacht habe, gemäß w3c absolut out.

Cheers, Felix

#9

Hallo Efchen,

… ist relativ einfach. Guck mal hier:
http://www.walderdorff.org/test070928/boxlinkstest/b…

Kennst Du den Unterschied zwischen „id“ und „class“?
Dein Source ist ungültig, weil mehrere Elemente die selbe id
haben, obwohl ids in einem Dokument eindeutig sein müssen.

Da hast du Recht - habe ich über den Validator auch gesehen. Wie gesagt, ich bin ja einer, der probiert. Aber: Ich weiß zwar, dass es einen Unterschied zwischen id und class gibt, habe ihn aber nicht verstanden. Und mein Beispiel funktioniert nicht, wenn ich class statt id verwende. Hast du da einen Link, der das erklärt?

Cheers, Felix

#10

Kennst Du den Unterschied zwischen „id“ und „class“?

Da hast du Recht - habe ich über den Validator auch gesehen.
mein Beispiel funktioniert
nicht, wenn ich class statt id verwende.

Weil Du IDs im Stylesheet ein „#“ voran stellst und Klassen einen „.“

mit #Header { … }
mit .Numbers { … }

Hast du da einen
Link, der das erklärt?

Mein Kopf ist noch nicht verlinkt, aber das steht sicher auch alles bei SelfHTML.

-)

-Efchen

#11

Außerdem - wie efchen anmerkt, ist die Verwendung von div-ids,
so wie ich sie gemacht habe, gemäß w3c absolut out.

So wie Du IDs verwendet hast, ist es nicht „out“, sondern schlichtweg falsch, weil IDs eben nur einmal vorkommen, wie das mit IDs nunmal so ist, denn sonst würden sie nichts identifizieren :smile:

Was die divs angeht…da kann man viel erzählen zum Thema „Layout mit divs“, was ungefähr so blödsinnig ist, wie „Layout mit Tabellen“, aber ohne weiteren Inhalt kann man Dir das nicht ankreiden.

Gruß,
-Efchen

#12

Hallo,

ich möchte für eine Homepage eine Startseite bauen, die etwa
so aussieht:
http://www.klicktipps.de/test/Kaestchen.pdf

Sorry, aber Dateien lade ich grundsätzlich nicht runter, wenn ich nicht genau weiß, was ich da runter lade. Könnte ja mit einem Virus oder sonstwas infiziert sein.

Ich würde das Ganze gene mit CSS änderungsfreundlich
realisieren, aber das übersteigt meine CSS-Fähigkeiten.
*seufz*

Da hilft nur lernen. Selbst wenn dir hier jemand eine Lösung vorkaut, wirst Du selbst damit nicht zurecht kommen. Wie denn auch?!

folgende Seiten sind zu empfehlen:

http://de.selfhtml.org/css/index.htm

http://www.w3.org/Style/CSS/

#13

Ich weiß
zwar, dass es einen Unterschied zwischen id und class gibt,
habe ihn aber nicht verstanden.

ID = Eine bestimmte Person, die es nur ein Mal gibt

CLASS = Mehrere Personen die einer Gruppe (Klasse) angehören.

Um das mal bildlich zu erklären.

Im CSS kannst Du also mit ID nur einen bestimmten HTML-Tag formatieren.

Mit CLASS formatierst du gleich eine ganze Gruppe von Tags.

Gruß Marcus

#14

Da hilft nur lernen.

stimmt

Selbst wenn dir hier jemand eine Lösung
vorkaut, wirst Du selbst damit nicht zurecht kommen.

falsch

Das ist Lerntyp-abhängig.
Ich bin inzwischen über 50. Ich schaue gerne in Lehrbücher und habe daraus auch viel gelernt.
Aber ich brauche dazu auch Beispiele. Und habe gerade aus Beispielen viel gelernt. Das was - mir neu in so einem Beispiel vorkommt - wird dann wieder durch Theorie ergänzt.

Wenn mir diese bekannten Links bei dem Problem wirklich helfen würden, häte ich hier doch nicht gepostet.

Es geht für mich im Moment nicht um „lern halt mal!“, sondern ich brauche bei diesem konkreten Problem (ein Haufen Kästchen gestuft und nebeneinander und unten bündig) einfach nur mal Hilfe.

JK

#15

Bei aller liebe zu unseren mega CSS lern,
ohne CSS genau zu kennen, sollte man/frau bei tabellen bleiben.

  1. Auch mit CSS muss man wider für alle Browser testen, und meist ist es sogar noch schlimmer die Fehler auszumerzen.
  2. Auch in CSS gibt es tabellen elemente. Das eine schliesst also das andere nicht aus .
  3. Willst du die seite diesen Monat noch fertig bekommen, dann mach erstmal mit tabelle, danach mit DIV und CSS die die divs als tabelle formatieren und ganz am ande nur DIV und CSS ohne jegliche tabellen systeme, obwohl das eigentlich uninterressant ist, aber hier viele sonst wieder ihren muggefug anworten.

Also erstmal so wie du kannst, dann wie du es gerne hättest und danach so wie es sinnvoll ist :smile:

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

#16

Hallo JoKu,

ich möchte für eine Homepage eine Startseite bauen, die etwa
so aussieht:
http://www.klicktipps.de/test/Kaestchen.pdf

Könnt Ihr mir verraten wie so was zu realisieren ist?

z. B. so: http://mine42.de/test/test.htm

Schöne Grüße
Yasmin

#17

hmm schon recht gut, aber schau dir das mal im FireFox an , das sieht dann ganz anders aus :smile:

Ich hätte ne version für firefox die dann widerum im IE schei… aussieht.

Hier mal die bilders

links IE , rechts FF
http://global-eworld-consulting.de/help/IEorFF/testb…

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

#18

.

#19

.

#20

Bei aller liebe zu unseren mega CSS lern,
ohne CSS genau zu kennen, sollte man/frau bei tabellen
bleiben.

Nein, da sollte man/frau sich lieber schnell ausführlich mit CSS und vor allem mit HTML beschäftigen! Zum Wohle seiner Besucher und sich selbst und zum Wohl des WWW.

  1. Auch mit CSS muss man wider für alle Browser testen, und
    meist ist es sogar noch schlimmer die Fehler auszumerzen.

Man muss immer möglichst viele Browser testen.

  1. Auch in CSS gibt es tabellen elemente. Das eine schliesst
    also das andere nicht aus .

Aber CSS-Layout schließt Tabellenlayout aus. Darum geht es ja wohl.

  1. Willst du die seite diesen Monat noch fertig bekommen, dann
    mach erstmal mit tabelle,

Wenn man was vernünftig machen will, nimmt man sich halt lieber etwas Zeit.

danach mit DIV und CSS

Aua! Was hat das div hier zu suchen? layout mit divs ist genauso großer Quatsch wie Layout mit Tabellen.

nur DIV und CSS ohne
jegliche tabellen systeme, obwohl das eigentlich
uninterressant ist, aber hier viele sonst wieder ihren
muggefug anworten.

„CSS und div“ ist „muggefug“

Also erstmal so wie du kannst, dann wie du es gerne hättest
und danach so wie es sinnvoll ist :smile:

Warum soll man erstmal Mist lernen, nur um erst danach richtig zu lernen? Das ist doch nicht sinnvoll!

*kopfschüttel*