22.08.2004, 12:50
|
|||
|
|||
Zitat:
Versuchs mal so:   Wie gesagt, genaue Angaben bitte selber austüfteln....... Die absolute Positionierung der Bilder hat bei mir leider den Effekt, dass der IE das rechte Hintergrundbild nicht anzeigt. Er tut es aber, wenn man beiden Schachtelcontainern ein height:100% mitgibt. Dazu braucht man das im äußeren übrigens nicht mal definieren.... nun ja, IE....  Mit logisch Denken braucht man bei dem nicht anfangen, da hilft nur "testen und tricksen". Aber so sollte es eigentlich klappen! Noch ne Frage an die anderen: warum macht der IE 5 das Ganze so furchtbar schmal? Sind doch keine Paddings und Borders im Spiel? 
|
| Sponsored Links |
|
22.08.2004, 14:17
|
|||
|
|||
|
Okay - die Apokalypse naht - siehe hier >.<:
 Es ergeben sich 3 Probleme, von denen ich zwei selbst mit PS lösen kann: 1. Dass ich die roten Grafiken oben innen transparent gestaltet hab, zahlt sich nun als Fehler aus, da die Balken nun unter die roten Grafiken rutschen. Lösung: Ich mach den Bereich einfach weiß und net transparent 2. Die vertikalen Balken passen nicht mehr mit den roten Grafiken zusammen, d.h. der Übergang, wie man sieht. Lösung: Meine Wenigkeit bearbeitet das große psd und sliced es neu 3. Und nun sind wir beim größten und erschreckendsten Problem: Die Grafik verschiebt sich trotzdem so, dass sie mit dem Balken keine Einheit mehr bildet - war das bei dir im IE auch so? Denn angezeigt wird sie bei mir --> IE 6 Hast du da noch nen Lösungsvorschlag? Hier mal der Quelltext - ich werd die grafischen Arbeiten aber erst nach deinem Post durchführen. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
body {background-color:#FFFFFF;}
#bigdiv { position:relative;
margin:5% 10% 0 10%;
background:#fff url(Streifenh.gif) repeat-x top;
}
#leftdiv {
background:url(Streifenv.gif) repeat-y left;
}
#rightdiv {
background:url(Streifenv.gif) repeat-y right;
}
#inhalt {
padding-top:100px;
margin:0 190px;
min-height: 400px;
}
*html #inhalt {height:400px;} /*nur für den IE*/
-->
</style>
</head>
<body>
<div id="bigdiv"> [img]ol.gif[/img] [img]or.gif[/img]
<div id="leftdiv">
<div id="rightdiv">
<div id="inhalt"> und hier der Inhalt hin</div>
</div>
</div>
</div>
</body>
</html>
Ich slice einfach wie folgt: die roten Grafiken bilden mit den vertikalen Balken eine Einheit und nur der obere horizontale Balken wird mit dem repeat: x individual verbreitert. So wies aktuell geplant ist, wärs natürlich besser, aber notfalls halt so, oder? Blackü
|
| Sponsored Links |
|
22.08.2004, 18:10
|
|||
|
|||
|
Zitat:
-> Tipp für's Designen mit CSS: besorge Dir mindestens einen zweiten Browser (Mozilla oder Opera, am besten beide, für Mozilla tuts auch der kleine Bruder, der Firefox) und entwickle das Design zuerst in dem. Später für den IE anpassen, wenn nötig. Der IE kann einfach nur sehr wenig CSS und interpretiert es meistens falsch. Mit dem lernst Du es nicht. Deine Slice-Idee ist schlecht, weil Du ja die vertikalen Streifen zum kacheln brauchst, die Logos sollen sich hingegen nicht kacheln. Mein Vorschlag: Schneide den unteren und inneren Rand des Logos sauber aus (am roten entlang freistellen) und speichere als gif mit transparentem Hintergrund. Dann ist der Übergang ziemlich egal und es kommt nicht so auf ein pixel an. Paß aber auf, dass keine Verläufe dabei sind, die geben so unschöne Artefakte. -> saubere Ränder sind wichtig. Ansonsten sieht es bei mir in allen Browsern gleich aus mit Ausnahme vom IE 5, der das Ganze schmaler macht. -> ich versteh nur nicht so recht, wieso..... Aber um den kümmern wir uns zum Schluß, da tüftel ich noch mal was aus und dann wird der ausgetrickst. 
|
|
22.08.2004, 19:13
|
|||
|
|||
|
Okay, werds mal versuchen, aber:
Zitat:
EDIT: Sache mit Freistellen ist kein Problem, da jede rote Grafik in ner extra Ebene platziert ist
|
|
22.08.2004, 23:43
|
|||
|
|||
|
Zitat:
Nur eben generell: geh nicht vom IE aus, sondern von Browsern, die CSS auch können, und passe hinterher für IE an, falls das nötig ist (hier z.B. die height:100% in den beiden Schachtelcontainern - ist für Firefox und Opera nicht nötig, ebensowenig der Trick, um IE zu einer Mindesthöhe zu bewegen, weil der eben min-height nicht kann.....).
|
|
23.08.2004, 18:55
|
|||
|
|||
|
Jo - eh klar - die Grafiken stimmten in sich nimmer - ich setz mich jetzt ran und hoffe, nachher noch n Ergebnis vorzeigen zu können
|
|
24.08.2004, 20:59
|
|||
|
|||
|
Status:
Hatte heut leider keine bzw. nur wenig Zeit - deshalb konnte ich bisher die Grafiken nur entsprechend neu ordnen und muss mich jetzt ans css machen - mir ist beim Überfliegen nur noch eine Sache aufgefallen: Du hast in deinem Quelltext den rechten Div innerhalb des linken Divs platziert!? Warum? Sollten rein logischerweise nicht beide "gleich" innerhalb des bigdivs definiert sein, also so: <div id="bigdiv"> <div id="leftdiv"> </div> <div id="rightdiv"> </div> </div> Blacky
|
|
24.08.2004, 23:37
|
|||
|
|||
|
Zitat:
Probier am besten selber aus, was passiert, wenn Du es so machst, wie eben von Dir vorgeschlagen - testen und rumprobieren, so lernt man CSS - anders geht es nicht. Und immer in mehreren Browsern gucken. Und noch was: wir sind noch nicht fertig - es braucht noch weitere Container, die da eingeschachtelt werden müssen (1-2, kommt auf Deine Pläne an.....) - überleg einfach mal, wo und wie die dahin müssen...... Ist schon eine ziemliche Schachtelei, aber anders krieg ich zumindest Deine Grafiken da nicht alle unter, so dass das Ganze auch noch flexibel bleibt und die Optik in allen Browsern stimmt.
|
|
25.08.2004, 18:56
|
|||
|
|||
|
http://www.mv-herlikofen.de/index2.htm
Voilà Nyo - die roten Balken hab ich nur unsauber hingekriegt und es scheinen auch Teile des Effekts draufgegangen zu sein - aber das soll uns mal net störn - werd da noch nach Verbesserungen schaun - die Balken hab ich nochmal auf ne andere Art und Weise wie bisher mit PS extrahiert - dass zumindest da die Effekte einigermaßen erkennbar erhalten bleiben - So harmonierts jetzt in Mozilla und Opera einwandfrei - allerdings muss noch ne Mindestbreite angegeben werden, die verhindert, dass das Layout "zu weit" zusammengeschoben werden kann - da ist vielleicht der Ansatzpunkt für nen weiteren Div - Container - den könnte man zwischen den beiden roten Grafiken platzieren und dadurch für den Mindestabstand sorgen - ein weiterer Div-Container müsste dann noch für die Navi definiert werden. Soweit zu meiner Theorie *g* Großes Prob: Beim IE harmoniert die Sache so immer noch nicht? Wolltest da dann mitm z-index (Zitat  nachhelfen *g*
|
| Sponsored Links |
|
25.08.2004, 20:23
|
|||
|
|||
|
Zitat:
Der IE kann nicht rechnen - man muß ihm daher nochmal extra sagen, dass der Container 80% sein soll. Bessere Browser rechnen selber.... Wenn man das macht, dann stimmt der Container in der Breite -> aber: das rechte Hintergrundbild wird nicht mehr angezeigt. Um das anzuzeigen, braucht der IE die Angabe 100% height -> komischer Browser, aber damit müssen wir leben. Gut, dann paßt alles im IE 6 - nicht aber im IE 5, der macht es immer noch zu schmal, obwohl ich es nicht verstehe. Erst wenn man 100% angibt, macht der es richtig - die anderen Browser dann aber nicht mehr. Wir brauchen also einen Hack! Ich hab mich mal für den Tan-Hack entschieden, der so aussieht: Code:
* html #bigdiv /* durch das Sternchen vorweg wird das nur von den IEs interpretiert*/
{
width: 100%; /*Wert für den IE5*/
w\idth: 80%; /*Wert für den IE6*/
}
Alles zusammen sieht jetzt bei mir so aus und funktioniert in Mozilla, Opera und IE 5-6: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Musikverein Herlikofen 1930 e.V.</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
<!--
body {background-color:#FFFFFF;}
#bigdiv { position:relative;
margin:5% 10% 0 10%;
background:#fff url(http://www.mv-herlikofen.de/streifenh.gif) repeat-x top;
}
/* Tan Hack */
* html #bigdiv /* dies wird nur von den IEs interpretiert*/
{
width: 100%; /*Wert für den IE5*/
w\idth: 80%; /*Wert für den IE6*/
}
#leftdiv {
background:url(http://www.mv-herlikofen.de/streifenv.gif) repeat-y left;
height:100%; /*braucht der IE*/
}
#rightdiv {
background:url(http://www.mv-herlikofen.de/streifenv.gif) repeat-y right;
height:100%; /*braucht der IE*/
}
#inhalt {
padding-top:100px;
margin:0 190px;
min-height: 400px;
}
*html #inhalt {height:400px; } /*nur für den IE*/
-->
</style>
</head>
<body>
<div id="bigdiv">
[img]http://www.mv-herlikofen.de/ol.gif[/img]
[img]http://www.mv-herlikofen.de/or.gif[/img]
<div id="leftdiv">
<div id="rightdiv">
<div id="inhalt"> und hier der Inhalt hin</div>
</div>
</div>
</div>
</body>
</html>
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Linear-Darstellung
