HP jetzt mit CSS gebastelt...

Cpunkt · 30.09.2005, 14:50

Hallo, hab's nun endlich geschafft, meine HP komplett auf CSS umzustellen, ganz ohne Frames.
Dank Eurer Hilfe

Könnt ja mal schauen, der Code, ist für die Profis bestimmt ein Kauderwelsch

Boris · 30.09.2005, 15:17

Also die Website kennen wir ja mittlerweile schon ne Weile ... wozu ein neuer Beitrag dazu?

However, im Code stecken noch einige Fehler:
http://validator.w3.org/check?verbos....haare-los.de/

Das ist nicht erlaubt:
<p><h2>LightSheer - Laservermietung </h2></p>

Entweder <p> oder <h2>, aber nicht verschachtelt.

Alle Texte, die du in ein <div> gezwängt hast, gehören besser in ein <p> hinein.

<META name="Page-type" content="Buisniss"> ... mh, also ich kenne nur das (englische) Wort Business

Cpunkt · 30.09.2005, 15:34

Sorry für die Nerverei

Nur in <p></p>oder <div><p></p></div>?

Boris · 30.09.2005, 15:41

Da du es eh über Klassen / IDs vergibst, reicht ein <p class="bla">...</p>, bzw. <p id="bla">...</p>

hero-master · 30.09.2005, 16:18

Hi Cpunkt

sieht doch ganz gut aus das Ganze, gute Arbeit für deine erste CSS-Seite

Neben den Fehlern, die der Validator und Boris (was im Grunde genommen eine Person ist

) auspucken, noch ne Kleinigkeit:

<br>-Tags sind für Zeilenumbrüche zuständig und nicht als "Platzhalter" zwischen dem Inhalt und dem unterem Rand

Gib dem Aussencontainer lieber ein padding mit

Dann bei title="" im Menu. Es bringt wenig in den title-Bereich noch einmal den Menupunkt zu schreiben

PS: Einen hab ich noch

http://dislabs.de/index.php?ac=labor&sub=1&id=13

Cpunkt · 30.09.2005, 17:07

@hero

Danke für deine Einschätzung!

Das mit den <br> werd ich versuchen zu ändern

Bloß auf der ersten Seite bekomm ich die Abstände einfach nicht richtig hin.
Irgendwie reagieren die einzelnen Element nicht wie ich dachte auf margin-top bzw margin-bottom.
Woran kann das liegen? Im FF sieht die erste Seite auch ein wenig anders aus...*grübel*

hero-master · 30.09.2005, 17:09

Zitat:

Zitat von Cpunkt

Irgendwie reagieren die einzelnen Element nicht wie ich dachte auf margin-top bzw margin-bottom.
Woran kann das liegen?

Welche Elemente meinst du?

Cpunkt · 30.09.2005, 17:34

....die Überschriften und div Container....

Wie läuft das eigentlich:
Ich habe die Überschrift oder einen Div-Container....darunter soll wieder ein Div-Container im Abstand von 30px, gebe ich nun den oberen ein margin-bottom: 30px;
oder dem untern ein margin-top: 30px;?

Zur HP: Die Positionen der Überschriften sind im IE und FF ungefähr gleich, nur der Div-Container #vergessen ist im FF wesentlich größer als im IE, nachdem ich den Text übrigens als Absatz formatiert habe...

hero-master · 30.09.2005, 17:43

Zitat:

Zitat von Cpunkt

Ich habe die Überschrift oder einen Div-Container....darunter soll wieder ein Div-Container im Abstand von 30px, gebe ich nun den oberen ein margin-bottom: 30px;
oder dem untern ein margin-top: 30px;?

Das ist egal

Zitat:

Zitat von Cpunkt

Zur HP: Die Positionen der Überschriften sind im IE und FF ungefähr gleich, nur der Div-Container #vergessen ist im FF wesentlich größer als im IE, nachdem ich den Text übrigens als Absatz formatiert habe...

Ein Paragraph (p-Tag) hat ein vordefinierten margin/padding Wert, der je nach Browser variieren kann.
Ich verwende daher immer zu Beginn meiner CSS-Datei diesen Code, so setzt er alle vordefinierten margins und paddings auf 0

Code:

* {
margin:0;
padding:0
}

Cpunkt · 30.09.2005, 17:52

Zitat:

das ist egal

Ein Beispiel von mir: Ich sage dem Container #vergessen (unter h1) margin-top: 0px,
Da hat er im IE nicht reagiert, er hielt doch einen Abstand... da mußte ich erst der h1 ein margin-bottom: 0px geben...
Das verwirrt einen Anfänger...

hero-master · 30.09.2005, 19:08

Zitat:

Zitat von Cpunkt

Ein Beispiel von mir: Ich sage dem Container #vergessen (unter h1) margin-top: 0px,
Da hat er im IE nicht reagiert, er hielt doch einen Abstand... da mußte ich erst der h1 ein margin-bottom: 0px geben...
Das verwirrt einen Anfänger...

Wie breits erwähnt:
Einige Tags haben vordefinierte margin-/padding-Werte, dazu gehören unter anderem:
p, ul, h1-h6, body

Cpunkt · 30.09.2005, 20:32

Hab nochwas

Auf der Seite http://www.haare-los.de/haarentfernung-css.html
hab ich ziemlich weit unten in ein Div #fotogross drei weitere mit float: left;
Darunter dann kommt ein Div #fragen. Dieses Div klebt im FF an den drei gefloateten, ich kann machen was ich will - der IE reagiert, nur der FF nicht.
Woran liegt das??

hero-master · 30.09.2005, 21:43

Zitat:

Zitat von Cpunkt

hab ich ziemlich weit unten in ein Div #fotogross drei weitere mit float: left;
Darunter dann kommt ein Div #fragen. Dieses Div klebt im FF an den drei gefloateten, ich kann machen was ich will - der IE reagiert, nur der FF nicht.
Woran liegt das??

1. Möglichkeit:
Zwischen dem Container #fotogross und #fragen ein br reinhauen, mit clear:left; :
(so, oder per klasse und dann im CSS definieren)

HTML-Code:

<br style="clear:left">

2.Möglichkeit:
den Containern mit der ID #fotos ein margin-bottom zuweisen

nd nochmal: IDs nur einmal pro Seite verwenden. Wenn du sie mehrmals verwenden willst, dann verwende Klassen

Cpunkt · 30.09.2005, 23:37

OK, danke das hat etwas geholfen. Ich hatte zwar schon dem #fragen ein clear:left gegeben, das brachte aber nix.... Dein Tipp war besser