PSD-Tutorials.de
Forum für Design, Fotografie & Bildbearbeitung
Tutkit
Agentur
Hilfe
Kontakt
Start
Forum
Aktuelles
Besonderer Inhalt
Foren durchsuchen
Tutorials
News
Anmelden
Kostenlos registrieren
Aktuelles
Suche
Suche
Nur Titel durchsuchen
Von:
Menü
Anmelden
Kostenlos registrieren
App installieren
Installieren
JavaScript ist deaktiviert. Für eine bessere Darstellung aktiviere bitte JavaScript in deinem Browser, bevor du fortfährst.
Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen
alternativen Browser
verwenden.
Antworten auf deine Fragen:
Neues Thema erstellen
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
[CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite
Beitrag
<blockquote data-quote="anoX" data-source="post: 1037285" data-attributes="member: 322694"><p><strong>AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite</strong></p><p></p><p>Ja .. willkommen in der Welt der Webdesigner. ^^ </p><p></p><p>Warum IE und Co verschiedene Sprachen sprechen kann ich bis heute nicht wirklich nachvollziehen, aber was soll's.</p><p></p><p>Wäre sonst auch echt zu langweilig, wenn alles gleich funktionieren würde. :muede: <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>Also denn. Wie schon von einigen erwähnt, interpretiert der IE gewisse Abstände anders als der FF & Co und umgekehrt. Nehmen wir bei dir z.B. den DIV [code]#index2-05_[/code] (die Linie unter dem Logo).</p><p></p><p>Der Code lautet:</p><p>[code]#index2-05_ {</p><p> position:absolute;</p><p> left:72px;</p><p> top:65px;</p><p> width:313px;</p><p> height:14px;</p><p>}[/code]Die absolute Positionierung wird vom IE also nun anders interpretiert. Um dem Abhilfe zu schaffen, hilft bei dem DIV z.B. folgender "Hack":</p><p></p><p>[code]*:first-child+html #index2-05_ { top:64px; }[/code]Hacks werden nicht gern gesehen und von mir persönlich auch ungern genutzt, aber manchmal kommt man nicht drum herum. Allerdings sind viele - insbesondere deine - nicht nötig, wenn eine valide CSS-basierte Programmierung gegeben ist.</p><p></p><p>Der o.g. Hack gilt NUR für den IE7 und ggfl. höher (also IE8 - nicht getestet). Du müsstest nun für alle anderen Divs, die im IE "falsch" dargestellt werden ebenfalls diesen Hack einbauen und die Höhe, also das "top" entsprechend verändern.</p><p></p><p>Der fertige Code sähe dann so aus:</p><p></p><p>[code]</p><p>#index2-05_ {</p><p> position:absolute;</p><p> left:72px;</p><p> top:65px;</p><p> width:313px;</p><p> height:14px;</p><p>}</p><p></p><p> *:first-child+html #index2-05_ { top:64px; }</p><p>[/code]Ich weiß, dass Du vermutlich stolz drauf bist, dass die Seite an sich schon fertig aussieht und Du so weit gekommen bist. Ich rate dir jedoch, dich mit CSS zu befassen und selber(!) die Grafiken für die Programmierung vorzubereiten. Aus Erfahrung kann ich dir sagen, dass Du irgendwann nicht drum herum kommst, weil Du dich weiterentwickeln möchtest und irgendwann einsiehst, dass das automatische Slicen so seine Tücken hat. Siehst Du ja jetzt. <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>Der Fehler liegt im Prinzip daran, dass die Slices unterschiedlich hoch sind, Du viel zu viele einzelne - oft unnötige - Bilder hast und demnach viel positionieren musst.</p><p></p><p>Dabei kämst Du mit nur 5 (FÜNF) Grafiken vollkommen aus! Hier habe ich dir mal gezeigt, wo es sinnvoll wäre zu slicen: </p><p></p><p></p><p></p><p><a href="http://img20.imageshack.us/i/64254446.jpg/" target="_blank">[img=http://img20.imageshack.us/img20/7360/64254446.th.jpg]</a></p><p></p><p>-> Grafik 1: Top mit dem Logo und OHNE den Kontaktdaten!</p><p></p><p>Die Kontaktdaten sollten zu markieren sein. Außerdem machst Du so den Suchmaschinen keine Freude, bzw. dem Kunden, da quasi kein Text auf der Seite ist, der ausgelesen werden kann. Das Ergebnis wäre also ein mehr als schlechter Platz bei den gängigen Suchmaschinen. Infos müssen mühsam abgeschrieben werden etc. pp.</p><p></p><p>-> Grafik 2 & 3 für den Navigationsbereich. Nimm EINE Grafik für die Navigation. Die Button kannst Du hinterher mit Hilfe von CSS so schieben, dass sie passend drüber liegen. Für den hover-Effekt ebenfalls EINE Grafik nutzen. Wie das genau funktioniert, erkläre ich gerne, wenn's so weit ist.</p><p></p><p>-> Grafik 4 für den Contentbereich. Hier hast Du das Wasserzeichen drin. Auch hier: lass den Text Text sein! <img src="/styles/default/xenforo/smilies/zwinker.gif" class="smilie" loading="lazy" alt=";)" title="Wink ;)" data-shortname=";)" /></p><p></p><p>-> Grafik 5 (muss nicht) für den Footer. Die Button kannst Du als Text darstellen. Hier sind eigentlich keine Grafiken nötig. Die Linie kannst Du mit Hilfe von CSS darstellen - muss aber nicht.</p><p></p><p>Wie Du siehst, kämst Du mit 4-5 Grafiken für das Layout aus. Wichtig hierbei: nimm JPG - kein PNG. PNG werden vom IE6 nicht interpretiert. Dafür ist wieder ein "Hack" nötig, damit der IE versteht, was Du von ihm willst. Da Du keine Transparenz benötigst, ist es kein Problem auf .jpg umzusteigen und diese zu verwenden.</p><p></p><p>Mein Rat: Mache die Seite so fertig - mit Hilfe von ImageReady. Anschließend beginne, die Seite komplett selbstständig umzusetzen. Schneide die Grafiken selbst. Arbeite mit CSS. Baue einen schlanken und validen Code. So hast Du einen vorher - nachher - Vergleich und siehst, wie es im Endeffekt aussehen soll.</p><p></p><p>Ich hoffe, ich konnte dir ein wenig helfen. Bleib am Ball und bei Fragen einfach Fragen. <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class="smilie smilie--sprite smilie--sprite1" alt=":)" title="Smile :)" loading="lazy" data-shortname=":)" /></p></blockquote><p></p>
[QUOTE="anoX, post: 1037285, member: 322694"] [b]AW: [CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite[/b] Ja .. willkommen in der Welt der Webdesigner. ^^ Warum IE und Co verschiedene Sprachen sprechen kann ich bis heute nicht wirklich nachvollziehen, aber was soll's. Wäre sonst auch echt zu langweilig, wenn alles gleich funktionieren würde. :muede: ;) Also denn. Wie schon von einigen erwähnt, interpretiert der IE gewisse Abstände anders als der FF & Co und umgekehrt. Nehmen wir bei dir z.B. den DIV [code]#index2-05_[/code] (die Linie unter dem Logo). Der Code lautet: [code]#index2-05_ { position:absolute; left:72px; top:65px; width:313px; height:14px; }[/code]Die absolute Positionierung wird vom IE also nun anders interpretiert. Um dem Abhilfe zu schaffen, hilft bei dem DIV z.B. folgender "Hack": [code]*:first-child+html #index2-05_ { top:64px; }[/code]Hacks werden nicht gern gesehen und von mir persönlich auch ungern genutzt, aber manchmal kommt man nicht drum herum. Allerdings sind viele - insbesondere deine - nicht nötig, wenn eine valide CSS-basierte Programmierung gegeben ist. Der o.g. Hack gilt NUR für den IE7 und ggfl. höher (also IE8 - nicht getestet). Du müsstest nun für alle anderen Divs, die im IE "falsch" dargestellt werden ebenfalls diesen Hack einbauen und die Höhe, also das "top" entsprechend verändern. Der fertige Code sähe dann so aus: [code] #index2-05_ { position:absolute; left:72px; top:65px; width:313px; height:14px; } *:first-child+html #index2-05_ { top:64px; } [/code]Ich weiß, dass Du vermutlich stolz drauf bist, dass die Seite an sich schon fertig aussieht und Du so weit gekommen bist. Ich rate dir jedoch, dich mit CSS zu befassen und selber(!) die Grafiken für die Programmierung vorzubereiten. Aus Erfahrung kann ich dir sagen, dass Du irgendwann nicht drum herum kommst, weil Du dich weiterentwickeln möchtest und irgendwann einsiehst, dass das automatische Slicen so seine Tücken hat. Siehst Du ja jetzt. ;) Der Fehler liegt im Prinzip daran, dass die Slices unterschiedlich hoch sind, Du viel zu viele einzelne - oft unnötige - Bilder hast und demnach viel positionieren musst. Dabei kämst Du mit nur 5 (FÜNF) Grafiken vollkommen aus! Hier habe ich dir mal gezeigt, wo es sinnvoll wäre zu slicen: [U][/U] [url=http://img20.imageshack.us/i/64254446.jpg/][img=http://img20.imageshack.us/img20/7360/64254446.th.jpg][/url] -> Grafik 1: Top mit dem Logo und OHNE den Kontaktdaten! Die Kontaktdaten sollten zu markieren sein. Außerdem machst Du so den Suchmaschinen keine Freude, bzw. dem Kunden, da quasi kein Text auf der Seite ist, der ausgelesen werden kann. Das Ergebnis wäre also ein mehr als schlechter Platz bei den gängigen Suchmaschinen. Infos müssen mühsam abgeschrieben werden etc. pp. -> Grafik 2 & 3 für den Navigationsbereich. Nimm EINE Grafik für die Navigation. Die Button kannst Du hinterher mit Hilfe von CSS so schieben, dass sie passend drüber liegen. Für den hover-Effekt ebenfalls EINE Grafik nutzen. Wie das genau funktioniert, erkläre ich gerne, wenn's so weit ist. -> Grafik 4 für den Contentbereich. Hier hast Du das Wasserzeichen drin. Auch hier: lass den Text Text sein! ;) -> Grafik 5 (muss nicht) für den Footer. Die Button kannst Du als Text darstellen. Hier sind eigentlich keine Grafiken nötig. Die Linie kannst Du mit Hilfe von CSS darstellen - muss aber nicht. Wie Du siehst, kämst Du mit 4-5 Grafiken für das Layout aus. Wichtig hierbei: nimm JPG - kein PNG. PNG werden vom IE6 nicht interpretiert. Dafür ist wieder ein "Hack" nötig, damit der IE versteht, was Du von ihm willst. Da Du keine Transparenz benötigst, ist es kein Problem auf .jpg umzusteigen und diese zu verwenden. Mein Rat: Mache die Seite so fertig - mit Hilfe von ImageReady. Anschließend beginne, die Seite komplett selbstständig umzusetzen. Schneide die Grafiken selbst. Arbeite mit CSS. Baue einen schlanken und validen Code. So hast Du einen vorher - nachher - Vergleich und siehst, wie es im Endeffekt aussehen soll. Ich hoffe, ich konnte dir ein wenig helfen. Bleib am Ball und bei Fragen einfach Fragen. :) [/QUOTE]
Bilder bitte
hier hochladen
und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Zitate einfügen…
Authentifizierung
Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?
Antworten
Start
Forum
Sonstiges
Webdesign, Webentwicklung & Programmierung
Webdesign: HTML/CSS, Responsive Design, Sass...
[CS3] Internet Explorer macht Anzeige-Probleme mit geslice'ter Seite
Oben