So ich muss mal wieder hier im Forum Fragen loswerden... In diesem Fall zwei Fragen, die aber zusammenhängen!
1. kann jmd den Grund, anhand dieser Bilder, für die vertikale Verschiebung meiner Navigation nachvollziehen?
(Opera, IE sind korrekt ::: FF, Safari, Chrome falsch)
korrekt:
Spoiler
falsch:
Spoiler
2. Meine Überlegungen zielen bisher auf Conditional Comments bzw. Browserspeziefische Stylesheets ab, doch ich habe nicht die leiseste Ahnung in Beziehung auf die genannten Möglichkeiten.
Weil ich bisher die Begriffe nur gegoogelt habe und aus dem Kauderwelsch nicht schlau geworden bin, stell ich die Frage mal lieber hier.
wenn mein Anliegen unklar ist bitte nachfragen
mfg Inceptor
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Könntest Du das Stylesheet mal posten? Eine Möglichkeit könnte zum Beispiel sein, dass die Bilder als "Block"-Element definiert werden müssen. Könnte auch an margin oder ähnlichem liegen. Anhand der Bilder ist das schwer zu sagen .
Gruß, Toast
Edit: Können bei absoluter Positionierung (natürlich auch bei anderen) auch Rundungsfehler o.ä. sein, wobei ich davon aber eher weniger ausgehe.
Hey conditional comments etc sind im Grunde nur Browserweichen. Es gibt da unzählige Möglichkeiten ich selbst nutze meist sogenannte "css-hacks". Damit kannst du einzelne Styles spezifisch für jeden Browser anwenden.
Wie ist denn die Adresse deiner Website, sodass man sich das Ganze einmal ansehen kann? Denn bevor man solche Verschiebungen auf die unterschiedlichen "Interpretationsarten" der Browser schieben kann muss man erst einmal sehen ob es nicht einen Fehler bzw. eine "Ungünstigkeit" im Code gibt.
Gruß
Phos
All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···
@toast wie meinst du das mit den Blockelementen?
und wegen dem stylesheet... wollt ihr euch wirklich durch das ganze Stylesheet kämpfen oder soll ich nur die Passagen mit background-images posten? weil außer Backgrounds hab ich keine Bilder auf meiner Page.
und
@phosGEN
ich würde dir ja gerne einen Link geben aber
die Page ist noch nicht online und mein Webspace genauso wenig mach den Admins Dampf und ich schick der einen Link
mfg inceptor
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Inceptor« (29. Mai 2011, 22:21)
Am besten brauchen wir sowhl den HTML als auch den CSS Part komplett (vielleicht als zip?). Am besten wäre es natürlich Live im Browser, da man dort mit Tools wie Firebug, Dragonfly etc. wesentlich schneller zum Ziel kommen kann. Aber wenn das nicht möglich ist dann heisst es wohl warten oder in den sauren Apfel beißen und das Ganze am editor durchforsten.
Gruß
Phos
All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>MPW ===> Mein Platz Im Web <===</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<linkrel="shortcut icon"href="mpw-favicon.ico">
<link rel="stylesheet" type="text/css" href="mpw.css" />
</head><body><divid="body"><!--__________________________________________________________________________________________________________________--><divid="oberteil"><divclass="rahmen-rechts"><divid="kopfleiste"><pid="logo"><ahref="mpw-home.php"title="MPW - Home"><spanid="span1">MEIN-</span><spanid="span2">PLATZ-</span><spanid="span3">IM-</span><spanid="span4">WEB</span></a><ahref="https://www.webmasterwork.com"title="WebmasterWork - Webspace-Hoster"target="_blank"id="wmw"><b>.WMW.CC</b></a></p><divid="list"><ulid="list-ul"><liid="active"><ahref="#">Home</a><tablecellspacing="10px"class="sublevel"><tr><thcolspan="10">Home</th></tr><tr><td><ahref="#">Hauptseite</a></td><td><ahref="#">Gästebuch</a></td><td><ahref="#">Feedback</a></td><td><ahref="http://www.facebook.com"target="_blank">Facebook</a></td><td><ahref="#">Kontakt</a></td></tr></table></li><li><ahref="#">Inhalt</a><tablecellspacing="10px"class="sublevel"><tr><thcolspan="10">Inhalt</th></tr><tr><td><ahref="#">Platzhalter</a></td><td><ahref="#">Platzhalter</a></td><td><ahref="#">Platzhalter</a></td><td><ahref="#">Platzhalter</a></td></tr></table></li><li><ahref="#">Multimedia</a><tablecellspacing="10px"class="sublevel"><tr><thcolspan="10">Multimedia</th></tr><tr><td><ahref="#">Filme</a></td><td><ahref="#">Musik</a></td><td><ahref="#">Bilder</a></td></tr></table></li><li><ahref="http://browsershots.org/"target="_blank">Browsershots</a><tablecellspacing="10px"class="sublevel"><tr><thcolspan="10">Browsershots</th></tr><tr><td><ahref="#">Legen...</a></td><td><ahref="#">...wait for it...</a></td><td><ahref="#">...dary</a></td></tr></table></li></ul></div></div></div></div><!--___________________________________________________________________________________________________________________--><divid="mittelteil"><divid="left"><divclass="rahmen-un"><divclass="rahmen-rechts"><divclass="re-un-ecke"><divclass="li-un-ecke"><divid="special-nr1"><tableid="left-table"><tr><tdclass="button"><ahref="#">Hauptseite</a></td></tr><tr><tdclass="button"><ahref="http://www.facebook.com/home.php"target="_blank">Facebook</a></td></tr><tr><tdclass="button"><ahref="#">Gästebuch</a></td></tr><tr><tdclass="button"><ahref="#">Feedback</a></td></tr><tr><tdclass="button"><ahref="#">Kontakt</a></td></tr></table></div></div></div></div></div></div><!--___________________________________________________________________________________________________________________--><divid="right"><divclass="rahmen-un"><divclass="rahmen-rechts"><divclass="re-un-ecke"><divclass="li-un-ecke"><formaction="mpw-home.php"method="post"><tableid="formular"><tr><tdclass="formular"><input type="text" name="user-id" class="pass" value="User-ID" /></td></tr><tr><tdclass="formular"><input type="password" name="pass" class="pass" value="Passwort" /></td></tr><tr><tdclass="formular"><input type="submit" value="Absenden" id="send" /></td></tr></table></form></div></div></div></div></div><!--___________________________________________________________________________________________________________________--><divid="inhalt"><h2>Hauptseite</h2>
<?php
if (($_POST['pass'] == "passwort") && ($_POST['user-id'] == "HighTide")) { ?>
<pclass="lorem-ipsum">Das hier soll mein persönlicher Platz im Web werden, da ich auf vielen Seiten die Individualität vermisse, die ich mir hier zum Beispiel mit einer eigenen Linksammlung schaffen möchte. Außerdem sind noch andere Features vorgesehen , die aber erst erdacht und gescriptet werden müssen. Aber alles in allem macht mir das ja auch Spaß, weswegen ich hierbei nicht so schnell locker lassen werde :-D</p>
<?php }
elseif (isset($_POST['pass'])) { ?>
<pclass="lorem-ipsum">haha! falsch geraten</p>
<?php
}
?>
</div></div><!--___________________________________________________________________________________________________________________--><divid="impressum"><divid="div-impressum"><divclass="rahmen-ob"><divclass="rahmen-rechts"><divclass="re-ob-ecke"><divclass="li-ob-ecke"><ahref="#">Impressum</a></div></div></div></div></div></div></div></body></html>
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »Inceptor« (30. Mai 2011, 19:16)
So ich hoffe ihr könnt damit was anfangen! Wenn es Fehler gibt oder Stellen an denen man denselben Effekt auch leichter oder besser erreichen kann, dann zögert bitte nicht eure Verbesserungsvorschläge zu posten!
Vielen Dank an alle die sich jetzt die Mühe machen das jetzt durchzulesen.
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Inceptor« (30. Mai 2011, 18:44)
Puhhh...dein Quelltext ist echt viel zu komplex für so ein einfaches Layout. DU hast da so viele Objekte die einander bedingen das du den Überblick verlierst. Zudem vermischt du alle Arten von angaben. Mal hast du % mal px mal gibst du feste Höhen an einmal wieder nicht..du musst dir eine Spur aussuchen und dich daran halten. Umso ungenauer du arbeitest umso größer ist die Warscheinlichkeit, dass die Browser da Probleme machen.
Was jetzt dein Problem anbelangt solltest du dem Objekt "#logo" mal eine feste Höhe von z.b. 40px zuweisen. Dann sieht es schon ziemlich gleich aus.
Denn jetzt orientiert es sich an der Schriftgröße, die wiederum nicht in jedme Browser gleich dargestellt wird. Ist aber wie gesgat nur ein Anhaltspunkt.
Gruß
Phos
All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···
hmm das Blöde ist leider ich weiß nicht wie man die Sache einfacher gestalten könnte!
und wegen den Vermischten % und px Angaben... ich habe versucht mich immer daran gehalten, die Vertikalen mit festen Höhen zu versehen :sprich px und alle horizontalen Längen durch %-Angaben variabel zu halten, sodass die Website auch auf kleineren Bildschirmen mit niedrigeren Auflösungen 800x600 anzeigbar bleibt. Und deswegen auch die selektoren max- bzw. min-width. Aber wie gesagt ich bin immer offen für Neues... Ich wäre dir also dankbar wenn du mir sagen könntest wie man das Stylesheet vereinfachen könnte.
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Inceptor« (1. Juni 2011, 08:05)
Meine Erfahrung ist, dass man mit prozentualen Werten relativ gut fahren kann (um die Breite, wie Du schon angemerkt hast, variabel zu gestalten). Für weitere Angaben empfehle ich für gewöhnlich em (so z.B. für min-width und max-width). Mit Pixeln arbeite ich maximal bei border, da em gerne ma Rundungsfehler abliefert (0.1em z.B.).
Wenn man das Design allerdings vorher genau durchgeht, stellt man relativ schnell fest, dass man gerade in der Höhe eher selten konkrete Werte braucht (ist auch so bei Deinem Design).
Ansonsten noch nen Tipp für Deine Navigation. Die würde ich zum Beispiel statt mit einer Tabelle mit einer Liste (ul) gestalten.
Lasse mich bei meinen Aussagen auch gerne verbessern (gerade bei Größenangaben gehen ja die Meinungen weit auseinander ).
Gruß, Toast
Edit: Ne weitere Sache. Hast Du vier verschieden Span-Elemente für die Schrift "Mein Platz im Web" verwendet? Wenn ja, wieso. Die Schriftart bleibt ja gleich. Das müsste doch eigtl. auch mit einem zu erledigen sein.
ich kann Toast zustimmen, man sollte schon nach Möglichkeit mit % und em-Werten in CSS arbeiten. Für Rahmen nehme ich aber auch Pixel-Angaben. Von Tabellen würde ich wegen der Barrierefreiheit aber abraten, solange es auch anders geht.
Meine Erfahrung ist aber, dass du nach Möglichkeit niemals zu viele Elemente bzw. deren Größe in Pixeln festlegen solltest und den Rest in %. Entweder so gut wie alles in %-Angaben oder so viel wie möglich.
Die Aussage ist so jedoch nicht ganz korrekt. Sonst hätte em nämlich keinen Vorteil gegenüber Pixel. Der Vorteil an em ist, dass sich der Pixelwert, der ein em ist, mit der Änderung der Schriftgröße ändert.
Ist die Schriftgröße 100% (in den meisten Browsern entspricht dies 16px), dann ist ein em auch 16px groß. Erstelle ich nun einen Div-Container, der 10em breit ist, ist dieser 160px breit. Wenn die Schriftgröße, z.B. durch den Nutzer, geändert wird, ändert sich auch der Wert, den 1em annimmt. So kann man gut Bilder anhand der Schriftgröße mitverändern (bei einer Navigation würde die Schrift nicht über das Bild hinaus gehen). Worauf man aber achten muss ist, dass wenn ich in einem Div-Container ne kleiner Schriftgröße habe, auch alle em-Werte innerhalb dieses Containers kleiner sind. Folglich kann etwas "verrutschen" o.ä. Dafür würde sich dann anbieten mit span zu arbeiten, da dadurch, wenn man es wieder schließt, der Rest unberührt bleibt.
Edit: Ne weitere Sache. Hast Du vier verschieden Span-Elemente für die Schrift "Mein Platz im Web" verwendet? Wenn ja, wieso. Die Schriftart bleibt ja gleich. Das müsste doch eigtl. auch mit einem zu erledigen sein.
Ich habe jedes Wort in einen einzelnen span genommen, weil ich für jedes Wort eine eigene hoverfarbe festlegen wollte (siehe in der css-datei)
und wegen der Navigation... anfangs hatte ich die Sache auch ohne Tabelle und nur mit einer weiteren ul aber da hat mich irgendetwas gestört... komm aber jetzt nicht mehr darauf was das war
und was die Größeneinheiten angeht vivalamusica
Zitat
Zitat von vivalamusica:
Meine Erfahrung ist aber, dass du nach Möglichkeit niemals zu viele Elemente bzw. deren Größe in Pixeln festlegen solltest und den Rest in %. Entweder so gut wie alles in %-Angaben oder so viel wie möglich.
mein Problem mit em ist einfach ich kann mir das so schlecht als größe vorstellen mit Pixeln kann ich in der Hinsicht viel mehr anfangen...
was macht denn den gravierenden Unterschied zwischen em und px aus???
Aber ich finde die Ratschläge von euch toll und ich werde versuchen sie umzusetzten... wenn ich soweit mit der Seite fertig bin werde ich das Ergebniss mal im Feedbackforum präsentieren
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Edit: Ne weitere Sache. Hast Du vier verschieden Span-Elemente für die Schrift "Mein Platz im Web" verwendet? Wenn ja, wieso. Die Schriftart bleibt ja gleich. Das müsste doch eigtl. auch mit einem zu erledigen sein.
Ich habe jedes Wort in einen einzelnen span genommen, weil ich für jedes Wort eine eigene hoverfarbe festlegen wollte (siehe in der css-datei)
und wegen der Navigation... anfangs hatte ich die Sache auch ohne Tabelle und nur mit einer weiteren ul aber da hat mich irgendetwas gestört... komm aber jetzt nicht mehr darauf was das war
[...]
was macht denn den gravierenden Unterschied zwischen em und px aus???
[...]
Ok. Arbeiten wir uns da mal durch .
Mit der Span-Geschichte: Ok, ich hatte die span-Eigenschaften aus irgend einen Grund nicht gefunden. Wahrscheinlich übersehen, aber so ist das dann ja korrekt (wobei, wenn es nur um die Hover-Farbe geht, wieso dann nicht mit a:hover?).
Was Dich jetzt an einer Liste gestört haben könnte, wundert mich dann doch nen bisschen. Generell sollte man da alles umstellen können (hattest Du evtl. nicht list-style: none gesetzt?).
Zu dem Unterschied zwischen em und px gibts im Internet recht viele Dokumente, auch bei SELFHTML: http://de.selfhtml.org/css/formate/wertz….htm#numerische.
Gut kann man das an folgendem Beispiel erläutern:
Nehmen wir an, Du machst einen Button. Dieser ist 160px breit. Über diesem Button schreibst Du nun einen Link, der den Button maximal ausfüllt. Nun passt alles perfekt. Wenn der Nutzer jetzt die Schriftgröße jedoch verändert, geht der Text, der vorher genau in dem Button gepasst hat, über diesem hinaus. Genau das wäre Dir mit em nicht passiert. Wenn der Button 10em breit ist, ist er bei einer Schriftgröße von 16px 160px breit. Vergrößere ich nun die Schrift, wird auch der Button größer, wodurch der Text nicht mehr über den Button hinausgeht.
Hast du denn den Tipp aus meinem letzten Post einmal umgesetzt um zu sehen was es bringt?
Hauptproblem ist, das alle Browser mit einem Standard Set an CSS Werten daher kommen. Diese Sets unterscheiden sich voneinander. Deshlab "nullt" man zum Bsp. auch ersteinmal alle Padding/Margins bevor man los legt. DU hast aber Elemente die sich nur an ihrem Inhalt orientieren und sich trotzdem auf die Elemente darunter auswirken. Daher die Verscheibungen. Wenn du aber eine Feste Grße vergibst, umgehst du das Problem der "Browserinterpretationen" und deine Verschiebungen verschwinden.
Was Prozentuale Angaben angeht so muss man da sehr vorsichtig sein..man muss genau wissen wie man sie einsetzt und vorher das gesamte Layout gut durch kalkulieren. Deshlab würde ich das für einen Anfänger ersteinmal nicht empfehlen oder nur in stark vereinfachter Form.
Gruß
Phos
All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···
Hast du denn den Tipp aus meinem letzten Post einmal umgesetzt um zu sehen was es bringt?
Wegen deinem Tipp... ich werde ihn sobald ich kann umsetzten aber momentan ist die Virtuell Maschine in der ich programmiere nicht mehr zu gänglich keine Ahnung wieso aber bis ich das geregelt habe dauert es wahrscheinlich noch etwas... wenns soweit ist werde ich Bericht erstatten
und @ toast wegen der Schriftgröße... das mit der Größenveränderung des Buttons ist ja ganz toll aber empfiehlt sich die Längenangabe em auch für divs und um höhen oder Breiten festzulegen.
EDIT: @PhosGEN
ich habe das jetzt mal getestet und das Problem besteht immer noch -.- es ist ein Unterschied von genau 1px je nachdem wie ich logo von der höhe her definiere
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Inceptor« (3. Juni 2011, 22:19)
Hmm...bei mir hat es das Problem gelöst..wobei die Differenz bei mir 3-4px betragen hat.
Dein Konstrukt ist mir etwas zu komplex als das ich es auseiander nehmen möchte. Da geht es schneller das Ganze sauber neu aufzusetzen.
Ich kann jetzt nichts versprechen aber ich schau mal ob ich dir den oberen Teil neu basteln kann. Von der Struktur her soll es ja sicherlich so bleiben, nehme ich an.
Gruß
Phos
All rights reserved, all wrongs observed.
···•(_.·´¯)··•¦PhoS¦•··(¯`·._)•···
Das Ganze ist natürlich auch für normale Divs sinnvoll einsetzbar. Die Höhe ist bei mir meist auf auto (liegt daran, dass ich nach unten hin offen programmiere und meist das nächste Element bloss drunter setze). Für die Breitenangaben benutze ich sehr oft %-Werte. Die em-Angabe kommt bei mir in erster Linie bei (kleineren) Grafiken (der Header wird wieder über % und auto-height gelöst) vor.
Eine Angabe von em kann aber auch bei Divs ganz sinnvoll sein. Wenn ich jetzt nen Text in einem Div schreibe, dass sich prozentual ändert, kann der Text mal über 20 Zeilen und mal über 2 Zeilen gehen. Je nachdem. Wenn ich die Größe des Divs per em angebe, bleibt, im Normalfall (von Rundungsfehlern abgesehen), die Anzahl der Zeilen und Worte pro Zeile, auch bei Größenänderung, identisch. Da ich aber diesbezüglich mit %-Werten arbeite (nur min-, und max-width werden per em festgelegt), benutze ich relativ selten em-Werte in Divs (v.a. da man em nicht zuverlässig mit % verbinden kann, da sich der %-Wert mit Browserfenstergröße ändert, der em-Wert jedoch nicht). Wo ich em-Werte jedoch recht häufig nutze ist bei Padding (wobei sich da auch inziwschen die %-Werte durchgesetzt haben... wenn ich das so überlege).
Um die ganzen, eventuell anallenden Probleme zu beseitigen, kann jedoch eine, auch recht grobe, Skizze des späteren Aufbaus vom Vorteil sein.
Nen weitere Vorteil, wenn man nicht Browserfenstergrößenabhängig (also mit %-Werten) arbeitet, kann man durch die em-Werte ein sehr flexibles und stets gleich aussehendes Design entwickeln, das der Nutzer selber vergrößern und verkleinern kann (Durch Buttondruck oder Schriftgrößenveränderung, wobei der Button diese bewirken würde).
Dank dir Phos für deine Bemühungen
und dir natürlich auch Toast
nochmal @Phos ... am Anfang waren die Verschiebungen, wie bei dir auch so etwa 2-4px groß aber nachdem ich deinen Tipp umgesetzt habe ist der Unterschied wie ich oben schon angesprochen habe auf einen Pixel geschrumpft
und ich teste meine Seite in FF Opera IE Safari und Chrome. aber das hatte ich ja auch schon oben erwähnt.
und @toast ... wenn man die posts von dir so liest denkt man, das em eher nicht so geschickt ist, weil man ja auch % zur verfügung hat ;-) und btw wo kann man eigentlich die Schrift vergrößern?? ich hab mich mal durch sämtliche einstellungen von Opera und dem Ie durchgekämpft und nichts gefunden außer beim IE... aber da haben die Einstellungen nichts an meiner Seite verändert nicht mal die Schriftgröße
mfg Inceptor
mein unfertiges Projekt findet ihr hier: Viewport
73%
22%
19%
11%
6%
Spoiler
.
mach den Admins Dampf und ich schick der einen Link 
).
mit Pixeln kann ich in der Hinsicht viel mehr anfangen...Zitat
Datenbanken »
Mysql: AVG() Durchschnitt von Differenzen berechnen ?
(3. Juni 2008, 16:54)