• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[Editor] Browsercheck und Layoutbewertung

Status
Für weitere Antworten geschlossen.
Tar

Tar

Aktives Mitglied
Guten Abend liebe Community,

habe hier gerade spontan was zusammengebastelt (der Brush gefiel mir einfach). Da ich persönlich nur mit FireFox unterwegs bin und den IE deinstalliert habe (zumindest auf dem PC, der mir gerade zur verfügung steht), wäre für mich ein Browsercheck (IE 6/7/8, Chrome, Safari, Opera) erstmal das Wichtigste (habe die dumme Vermutung der IE6 mag mich nicht).

Zweitens wäre eine kurze Kritik am Layout erwünscht. Wie schon gesagt ist das ganze eher eben spontan entstanden, und kann noch keines Wegs ans final angesehen werden.

Schönen Abend noch,

Tar
 
Zuletzt bearbeitet:
Werbung:
Nett, gefällt mir, konnte auch auf die schnelle im IE7 und Opera keine Fehler erkennen. Das Hintergrundbild beim hover gefällt mir sehr gut.
 
Im IE6 kann das nicht funktionieren:
Code: 
#bg_right {
  width:300px;
  height:100%;
  background:url(images/bg_right.gif) repeat-y;
  position:fixed;
  left:50%;
  top:0;
  margin-left:250px;
}
position: fixed wird ignoriert. Also wie position: static behandelt. #bg_right wird mit height:100% dargestellt und darunter kommt der Rest.
 
Werbung:
finde ich sehr gelungen, ich würde aber, um ein einheitliches bild zu erhalten, die navi inkl. bild fixieren und nur den text scrollbar machen.

ps iceweasel, konqueror sind ok, einzig die schrift wird im konqueror offensichtlich mit einer anderen grösse, formatierung oder schriftart oder sowas verwendet, die schrift sieht jedenfalls anders aus als im iceweasel (firefox).
 
Ich bekomme im FF2 und Konqueror 3.5 Georgia angezeigt. Letterspacing und line-height müssen für solche Serifen-Schriften unbedingt vergrößert werden. Wenn mann sie überhaupt verwenden möchte. In Windows-Systemen ohne Schriftglättung sehen solche Schriften richtig hässlich aus. Erst ab einer gewissen Größe kommen die Serifen hübsch zur Geltung (z.B. in Überschriften).
 
Erstmal danke für die Kritik.

Was schlagt ihr für Schriftarten vor?
Ich habe nun alle Hintergründe absolut positioniert, allerdings ist es mir iwi zu umständlich (vom Code her) nur den Content scrollbar zu machen (oder hab ich einfach nur gerade ein Brett vorm Kopf?).

Gruß,

Tar
 
Werbung:
Tar-Minyatur schrieb:
...
Was schlagt ihr für Schriftarten vor?
Ich habe nun alle Hintergründe absolut positioniert, allerdings ist es mir iwi zu umständlich (vom Code her) nur den Content scrollbar zu machen
...
Zum Vergrößern anklicken....

Für lange Fließtexte verwende ich gerne Verdana. Sie hat eine schöne Laufweite und ist Serifenlos.
Wenn du etwas abseits vom Mainstream gehen willst und trotztem eine gute Verbreitung möchtest, sehe dich mal in der Lucida-Familie um (Tipp: lucida grande). Allerdings sieht sie unter Linux, meiner Erfahrung nach, nicht gut aus. Unter Windows und Mac macht sie eine Gute Figur.

Zum position: fixed;
Für Eine einfaches fixieren des background-image brauchst du die Elemente nicht fixed zu positionieren. Es reicht das background-image zu fixieren
( background-attachment:fixed; ).
Z.B.
html:
Code: 
<body>
<div id="alles">

<div id="inhalt">
<div id="inhalt_innen">
<h1>Inhalt</h1>
<p>Lorem ipsum dolor sit amet</p>

</div>
</div>
</div>
css:
Code: 
* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

#alles {
min-height: 100%;
background-image: url(http://css-spalten.red-rod.net/test/beispiel/images/wirrwar1400px.png);
background-repeat: repeat-y;
background-position: 50% 50%;
background-attachment:fixed;
}

/* für IE6:*/
* html #alles {
height: 100%;
}

#inhalt {
position: relative;
width: 800px;
margin: 0 auto;
}

#inhalt_innen {
padding: 100px 100px 0 40px;
}
Die Grafik gibt es wirklich unter der Adresse. Ich habe sie etwas abgeändert
( stark verbreitert und Border mit eingezeichnet. )
Zwar verwendet der IE6 background-attachment:fixed; unter diesen Bedingungen nicht, stört aber nicht so wie die mangelnde Unterstützung von position:fixed. Der Background wandert im IE6 einfach mit.

Ich halte es für übertrieben Elemente mit position:fixed nur für ein background-image zu verwenden. Die Anpassungen für ältere IE währen kompliziert.
background-attachment dagegen ist für so etwas vorgesehen.

Die Linke Grafik könntest du mit position:absolute; einfügen.
(In diesem Beispiel ausgehend von #inhalt. Position:relative ist für dieses Element schon gesetzt.)
 
Habe nun nochmal etwas rumgebastelt (war wirklich gar nicht so einfach, oder ich hab noch einen zu hohen Restpegel...), und bräuchte daher nochmal nen Browsercheck für den IE6, Safari und Opera.

Schrift ist jetzt Verdana, über letterspacing und line-height bin ich mir noch nicht so einig..

Gruß,

Tar
 
Werbung:
Ich hätte Georgia gelassen. Das ist eine sehr schöne Schrift, und wenn sie zum Design passt, sollte sie auch verwendet werden, und ich würde sagen, sie würde passen! Als alternative Schriftart kannst Du ja dann immernoch Verdana definieren.
 
Georgia ist eine klassische Serifen-Schrift und Verdana eine moderne serifenlose Schrift. Also völlig verschiedene Schriften. Als Alternativschrift zu Georgia würde vielleicht Times New Roman in Frage kommen.

Als Kontrast zu serifenlosen Fließtext Kann Georgia in Überschriften wirken.
Hab ich auf dieser Webseite so eingesetzt: Fotostudio Mieten Hannover

Zum IE6
Er kann png-Transparenz nur als png-8 korrekt darstellen. Unter gimp lassen sich pngs auch mit 8bit speichern. Schöne Ergebnisse bekomme ich damit aber nicht hin.
Das Layout benötigt auch kein background-image mit transparenz.
So sieht es nun aus:
Bildschirmfoto-4.png
 
Werbung:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben