zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden pixelgenaues design mit css!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 31.10.2004, 16:39
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2004
Beiträge: 14
sascha befindet sich auf einem aufstrebenden Ast
Standard pixelgenaues design mit css!

hallo,

ich lerne gerade webseiten zu erstellen und bin im internet darauf gestossen dies am besten mit css zu machen. also habe ich viel gelesen und das grundgerüst meiner startseite steht schon. allerdings lege ich sehr viel wert auf ein pixelgenaues design, deshalb habe ich ja auch auf prozentangaben der container verzichtet.

nun habe ich aber festgestellt das IE6 und mozilla die seiten nicht gleich darstellen und andere browser werden es warscheinlich wieder anders darstellen. deshalb möchte ich mich hier mal umhören woran es liegt und ob man das beseitigen kann.

in meinem fall stört mich besonders:
1- die schrift ist in mozilla immer etwas nach unten verschoben (im verhältnis zu IE6). siehe im header die h1
2- der IE6 kann die line-hight: im menü nicht interpretieren. egal was ich angebe, die zeilenhöhe bleibt immer gleich. mozilla verändert die zeilenhöhe aber.





was meint ihr dazu? ist es überhaupt möglich ein pixelgenaues design browserübergreifend mit css zu entwickeln? was sagt ihr zu meinen beiden problemen, die ich weiter oben erwähnt habe?

bin für jede meinung, hilfestellung und weiterführende links sehr dankbar.

gruss,
sascha
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 31.10.2004, 18:17
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Hallo Sascha,

erstmal herzlich Willkommen hier im Forum.

Dann zu Deinen Fragen:

1. Die Browser haben unterschiedliche Default-Einstellungen bezüglich margin und padding der Elemente.
Am besten zuerst
h1, h2, h3, h4, h5, p {margin:0; padding:0;} definieren und dann später selber die Abstände wieder setzen.

2. versteh ich nicht so recht - der IE kann line-height durchaus! Was geht denn nicht?


Und noch so einiges allgemeines zu der Seite:
- setze eine Hintergrundfarbe im Body - Apricot (hab ich z.Zt. eingestellt) paßt nicht so wirklich!

- /japanische%20messer%20-%20%20k%FCchenmesser%20-%20kochmesser/hintergrund-inhalt.gif
besser Namen ohne Leerzeichen vergeben - und alles klein schreiben. Dann werden die Fehlerquellen minimiert.

-
Zitat:
allerdings lege ich sehr viel wert auf ein pixelgenaues design
Meinst Du, dass Deine Leser das auch tun? Wenn jemand sich mit guten Browsern was verstellt (weil 12px zu klein zum Lesen sind, z.B.) - dann bricht schnell das Layout auseinander! Das Internet ist kein Printmedium - die Ausgabegeräte sind zu unterschiedlich, als dass pixelgenaues Design sinnvoll wäre. Der Footer wird schnell einfach überdeckt bei Schriftgrößenänderung, die in guten Browsern immer möglich ist. Das ist die Gefahr, wenn alles absolut positioniert wird.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 31.10.2004, 19:47
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2004
Beiträge: 14
sascha befindet sich auf einem aufstrebenden Ast
Standard

hi terrikay,

danke für die ganzen tipps. durch margin:0; und padding:0 erstmal die default einstellungen auf null zu setzen hat wunderbar funktioniert und ich habe erstmal eine sorge weniger.

das der IE6 die line-height nicht interpretiert wundert mich auch. egal welchen wert ich für line-height angebe, die zeilenhöhe bleibt im menü immer gleich.
Code:
#menu A:link {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 30px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}
#menu A:visited {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 30px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}
#menu A:hover {
	FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #822A1B; LINE-HEIGHT: 30px; FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif; TEXT-DECORATION: none;
}
da hab ich wirklich keine ahnung mehr, woran das liegen könnte. mozilla zeigt den zeilenabstand ja richtig an.



