Navi Menu verschiebt sich

[Hannes.at]

Hallo

Also ich hoffe ihr koennt mir helfen ich komm da einfach nicht mehr weiter.

Legion of Heaven

html code

<div id="left" style="clear:right;">
<div id="feuer" style="background-image:url(images/diafire.gif);">
<div id="menu" style="list-style-type: none;">
 <ul>
<br>
 <li><a href="members.html">Members</a></li>
<br>
<br>
 <li><a href="#">Squads</a></li>
<br>
<br>
 <li><a href="#">History</a></li>
<br>
<br>
 <li><a href="#">Server</a></li>
<br>
<br>
 <li><a href="index.html">News</a></li>
<br>
<br>
 <li><a href="regel.html">Regeln</a></li>
 </ul>
       <div id="feuer" style="background-image:url(images/diafire.gif);"></div>           
</div>
 </div>

css code

#feuer {
position:absolute;
bottom:0px;
width:100px;
height:180px;
} 
#left {
position:relative;
width:200px;
height:700px;
border:1px solid #ffffff;
background-color:#efefef;
margin-top:5px;
margin-bottom:5px;
}
#left {
float:left;
background-image: url(../images/navi.jpg);
}

Sieht man ja eh gleich was da los ist. :(

Die Gif Animation sollte eigentlich unten im Rahmen liegen nur wenn ich sie verschiebe dann schaut das aus wie wenn ich die einzelnen Frames von der gif verschiebe.
Ich will doch nur das sie in der Mitte liegt und etwas weiter oben,was mach ich da bloss falsch?

 

[prm]

Falsch gerechnet!

#left:
200px breit + 2px border = 202px

#content:
747px breit + 2px border + 1px zusätzlicher margin = 750px

Macht zusammen 952px.
Der #wrapper ist aber nur 950px breit.

 

[Efchen]

Zusatztipp:
Wenn Du schon CSS verwendest, dann solltest Du alles Layout&Design in CSS machen. D.h. Du verzichtest auf die <br> im <ul> (die da ohnehin nicht stehen dürfen) und machst den Abstand stattdessen mit margin/padding.

Gruß,
-Efchen

 

[Hannes.at]

Ah danke schoen jetzt sitzt es richtig :)

Ja das mit dem <br> hab ich deswegen gemacht weil ich das wieder nicht mit css hinbekommen hab.
Weil es haben sich immer die ganzen Menubuttons verschoben aber irgendwie das mit dem abstand zu den einzelnen Buttons hat nie geklappt.

Dann hab ich mir gedacht ich machs schlicht und einfach mit dem <br>.

Werd mich damit noch etwas spielen vielleicht schaff ich es ja noch :)

 

[Hannes.at]

Ah habs geschafft.

Hab das Margin die ganze Zeit woanders angewendet,hab mir jetzt mal einen anderen Quelltext angeschaut.

Und siehe da mein MArgin war am falschen Ort.

 

[Hannes.at]

Gehört zwar nicht mehr zu dem Thema.

Aber mal ne Frage kann man auch eine andere Schrift einfügen?Ok so wie jetzt am Header da hab ich die Schrift ja mit Gimp gemacht.

Aber kann man z.b diese Schriftart auch mit css machen?
Ich hab jetzt nur von einen Freund gehört das das nicht so einfach ist,weil dann muesste sich jeder die Schrift erst runterladen bevor er sie sehn kann stimmt das den ?

 

[prm]

Das ist richtig. Du solltest eine Schrift verwenden, die gängig und weit verbreitet ist, z.B. "Verdana".
Du kannst allerdings ebenso eine von dir gewünschte "Spezialschrift" definieren. Allerdings solltest du dann ersatzweise eine oder zwei andere Schriftarten dazu geben, falls deine "Spezialschrift" nicht installiert sein sollte.

Das geht dann so, hier z.B. für den gesamten body:

body {font-family: 'good times', verdana, 'sans-serif';}

Wenn Good Times nicht installiert ist, wird Verdana angezeigt und falls die nicht installiert ist eine serifenlose Schrift.

PS: Am besten ist es, wenn du für ein anderes Thema dann auch einen neuen Beitrag aufmachst.

 

[Efchen]

Ganz wichtig ist die generische Schriftart am Ende (hier: sans-serif), weil dann die Browsereinstellung für einen serifenlosen Font verwendet wird. Fehlt das, wird die Browsereinstellung für den Defaultfont verwendet, der kann dann auch Serifen haben, oder einfach nicht im Entferntesten so aussehen, wie Dein Wunschfont und damit die Website eher schlecht da stehen lassen.

 

[Hannes.at]

Ah war ja mal nicht so schwer :)

font-family: Diablo, Helvetica, sans-serif;

Habs im Body eingefügt.
Also da ich jetzt die Diablo schrift installiert habe seh ich sie natuerlich und ich geh jetzt mal davon aus das ihr sie nicht habt seht ihr die Helvetica oder Sans.

P.S

Werd das beim nächsten mal so machen, einen Thread eröffnen,dachte nur es soll ja am Ende net des ganze Forum voller Hannes.at und seine Fragerei sein. :)

 

[neuroleptika]

Also da ich jetzt die Diablo schrift installiert habe seh ich sie natuerlich und ich geh jetzt mal davon aus das ihr sie nicht habt seht ihr die Helvetica oder Sans.

Sans bedeutet Serifen. Sans-Serif ohne Serifen (san ~ ohne / frei, französisch).
Diablo habe ich z.B. nicht (finde ich scheuslich). Also würde bei mir Helvetica angezeigt werden.
Hätte ich auch diese Schrift nicht zur Verfügung würde sans-serif zum tragen kommen. Das währe bei meiner Browsereinstellung Verdana.
Hättest du serif angegeben würde es bei mir mit Times New Roman angezeigt werden.
Das kann aber jeder einstellen wie er will.

Du solltest deine Seiten mit den jeweils angegebenen alternativ-Schriften ansehen.
Die Schriften haben zum Teil sehr unterschiedliche Laufweiten.
Wenig Verbreitete Schriften, wie Diabolo, kannst du ganz zum Schluss deiner Arbeit zufügen.
Erstmal muß die Masse bedient werden.

Ich denke mal das sollte nur ein Beispiel von dir sein.
So wie es bei dir steht währe es ja nur eine Verschlimbesserung.
Diablo ist eine extreme Serifenschrift. Helvetica dagegen ist ist eine seriöse, serifenlose Schrift.
Je nach installierter Schrift würde die Seite völlig unterschiedlich wirken.

 

[Efchen]

Sans bedeutet Serifen. Sans-Serif ohne Serifen (san ~ ohne / frei, französisch).

Freudscher Typo? "Serif" bedeutet Serifen. "Sans" heißt "ohne".

Diablo ist eine extreme Serifenschrift. Helvetica dagegen ist ist eine seriöse, serifenlose Schrift.
Je nach installierter Schrift würde die Seite völlig unterschiedlich wirken.

Ja, das ist komisch, wenn man verschiedene Schrifttypen miteinander mischt. Vom Designerischen her ist das vermutlich nicht sinnvoll, oder?

 

[neuroleptika]

Freudscher Typo? "Serif" bedeutet Serifen. "Sans" heißt "ohne".

.. Vom Designerischen her ist das vermutlich nicht sinnvoll, oder?

Oh ja, natürlich: font-family: serif;. Also eine Schrift mit Serifen.
Ich spreche kein französisch. Sans wird ohne das letzte s ausgesprochen. Ich habe es mir Vorlesen lassen. Also tatsächlich etwas Freud dabei.

Ich finde schon, das mann extreme Serifen für Überschriften und klare serifenlose Schriften im Fließtext mischen kann.
Nur so eine Mischung als Alternativschriften anzugeben macht kein Sinn.

Ich halte das so:
Je extremer die Serifen, desto größer die Schrift angeben.
Arial ist auch noch gut zu lesen, wenn die Schrift relativ klein ausgezeichnet ist. Times New Roman ist dann nicht mehr so gut zu lesen.

Manche mono-space-Schriften sind mit 1em manchmal kaum zu lesen.
Verdana verträgt auch locker 0.75 em (ausgehend von 100%).
Unter Anderem deswegen weiche ich auch bei Fließtext von 1em ab.

Auf jeden Fall sollte man sich das Ergebniss mit allen angegebenen Alternativschriften ansehen.

 

[Hannes.at]

Also ich habe diese Schriftart gewählt weil sie ja von dem Spiel selber ist.Und da die Homepage auch uebers Spiel sein soll denk ich passt die Schriftart ganz gut dazu.

Das groesste Problem wird denk ich einfach das sein das ja nicht wirklich jeder diese Schriftart besitzt,und niemals das sieht was ich z.b sehe.

Und ich hab auch gestern schon gemerkt das ich den Abstand zurück setzen musste damit die Schrift wieder stimmt,nur wie schaut das jetzt fuer jemanden aus der diese Schrift nicht besitzt.


Ich glaube auch ich werde die Schrift wieder zurück setzen und die Diablo Schrift nur in den Buttons einfügen ueber Gimp.

 

[neuroleptika]

Also ich habe diese Schriftart gewählt weil sie ja von dem Spiel selber ist.Und da die Homepage auch uebers Spiel sein soll denk ich passt die Schriftart ganz gut dazu.
....

Da spricht ja erstmal nichts gegen.
Nur solltest du die Seite zuerst ohne diese spezielle Schrift gestalten.
Diablo kannst du später an die erste Stelle von font-family setzen.
Vielleicht ist die Schrift unter deinen Besuchern auch gut verbreitet.

Die Alternativschriften sollten deiner Wunschschrift möglichst ähneln. Sonst bräuchtest du keine Alternativen anbieten.