|
|||
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 |
Sponsored Links |
|
|||
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:
|
Sponsored Links |
|
|||
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; } Zitat:
gruss, sascha |
|
|||
Zitat:
Hier noch mehr Vorschläge: http://css.maxdesign.com.au/listamatic/index.htm Zitat:
Ä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! |
|
|||
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:
Zitat:
|
|
|||
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"> sascha |
|
||||
Zitat:
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 |
|
|||
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 |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |