ich hab mich verliebt...in CSS (hier meine HP)

QuickSilverEX

Mitglied
Thread Starter
Registriert
13.06.2004
Beiträge
770
Hallo,
hatte Anfang letzter Woche die Idee mal ne Page zu bauen.
Eigentlich wollte ich nur irgend eine Page gestalten, Ihnalt war mir und ist mir immer noch nicht so ganz klar =)
in HTML hatte ich geringe Grunderfahrung, allerdings wusste ich nix von CSS und was es sonst noch so gibt.
Während ich mich aber durch div. CSS Tutorials arbeitete, merkte ich was für unglaubliche Möglichkeiten CSS bietet.

Meine Hauptpage habe ich soweit fertig denke ich (noch nen paar kleinigkeiten, ma gucken)
Links, sowohl oben wie auch rechts funzen noch net...

Könnt ja mal schreiben was ihr davon haltet bis jetzt.


1.Vielleicht kann mir auch einer nen bisschen Helfen mit der CSS-Geschichte?
ich kann z.B. in der .css Datei nur Überschrifen also h1 {blublublua} h2{usw.} ... bestimmen. Will ich aber Eigenschaften für Textabsätze festlegen p{bulbulbu} wird dieser in der html Datei nicht wargenommen

2.Die Page habe ich durch einzelne Boxen gestaltet, also in der CSS datei Position und Größe der Boxen festgelegt und dann in der HTML Datei Bild und Text eingefügt. Ist das der richtige Weg?

3.Auf der Titelseite sind die "<<" und ">>" Zeichen unter und über dem Schriftzug "Page will open soon" obwohl ich sie in der HTML Datei in eine Zeile geschrieben habe.

vielen Dank schonmal

edit: Link www.geocities.com/invisible_Force2000 jetzt funzt er auch wieder
 
Zuletzt bearbeitet:

Faser

Aktives Mitglied
Registriert
20.08.2003
Beiträge
1.024
QuickSilverEX schrieb:
1.Vielleicht kann mir auch einer nen bisschen Helfen mit der CSS-Geschichte?
ich kann z.B. in der .css Datei nur Überschrifen also h1 {blublublua} h2{usw.} ... bestimmen. Will ich aber Eigenschaften für Textabsätze festlegen p{bulbulbu} wird dieser in der html Datei nicht wargenommen
Müsste aber eigentlich alles so klappen. Hast du mal geguckt, ob du auch nach jeder Definition ein Semikolon gemacht hast?

QuickSilverEX schrieb:
2.Die Page habe ich durch einzelne Boxen gestaltet, also in der CSS datei Position und Größe der Boxen festgelegt und dann in der HTML Datei Bild und Text eingefügt. Ist das der richtige Weg?
Genau so sollte es sein ;-) Wo du schon so schön Inhalt und Layout getrennt hast, guck doch mal, wie deine Seite jetzt ohne CSS aussieht und ob sie so gut lesbar ist. Dann wäre es nämlich perfekt und würde sogar in Textbrowsern gut zu betrachten sein.
QuickSilverEX schrieb:
3.Auf der Titelseite sind die "<<" und ">>" Zeichen unter und über dem Schriftzug "Page will open soon" obwohl ich sie in der HTML Datei in eine Zeile geschrieben habe.
Hast du die "<<" und ">>" denn im CSS irgendwie definiert? Z.B. als Block-Element (display: block;)?

Link funktioniert übrigens immer noch nicht ;-)
 

QuickSilverEX

Mitglied
Thread Starter
Registriert
13.06.2004
Beiträge
770
...das Begreif ich nicht...

"The web site you are trying to access has exceeded its allocated data transfer. Visit our help area for more information.

Access to this site will be restored within an hour. Please try again later.
http://www.geocities.com/invisible_force2000 "

Sieht wohl so aus als ob der Traffic überschirtten wurde.
Mal sehen was in einer Stunde passiert
 

cla

Aktives Mitglied
Registriert
24.10.2003
Beiträge
2.965
Bei mir funktioniert es nur unter Safari, dann komme ich auf ein überflüssiges Into ohne Sinn, das nach einiger Zeit auf die Hauptseite weiterleitet (der Überspringen-Button funzt auch nicht). Auf der Hauptseite wiederrum kriege ich eine Seite zu sehen, die noch nichtmal ansatzweise funktionsfähig ist (keine funktionierenden Links, und fehlende Bilder)
Ausserdem mag ich keine Internetseiten, die meinen müssen, meinen Monitor nur zu einem winzigen Teil ausnützen zu müssen.

Die Nichterreichbarkeit der Seite ist bei dir wohl in der unterschiedlichen Groß/Kleinschreibung deiner Dateinamen/Verzeichnisnamen zu suchen. Beim Mac gilt zwar Case-Insensitiv...bei Servern (insbs. Unix-Rechnern) spielt das aber sehr wohl eine Rolle.

Hierüber könnte es gehen (unter Umgehung des Intros): http://www.geocities.com/invisible_force2000/QuickSilverEX/Navi_neu/Navigation_neu.html

cla

P.S. Vom Design her find ichs Ansprechend (nicht, das ich hier jetzt zu negativ rüberkomme)

:Edit Sorry...das Intro ist ja gar kein Flash sondern MP3...da hab ich auf die schnelle Falsch geraten.
 
Zuletzt bearbeitet:

QuickSilverEX

Mitglied
Thread Starter
Registriert
13.06.2004
Beiträge
770
ich denke eine Stunde muss man wohl noch warten, damit es wieder funzt.

@cla bis jetzt ist auch nur die Hauptpage (nach dem "Intro") fertig.
Sowie du es beschreibst zeigt er dir wohl nicht alles an (ich denke mal wegen 'The web site you are trying to access has exceeded its allocated data transfer.')

Manchmal zeigt er mir die page jetzt, aber dann ohne Bilder und ohne CSS File.
Mal sehen wie es in ner Stunde aussieht
 

cla

Aktives Mitglied
Registriert
24.10.2003
Beiträge
2.965
QuickSilverEX schrieb:
3.Auf der Titelseite sind die "<<" und ">>" Zeichen unter und über dem Schriftzug "Page will open soon" obwohl ich sie in der HTML Datei in eine Zeile geschrieben habe.

Liegt an deiner Plazierung der Überschriften-Tags. Alles was ausserhalb dieser steht, gehört nicht mehr zur Überschrift, und wird eine Zeile hoch oder runtergesetzt. Ausserdem hast du noch nen Tag-Dreh drin. So sollte es klappen:

Code:
<div class="box2"><h1><center><span style="color:royalblue"><<</span> Page will open soon <span style="color:royalblue">>></span></center></h1></div>
cla

P.S. Auch bei mir geht die Seite jetzt nicht mehr. Mein Proxy hatte die Seite etwas länger zwischengecached.
 

QuickSilverEX

Mitglied
Thread Starter
Registriert
13.06.2004
Beiträge
770
Also die Page funzt jetzt, wäre dankbar für nen paar comments.

Hätte auch direkt nochma ne Frage:

meine komplette Page ist mehr oder weniger "festgenagelt".
Wenn man das Fenster resized bleibt der content wo er is.

Wie kann ich das denn jetzt anstellen, das alles an seinen Positionen bleibt, nur das wenn man jetzt das fenster resized sich die komplette Page mitbewegt und den Abstand link/rechts zum Fenster im gleiche Verhältnis geändert wird?

Die einzelnen Boxen die ich benutzt habe um Text/buttons etc zu positionieren sehen wie folgt aus:

.box5{
background: white;
padding:0px;
position:absolute; top:220px; left:256px; width:300px; height:500px;
 

Faser

Aktives Mitglied
Registriert
20.08.2003
Beiträge
1.024
Versuche das Zentrieren mal mit
Code:
body {
  margin-left: auto;
  margin-right: auto;
  width: *deine-breite*;
}
Allerdings darfst du die anderen Boxen dann auch nicht absolut positionieren, weil die ja dann unabhängig vom body sind.

Und jetzt noch ein paar Tipps: Du programmierst dein CSS immernoch wie HTML 4.01.

1. Gebe deinen Klassen (in deinem Fall den div-Boxen) sinnvolle Namen. Statt "box5" schreibst du zum Beispiel "content".

2. Du brauchst nicht jede Kleinigkeit mit span's definieren. Da könntest du ja dann genauso gut font-Tags benutzen. Beispiel: Copyrighttext. Anstatt nur die Position in der CSS-Datei anzugeben, hättest du genauso gut den ganzen Kram aus dem folgenden span dazutun können.

3. Positioniere deine div-Boxen im HTML-File wie es Sinn macht. Sprich zuerst den Titel der Seite, dann die Navigation, anschließend den Inhalt und zum Schluss das Copyright. Niemand, der deine Seite im Text-Browser betrachtet, erfreut sich daran, mit "Copyright Quicksilver Inc." begrüßt zu werden ;-)

