[html/css]

[Cosmoflamme]

Hallo zusammen!
Die Feinarbeit für meine Webseite ist soweit fertig,und es funktioniert in den getesteten Browsern auch alles.
Auf meinem Laptop mit der Bildschirmauflösung von 1400x1050 Pixeln sieht alles aus wie ich mir das gedacht habe.
Nur leider sieht die Schrift auf dem Laptop meiner Frau,der eine Bildschirmauflösung von 1280x800 Pixel hat,nicht mehr sehr lesbar aus.
Die Gafiken werden dann auch in die Breite gezogen,was das Ganze ein bisschen
pixelig aussehen lässt.
Wäre sehr nett,wenn sich das jemand anschauen könnte,und mir dann Tips gibt,was ich verändern kann.
Schliesslich brenne ich drauf,das noch mit Inhalt zu füllen.
Grüssle
Cosmoflamme

Link:https://www.cosmoflamme.de/test.html


P.S:Eins hab ich noch vergessen.Beim Opera Browser wird die Hovergrafik rechts im Menü höher dargestellt.Bis jetzt hab ichdafür noch keine Lösung gefunden.

 

[hjt21]

Hi

Hab es mit 1024x768 und mit 1280x1024 probiert sieht eigentlich super aus.
Hab beide Bilder vor mir. finde keinen unterschied.

MFG
Harry

 

[Cosmoflamme]

Hallöchen hjt21!
Vielen Dank fürs Nachschauen.Ich kann leider das Problem noch nicht wirklich beheben.Das Darstellungsproblem sieht man ziemlich deutlich mit dem Firefox und einer Bildschirmauflösung von 1280x800 Pixel.Auf dem Laptop meiner Frau sieht die Schrift dann verwaschen und undeutlich aus,und die Grafiken werden lang gezogen.
Mit dem IE sieht zumindest die Schrift dann wieder halbwegs lesbar aus.Der IE scheint die Schrift sowiso etwas dicker darzustellen.

Mir ist auch noch unklar,woher das Hover-Problem im Menü beim Opera kommt.

 

[gadon]

lol sorry aber jeden menupunkt einzeln mit id's zu belegen ist wirklich ... naja. ^^
uff, nochmal sorry aber warum bekommt jeder einzelne link nen eigenen div?


ok, erstmal setzt du für das gesamt rechte menue einen einzigen div.

HTML

<div class="menu1">
<a href="#" class="link1">Hallo Welt</a>
<a href="#" class="link1">Hallo Welt</a>
<a href="#" class="link1">Hallo Welt</a>
<a href="#" class="link1">Hallo Welt</a>
</div>

CSS

div.menu1 {
 color: #000000;
 background-color: #FFFFFF;
 background-image: url(background.jpg);
 background-attachment: fixed;
 background-position: center top;
 background-repeat: repeat-y;
 font-family: Verdana, sans-serif;
 font-size: 12pt;
 text-align: center;
 margin: 0px;
 padding: 0px;
 height: 500px;
 width: 60px;
}

a:link.link1{
 padding: 0px;
 margin: 0px;
 width: 60px;
 height: 10px;
}

a:hover.link1{
 color#000000;
 background-color: #FFFFFF;
 background-image: url('/design/leer.gif');
 background-attachment: fixed;
 background-position: center;
 background-repeat: no-repeat;
 padding: 0px;
 margin: 0px;
 width: 60px;
 height: 10px;
}

a:active.link1{
 padding: 0px;
 margin: 0px;
 width: 60px;
 height: 10px;
}

a:visited.link1{
 padding: 0px;
 margin: 0px;
 width: 60px;
 height: 10px;
}

obwohl ein hintergrundbild gesetzt wird lege ich trotzdem eine alternativ farbe an für leute die ohne bilder surfen.

ungetestet.

und wegen der verzerrung, könnte an dem hier liegen:

#center {
position : absolute;
left : 50%;
top : 50%;
width : 800px;
height : 600px;
margin-left : -400px;
margin-top : -300px;
border : 1px solid #7f7f7f;
}

du gibst 50% left an, dann aber wiederum margin -400px, irgentwie unlogisch
such lieber nochmal nach alternativen um die seite center zu setzen.

 

[Graccem]

Nur leider sieht die Schrift auf dem Laptop meiner Frau,der eine Bildschirmauflösung von 1280x800 Pixel hat,nicht mehr sehr lesbar aus.
Die Gafiken werden dann auch in die Breite gezogen,was das Ganze ein bisschen
pixelig aussehen lässt.

Also bei mir sieht es bei 1280x800(Laptop-Monitor) genauso aus wie bei 1280x1024 (CRT-Monitor). Browser ist der Seamonkey (gleiche Engine wie die vom FX). Ist der Browser deiner Frau vielleicht verstellt?

und wegen der verzerrung, könnte an dem hier liegen:

#center {
position : absolute;
left : 50%;
top : 50%;
width : 800px;
height : 600px;
margin-left : -400px;
margin-top : -300px;
border : 1px solid #7f7f7f;
}

du gibst 50% left an, dann aber wiederum margin -400px, irgentwie unlogisch
such lieber nochmal nach alternativen um die seite center zu setzen.

Das ist nicht unlogisch und auch völlig korrekt. Er verschiebt es um die Hälfte der Höhe und Breite.

 

[Cosmoflamme]

Vielen Dank für eure Antworten.
Das Div "center" dient dazu,den inneren Container mit dem Inhalt in der Mitte des Bildschirms zu zentrieren.
Klappt eigentlich auch wunderbar.Das könnte allerdings wirklich das Problem mit der Verzerrung sein.Denn ich schiebe dann ja immer um 400 Pixel nach links,unabhängig davon welche Bildschirmauflösung vorliegt.
Ich hab noch eine Möglichkeit gefunden,mit Hilfe von text-align ein Div zu zentrieren.Ich werde es damit mal versuchen,vielleicht klappts dann.
Auf die Zentrierung in der Höhe kann ich zur Not auch verzichten.

Ich habe für das Menü so viele Div genommen,weil ich mit reinen Links Schwierigkeiten hatte.
Im Menü wird ja kein Text,sondern eine Grafik verlinkt.Wenn ich also mit
<a href="bild.jpg" id="menue1">
verlinke,kann ich bei Hover kein Bild mehr drunter schieben.
Deswegen wird mit einem transparentem Bild verlinkt,und bei Hover wird dann die Hover-Grafik drunter geschoben.
Zusätzlich müsste ich noch mit <span></span> einen versteckten text anzeigen lassen.
Für jeden Menüpunkt brauche ich zusätzlich auch noch eine ID,weil die Menülinks auch noch an eine bestimmte Stelle positioniert werden soll.

Ich werde die Seiten aber nochmal überarbeiten,und versuchen die Menü-Links wie es Gadon gesagt hat zusammen zu fassen.
Grüssle
Cosmoflamme