|
|||
Menü- und Inhaltsbereich mit Grafiken
Hi,
ich habe, wie ich finde, ein ziemlich simples Problem. Zwar habe ich dieses eigentlich schon gelöst, doch diese Lösung scheint mir alles andere als elegant. Ich habe eine Navigationsleiste, die mit einem Hintergrund versehen ist. An den beiden Seiten links und rechts soll das Menü durch eine jeweilige Grafik abgeschlossen werden. Dabei sollen die drei Menüpunkte immer zentriert sein, sowie die ganze Leiste selbst. Das ganze habe ich wie folgt gelöst: Ausschnitt aus der html-Datei: Code:
<div id="navigation"> <div id="navileft1"></div> <div id="navileft2"></div> <div id="navi"> <ul> <li><a href="blog/" class="blog"><span>Blog</span></a></li> <li><a href="portfolio/" class="portfolio"><span>Portfolio</span></a></li> <li><a href="about/" class="about"><span>About</span></a></li> </ul> </div> <div id="naviright1"></div> <div id="naviright2"></div> </div> Code:
/* navigation */ #navigation { width: 670px; height: 45px; margin: 0 auto; text-align: center; } #navileft1 { width: 20px; height: 45px; background: url(../img/navi_left1.png) repeat-x; float: left; } #navileft2 { width: 194px; height: 45px; background: url(../img/navi_bg.png) repeat-x; float: left; } #navi { width: 243px; height: 45px; float: left; } #navi ul { list-style-type: none; width: 243px; } #navi ul li { float: left; } #navi a { display: block; border: none; } #naviright1 { width: 193px; height: 45px; background: url(../img/navi_bg.png) repeat-x; float: left; } #naviright2 { width: 20px; height: 45px; background: url(../img/navi_right2.png) repeat-x; float: left; } (Ich habe übrigens schon versucht, den Hintergrund navi_bg.png durchlaufend auch hinter den Menüpunkten zu legen. Da ich aber mit Alpha-Transparenz bei den Grafiken arbeite, wurde das schimmernde Grün bei den Punkten natürlich verstärkt. ) Gleichzeitig habe ich das gleiche Problem im Inhaltsbereich, der noch unter die Navigation (genauso breit) positioniert werden soll: Oben im Content soll einmalig eine großes Bild als Hintergrund angezeigt werden, dann eine 1px hohe Grafik immer wiederholend bis fast zum Schluss, und dann wieder ein einmaliges Hintergrundbild. Ich hoffe ihr könnt mir diesmal wieder weiterhelfen. Danke! =) |
Sponsored Links |
|
|||
lass doch die DIVs weg. Ein <ul id="navi"> tut es auch.
Dann die grüne Hintergrundgrafik der ul mitgeben. Die <li> werden links gefloatet (und der erste mir margin-left (Achtung: double-float-margin-bug im IE) und der letzte mit margin-right versehen) und bekommen dann eigene Grafiken, die genau über die von der UL passen. |
Sponsored Links |
|
|||
Zitat:
Und bei "die genau über die von der UL passen." werden dann nicht die Menüpunkte ÜBER die Hintergrundgrafik gelegt, sodass mein Alpha-Transparenz-Problem auftritt? Würde mich auch noch auf andere Antworten freuen Das mit dem Inhaltsbereich scheint wohl unlösbar zu sein |
|
|||
Zitat:
Ich glaube, Du denkst noch in Tabellenlayouts: Jeder Bereich einer Hintergrundgrafik wird in ein evtl. inhaltsleeres Element gepackt. Besser ist es erstmal nur die Bereiche im Markup zu definieren, die tatsächlich gebruacht werden. Also eine UL mit drei LI. In den LI stehen Anker, jeweils als Blockelement deklariert. Siehe auch x-Beispiele auf Listamatic (meine Sig). Die UL erhält eine Breite kleiner 100% und wird mit margin: 0 auto; zentriert (oder sie nimmt die volle Breite ein). Dort wird der grüne Hintergrund eingegeben. In der UL stehen die drei LI. Da die nebeneinander stehen, solltest Du diese floaten. Andernfalls als Inline-Elemente deklarieren. Aber Inline-Elemente sind nur so breit wie der darin befindliche Inhalt. Blockelemente kann man besser mit "Dimensionen" belegen. Die LI könnten z.B. die Trennlinien als Hintergrund erhalten. Oder man macht das mit der Border-Eigenschaft. In den LI stehen die Anker als Blockelemente, damit sie sich im gesamten LI aufspannen. Dort werden die HIntergründe definiert, die beim hovern entsprechend wechseln. Dann noch die Abstände der Elemente zueinander eingeben und fertig. Wenn die Größen des Menus Pixelgenau sind und die Schrift der Menupunkte eine Grafik ist das zwar wenig benutzerfreundlich aber einfacher zu erstellen. Zum Inhaltsbereich: Nur weil ich dazu nicht gleich ne fertige Antwort brachte, ist es noch lange nicht unlösbar Prinzipiell kannst Du jedenm HTML-Element einen Hintergrund zuweisen, der entweder gekachelt werden kann oder nicht wiederholt wird. Also pack wiederholende Hintergründe in den Contentbereich, der sich je nach Seitenlänge ausdehnt und den einmaligen Hintergrund in den Header und Footer. Siehe auch den FAQ-Thread zur Seitenhöhe und Footerpositionierung. |
|
|||
Danke erstmal für deine Hilfe, allerdings verstehe ich einige Sachen noch nicht, oder du hast mein Problem im ersten Beitrag noch nicht ganz verstanden (bzw. von mir ungenügend formuliert )
Zitat:
Beispielsweise schreibe ich eine News: ein Teil des Textes steht noch auf der Headergrafik und der andere Teil in der wiederholenden Grafik. **edit (So in etwa mein ich das.) ** Wie du das erklärt hast, müsste ich doch für Header, Content und Footer einen Extrabereich (div) definieren? Zitat:
Oder soll ich EINE Grafik erstellen, die die ganze Menübreite einnimmt? (was leider sehr trafficlastig wäre) Geändert von Asakura (21.07.2006 um 18:48 Uhr) |
|
|||
Zitat:
Zitat:
Dein Menu hat ja eine fixe Breite und passt sich nicht an Fensterbreiten an, somit brauchst Du die Enden nicht einzeln dranhängen sondern Du kannst einen Hintergund für die ganze UL definieren. Andernfalls würde ich dem ersten LI den linken Rand mitgeben und dem letzten LI den rechten Rand (beide LI erhalten genug Padding, damit das passt). Dazwischen kachelt der fortlaufende Hintergrund der UL. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
menü aus grafiken in div boxen bauen | Beeer | CSS | 1 | 17.01.2014 20:58 |
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten | mazzo | CSS | 10 | 05.04.2012 18:32 |
Menü mit Grafiken | Souwnd | CSS | 1 | 24.10.2010 00:55 |
Darstellungsproblem | flohpapa | CSS | 3 | 16.12.2009 09:55 |
horizontales Menü mit Subemenü ohne Listenelemente aber mit Grafiken | metalmarder | CSS | 4 | 21.02.2009 21:38 |