4. Unnötigen Code vermeiden: Um das Bild zu positionieren, hast du eine Box gemacht, in die du dieses anschließend eingefügt hast. Du hättest aber genauso gut dem img-Tag die Klasse "box1" (besser wäre "banner" gewesen) zugewiesen.

5. Statt hinter jeder Überschrift ein br zu machen und dann direkt mit dem Text zu beginnen, wäre es sinnvoller gewesen, jeweils die Überschrift mit h1 (h2, h3, ...) zu definieren und anschließend eine p-Box aufzumachen, in die der passende Text kommt.

6. Die Anführungszeichen vor dem Text hast du immer mit "span style="color: blue;"" definiert. Gerade da liegt NICHT der Sinn von CSS. Du hast hier ein sich immer wiederholendes Element, welchem du viel eher eine Klasse hättest zuweisen können. So kannst du dann bei einer Layout-Änderung später auch viel einfacher die Farbe dieser Anführungszeichen ändern (aus diesem Grund sollten Klassen auch nie beschreibende Namen wie "blue" haben, sondern eher "anfuehrungszeichen" oder ähnliches)

7. Tabellen sollten niemals als Layout-Tabellen genutzt werden. Du hättest einfach die einzelnen Navigations-Buttons als Bilder ohne alles untereinander schreiben können und in einer Klasse für diese img-Tags bspw. das hier definieren können:
Code:
img.navigation {
  display: inline;
  margin-right: 5px;
}
Das alles hätte dann in eine Box "div.navigation" gehört ;-)

PS: Der Grauton ist sehr schwer zu lesen. Außerdem ist die kleine Schriftgröße auf Dauer etwas anstrengend.
 

QuickSilverEX

Mitglied
Thread Starter
Registriert
13.06.2004
Beiträge
770
Danke für deine Mühe!
Morgen Abend kann ich weiter machen und dann werde ich mal Schritt für Schritt deine Liste durchgehen, aber ich denke sie hat mir schon jetzt sehr viel geholfen.

Das mit dem span hat mich auch immer genervt, eleganter ist es da wirklich das in der CSS Datei richtig zu deklarieren.
Dann wird es auch einfacher sein die Artikel immer im gleichen Stil erscheinen zu lassen, besonders wenn ich neue hinzufüge.

Die Schrift hatte ich so klein gewählt, da es bei größerer Schrift immer wie FETT aussah. Ich suche eigentlich eine größere Schrift die dabei aber nicht fetter wird sondern eher light bleibt
 
Zuletzt bearbeitet:

Faser

Aktives Mitglied
Registriert
20.08.2003
Beiträge
1.024
Du kannst übrigens auch Komma-Werte benutzen (12px, 12.5px, 13px --> also immer mit Punkt dazwischen).

Bei den Schriften kannst du (musst du nicht) auch noch den Typen der Schrift angeben, bspw. so:
Code:
font-family: Arial, Helvetica, sans-serif;
Der Browser geht dann der Reihenfolge nach die Schriftendurch (sofern nicht vorhanden) und wenn keine da ist, nimmt er eine Standard-Schrift diesen Types.

Typen wären:
- serif (wie Times New Roman)
- sans-serif (wie Arial)
- comic (wie Comic Sans)
- ... fällt mir jetzt nicht mehr ein

Zum Schmökern, Nachlesen etc. kann ich noch empfehlen:
- http://www.jendryschik.de/wsdev/einfuehrung/
- http://www.barrierefreies-webdesign.de/
- http://stephan.win31.de/goodweb.htm

Bevor du eine Seite hochlädst, solltest du sie immer hiermit überprüfen:
- http://validator.w3.org/
- http://www.delorie.com/web/lynxview.html

;-)
 
Oben