|
|||
Warum ich glaubte, dass der Code net passt - die obere Leiste hats net angezeigt, aber nur, weil ich vergessen hab die absolute URI durch ne relative auszutauschen --> Ziel der absoluten Addy existiert nimmer
Beim aktuellen Stand gibts nur ein Prob - Darstellung im Großen und Ganzen bei Opera korrekt - nur wird beim zusammenschieben des Fensters auf der rechten Seite der Übergang zwischen roter Grafik und Rest des Balkens ersichtlich --> verschiebt sich - allerdings nur beim IE (6.0, anderen hab ich net) und leider au beim Mozilla 1.72 ;_; . Außerdem ist das hier ein anderer Fall wie bei der anderen Verschiebung - denn "damals" stimmten die Grafiken in sich nicht, hier handelt sichs nur um eine "ein-pixelgroße, temporäre Verschiebung". Hier der Code: 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(Bilder/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(Bilder/streifenv.gif) repeat-y left; height:100%; /*braucht der IE*/ } #rightdiv { background:url(Bilder/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]Bilder/ol.gif[/img] [img]Bilder/or.gif[/img] <div id="leftdiv"> <div id="rightdiv"> <div id="inhalt"> und hier der Inhalt hin</div> </div> </div> </div> </body> </html> http://www.mv-herlikofen.de/testindex5/index.htm Hier ein Screenie, ders verdeutlicht: |
Sponsored Links |
|
|||
Ja, so hab ich das gemeint!
Wenn Du aus den -57px einfach -58px machst, dann paßt es im IE und Mozilla, im Opera ist es dann aber um ein Pixel verschoben (jedenfalls zwischen 800 und 1024px Breite). Genau das hab ich gemeint, als ich Dir empfohlen hab, gifs zu nehmen, bei denen es nicht auf ein Pixel ankommt. So macht irgendein Browser mal einen Rundungsfehler beim Rendern, und schon verschiebt es sich ein wenig. Und das fällt halt auf und ist unschön. Eine echte Lösung hab ich da aber nicht. Stell es auf den IE ein, der wird immer noch am meisten genommen. Wenn es sich dann in anderen Browsern manchmal um 1 pixel verschiebt, dann ist das halt Pech. So, dann verschöner jetzt noch mal den Code, indem Du den Bildern class zuweist und lager die Positionierung aus (erstmal in den Head). Und dann warte ich auf Vorschläge für Menü und Inhaltsblöcke! |
|
|||
Unglaublich, dass bei mir auch gar nix funktioniert:
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(Bilder/streifenh.gif) repeat-x top; } #ol { display:block; position:absolute; top:-16px; left:-66px; } #or { display:block; position:absolute; top:-16px; right:-57px; } /* 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(Bilder/streifenv.gif) repeat-y left; height:100%; /*braucht der IE*/ } #rightdiv { background:url(Bilder/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]Bilder/ol.gif[/img] [img]Bilder/or.gif[/img] <div id="leftdiv"> <div id="rightdiv"> <div id="inhalt"> und hier der Inhalt hin</div> </div> </div> </div> </body> </html> EDIT: Sorry im Code-Block werden keine Editierungen interpretiert, sonst hätt ichs fett gemacht |
|
|||
No Comment *g*
Voilà, hab n ganzes Stück weitergemacht - durch die Ausrichtung, wie dus hier siehst, gibts auch nur im Mozilla das Ausrichtungsprob - allerdings zeigen Opera und der IE den linken Balken nicht mehr an, der Mozilla dagegen schon. Site: http://www.mv-herlikofen.de/testindex2/index.htm Code: 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"> <!-- #linkenavi {background-color:#FF0000; position:absolute; top:150px; left:20px; width:80px; } #navioben {background-color:#FF0000; position:absolute; top:50px; width:100%; } #uschrift {margin:0 55% 0 45%; } body {background-color:#FFFFFF;} #bigdiv { position:relative; margin:5% 10% 0 10%; background:#fff url(Bilder/streifenh.gif) repeat-x top; } .ol { display:block; position:absolute; top:-16px; left:-66px; } .or { display:block; position:absolute; top:-16px; right:-57px; } /* 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*/ font-family: Arial, Helvetica, sans-serif; } #leftdiv { background:url(Bilder/streifenv.gif) repeat-y left; height:100%; /*braucht der IE*/ } #rightdiv { background:url(Bilder/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]Bilder/ol.gif[/img] [img]Bilder/or.gif[/img] <div id="navioben"><p id="uschrift">Überschrift</p></div <div id="leftdiv"> <div id="linkenavi">Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test</div> <div id="rightdiv"> <div id="inhalt"> und hier der Inhalt hin</div> </div> </div> </div> </body> </html> |
|
|||
Zitat:
Dann tüftel mal noch ein wenig. Überlege mal, wofür wir diese drei ineinanderverschachtelten Container gebraucht hatten? Und noch was zum Menü selber: am sinnvollsten gestaltest Du das als Liste - lies mal ein wenig im Forum, da solltest Du einiges darüber finden. |
|
|||
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"> <!-- #linkenavi {list-style-type:none; background-color:#FF0000; position:absolute; top:150px; left:-25px; } #navioben {background-color:#FF0000; position:absolute; top:50px; width:100%; } #uschrift {margin:0 55% 0 45%; } body {background-color:#FFFFFF;} #bigdiv { position:relative; margin:5% 10% 0 10%; background:#fff url(Bilder/streifenh.gif) repeat-x top; } .ol { display:block; position:absolute; top:-16px; left:-66px; } .or { display:block; position:absolute; top:-16px; right:-57px; } /* 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*/ font-family: Arial, Helvetica, sans-serif; } #leftdiv { background:url(Bilder/streifenv.gif) repeat-y left; height:100%; /*braucht der IE*/ } #rightdiv { background:url(Bilder/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]Bilder/ol.gif[/img] [img]Bilder/or.gif[/img] <div id="navioben"><p id="uschrift">Überschrift</p></div> <div id="leftdiv"> <div id="rightdiv"> <div id="inhalt"> und hier der Inhalt hin</div> <div> <ul id="linkenavi"> [*]Menüpunkt [*]Menüpunkt [*]Menüpunkt [*]Menüpunkt [/list] </div> </div> </div> </div> </body> </html> So siehts grad aus. Hier die Addy: http://www.mv-herlikofen.de/testindex5/Index.htm Allerdings: im Mozilla und Opera wern die Schriftdefinitionen, so wie sie jetzt sin, das heißt die Schriftart, nicht übernommen - außerdem stellt mir der Mozilla den linken Menüdiv auch n bissel komisch dar, muss aber kein Problem sein, weil sie ja nachher nicht rot, sondern transparent sind Über die Angaben für Schriften werd ich mir eh nommal Gedanken machen - wohl eine dokumentweite ID definiern or so Gruß Fladdy |
|
|||
Mühsam ernährt sich das Eichhörnchen, aber o.k.. Weiter geht's im Workshop.
Hier ein paar Denkanstöße: Betrachte die drei Container #bigdiv, #leftdiv und #rightdiv mal als einen einzigen. Ich habe drei machen müssen, weil man pro Container nur einen Hintergrund definieren darf. Alles weitere passiert jetzt eigentlich innerhalb dieser Aussencontainer (die Bilder kannst Du im Quelltext dort lassen). Für das Menü würde ich einen extra Container definieren und dort die Liste hineinsetzen. Später kannst Du das Ganze noch verschönern (s. hier: http://css.maxdesign.com.au/listutorial/index.htm ) - aber für's erste lass das nochmal, zuerst muss die Grundstruktur sitzen. Du hast jetzt absolut positioniert. Das geht zwar, ist aber nicht nötig. Du könntest auch mit float:left positionieren (nachlesen, wie's geht!). Und überlege, wie dann der Inhaltscontainer positioniert werden muß - was ich gemacht hab, war nur schnell und vorläufig, noch nicht zuende gedacht. Und nochwas: Wie werden Überschriften mit HTML ausgezeichnet? So jedenfalls nicht: <p id="uschrift">Überschrift</p></div> Genug Hausaufgaben für die nächste Runde! - Ich hoffe, Du verstehst allmählich auch ein wenig, wie es funktioniert. Bezüglich der Schriften: da ist noch gar nichts definiert. Dokumentenweit kann das einfach im Body definiert werden. Bitte auch nachlesen. Machen wir später, wenn die Grundstruktur sitzt. Ach übrigens: das Forum hier hat eine Suchfunktion und fast alle Themen sind schon besprochen worden. Nutzen! |
Sponsored Links |
|
|||
Die Site oben hab ich auf meiner Suche nach Menüs mit Listen auch gefunden - ich hab die Überschrift in nen <h1>-Tag gesteckt und dendann im Header oben näher definiert.
Beim Floaten häng ich aber - bin schon einiges durchgegangen und hab auch versucht was umzusetzen,aber des will net so recht. Hab mir zum besseren Verständis auch noch andere Divs mit unterschiedlichen Hintergrundfarben hervorgehoben aber es hakt trotzdem noch. Kannst mir da nochmal nen Tipp geben? |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|