zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menü- und Inhaltsbereich mit Grafiken

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.07.2006, 17:15
Einsteiger
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2006
Ort: Berlin
Beiträge: 14
Asakura befindet sich auf einem aufstrebenden Ast
Frage 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>
Ausschnitt aus CSS-Datei:
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;
}
Gäbe es da nicht eine einfachere und bessere Methode?
(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! =)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.07.2006, 17:45
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.07.2006, 18:54
Einsteiger
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2006
Ort: Berlin
Beiträge: 14
Asakura befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von mazzo
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.
Sorry, aber ich versteh leider nicht was du damit meinst.
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
Mit Zitat antworten
  #4 (permalink)  
Alt 21.07.2006, 10:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von Asakura
Sorry, aber ich versteh leider nicht was du damit meinst.
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
Mit PNGs wirst Du eh nicht viel Erfolg haben, die werden z.B. vom IE nicht unterstützt. Daher geh ich mal von GIF-Hintergrundbildern aus.

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 21.07.2006, 18:39
Einsteiger
neuer user
Thread-Ersteller
 
Registriert seit: 10.06.2006
Ort: Berlin
Beiträge: 14
Asakura befindet sich auf einem aufstrebenden Ast
Standard

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:
Zitat von mazzo
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.
Hm, aber im Header mit der einmaligen Grafik soll der Inhalt schon anfangen; soll also sozusagen mit dem Bereich des wiederholenden Hintergrunds verschmelzen.
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:
Zitat von mazzo
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. (...)
Und wie binde ich dann die beiden abrundenden Menügrafiken jeweils links und rechts ein?
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)
Mit Zitat antworten
  #6 (permalink)  
Alt 24.07.2006, 10:05
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.01.2005
Ort: Berlin
Beiträge: 2.149
mazzo wird schon bald berühmt werden
Standard

Zitat:
Zitat von Asakura
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.) **
Ich erkenne dort keinen unterscheidlichen Hintergrund für den Text. Wenn der erste Teil des Textes einen eigenen Hintergrund erhält, muss dieser in einem anderen Element stehen, als der Folgetext.

Zitat:
Zitat von Asakura
Und wie binde ich dann die beiden abrundenden Menügrafiken jeweils links und rechts ein?
Oder soll ich EINE Grafik erstellen, die die ganze Menübreite einnimmt? (was leider sehr trafficlastig wäre)
Ob da nun drei Einzelgrafiken geladen werden oder nur eine dürfte Traffictechnisch egal sein.
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.
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 16:39 Uhr.