Zitat:
Meinst Du, dass Deine Leser das auch tun? Wenn jemand sich mit guten Browsern was verstellt (weil 12px zu klein zum Lesen sind, z.B.) - dann bricht schnell das Layout auseinander! Das Internet ist kein Printmedium - die Ausgabegeräte sind zu unterschiedlich, als dass pixelgenaues Design sinnvoll wäre. Der Footer wird schnell einfach überdeckt bei Schriftgrößenänderung, die in guten Browsern immer möglich ist. Das ist die Gefahr, wenn alles absolut positioniert wird.
so habe ich das natürlich noch nie gesehen, weil ich ja noch nie etwas an der schriftgrösse im browser verändert habe, geschweige denn wusste, dass es überhaupt möglich ist. ich sehe schon, es gibt noch viel zu lernen!

gruss,
sascha
Mit Zitat antworten
  #4 (permalink)  
Alt 31.10.2004, 23:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 24.05.2004
Beiträge: 1.176
terrikay befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von sascha
das der IE6 die line-height nicht interpretiert wundert mich auch. egal welchen wert ich für line-height angebe, die zeilenhöhe bleibt im menü immer gleich.
Ich hab grad noch rumprobiert - finde aber auch keine Lösung bei Deinem Grundansatz (padding und margin bringen auch nichts) - Ich würd eh ne Liste draus machen - dann kannst Du die Abstände durch margin bestimmen. Hier ein Link mit Tutorials: http://css.maxdesign.com.au/listutorial/index.htm (Tutorial 2)
Hier noch mehr Vorschläge: http://css.maxdesign.com.au/listamatic/index.htm

Zitat:
so habe ich das natürlich noch nie gesehen, weil ich ja noch nie etwas an der schriftgrösse im browser verändert habe, geschweige denn wusste, dass es überhaupt möglich ist.
Beim Firefox: im Menü unter Ansicht - Schriftgrad vergrößern/verkleinern oder einfach STRG + Mausrad. Funktioniert immer!

Ähnlich beim IE: Ansicht - Schriftgrad - dort sind dann 5 Stufen zur Auswahl
oder eben STRG + Mausrad: Funktioniert aber nur, wenn die Schrift nicht mit px oder pt fest definiert wurde! Da die Schrift heute aber häufig mit px festgelegt wird, haben die meisten Leute schon gelernt, dass man da eingeben kann, was man will und es sowieso nicht funktioniert.

Leute, die nicht ganz so gut gucken können (z.B. "um die 50Jahre" und etwas alterssichtig - aber zu eitel, um eine Lesebrille zu benutzen oder so...) möchten oft gerne eine größere Schrift einstellen. Mit dem IE haben sie keine Chance und verlassen die Seite. Mit Firefox geht das zwar - aber wenn alles sich überlagert wegen festem Layout, dann kann man trotzdem nichts mehr lesen - Ergebnis: User verläßt die Seite und Du verkaufst keine Messer!

Für viele Leute einzige Chance, im Internet was lesen zu können: Monitorauflösung runterstellen (z.B. 800x600px trotz eigentlich normal großem Monitor mit 17"). Dann wird alles etwas größer. (Opera holen wäre eine Alternative, aber den kennen die meisten nicht).
Mit kleinem Monitor erscheint bei Dir aber ein Querscroller - Du gehst einfach selbstverständlich davon aus, dass jeder 1024x768px hat.

Denk mal drüber nach und lies hier mal in anderen Beiträgen, vor allem im Barrierefrei-Bereich!
Mit Zitat antworten
  #5 (permalink)  
Alt 01.11.2004, 12:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2004
Beiträge: 14
sascha befindet sich auf einem aufstrebenden Ast
Standard

ich habe letzte nacht auch noch rumprobiert, aber es hat nichts genutzt. deshalb habe ich heute wirklich eine liste daraus gemacht und das tutorial war wirklich gut. auch die zeilenhöhe kann ich über line-height oder margin verändern.

allerdings zeigt es diesmal mozilla nicht richtig an. meine links rutschen hier einfach unter die bullets. habe wieder alles mögliche versucht wie zb. die listenzeichen zu entfernen und die bullets manuel über img im code einzufügen und so einiges anderes, was aber alles nichts gebracht hat.



deshalb will ich hier nochmal nachfragen, denn vielleicht ist die lösung ja wieder ganz einfach und ich komme einfach nicht drauf!

gruss,
sascha

ps:
Zitat:
STRG + Mausrad: Funktioniert aber nur, wenn die Schrift nicht mit px oder pt fest definiert wurde!
weil ich gedacht habe das mein problem vielleicht in einem unsauberen code liegt war ich gestern bei diesem w3c validator. da konnte man tatsächlich mit strg+mausrad vergrössern -- genial

Zitat:
Denk mal drüber nach und lies hier mal in anderen Beiträgen, vor allem im Barrierefrei-Bereich!
ja, es ist auf jeden fall eine gute sache die site auch randgruppen zugänglich zu machen. allerdings habe ich das gefühl, dass es eine hohe kunst ist und ich erstmal froh bin, wenn meine site in allen browsern einigermassen gleich aussieht. dann muss ich ja auch noch einen warenkorb einbinden, was ich auch noch nie gemacht habe und anschliessend kann ich mir dann gedanken über barrierefreiheit machen
Mit Zitat antworten
  #6 (permalink)  
Alt 01.11.2004, 13:43
Benutzerbild von kadees
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 22.06.2004
Ort: in Baden (nicht Schwaben)
Beiträge: 792
kadees wird schon bald berühmt werden
Standard

hi,

hatte auch schon ähnliches problem. ohne ausprobiert, denke aber der ansatz könnte helfen :

font: 12px/18px Verdana, Geneva, Arial, Helvetica, sans-serif;

wobei 1.wert (hier 12px) für font-size,
der 2.wert (hier 18px) für line.height steht.

scheint so als ob der ie diese anweisung exakter ausführt, warum weis ich allerdings auch nicht.

cu[/code]
Mit Zitat antworten
  #7 (permalink)  
Alt 01.11.2004, 14:35
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2004
Beiträge: 14
sascha befindet sich auf einem aufstrebenden Ast
Standard

den zeilenabstand kann ich ja mitlerweile bestimmen. jetzt macht mozilla aber die links im menü unter das list-style-image (bullets), anstatt neben die bullets.

vielleicht ist das problem ja im head bereich verankert.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
gruss,
sascha
Mit Zitat antworten
  #8 (permalink)  
Alt 01.11.2004, 16:58
Benutzerbild von toscho
Perplexifikator
XHTMLforum-Kenner
 
Registriert seit: 22.05.2004
Ort: Halle/Saale
Beiträge: 1.565
toscho sorgt für eine eindrucksvolle Atmosphäretoscho sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von sascha
jetzt macht mozilla aber die links im menü unter das list-style-image (bullets), anstatt neben die bullets.
Das ist ein uralter Mozilla-Bug; den kannst du auch mit[*]

nachvollziehen. Oder mit jedem anderen Blockelement, das Kind eines[*] ist.

Da du ein Bild verwendest, kannst du dieses auch einfach als Hintergrundbild für die[*] setzen und diese dafür auf »list-style:none;«.

Wenn du kein Bild benutzen würdest, müßtest du die[*] auf »display:block« und »list-style:none« setzen und den Links ein »display:list-item« geben.

Gruß
Thomas, der den Glauben an eine einzige saubere CSS-1-Implementation schon lange aufgegeben hat
__________________
toscho.de
Mit Zitat antworten
  #9 (permalink)  
Alt 01.11.2004, 19:06
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 31.10.2004
Beiträge: 14
sascha befindet sich auf einem aufstrebenden Ast
Standard

oh ja, nach dem ganzen theater habe ich die bullets als hintergrundbild eingefügt. jetzt scheint alles zu funktionieren und sieht sogar einigermassen gleich in mozilla und IE6 aus. wenigstens habe ich durch das ganze hin und her etwas css gelernt, auch wenn nicht alle zusammenhänge verstehe, aber hauptsache das menü funktioniert jetzt erstmal.

also nochmal vielen dank für die hilfe,
sascha
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Responsive Design und Schriftgrösse CSS JörgS CSS 8 30.04.2015 15:42
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
2 Probleme mit meinem CSS Design leibnitz CSS 15 08.05.2008 11:01
css template design NiteStyle CSS 1 24.01.2007 16:47
CSS Design Probleme Hawklan CSS 5 12.08.2004 12:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:38 Uhr.