• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Menüleiste

K

Konda

Neues Mitglied
Hallo liebe Community,

ich habe folgendes Problem:
Ich möchte eine Menüleiste bauen, welche sich automatisch der Länge des Textes innerhalb der Leiste anpasst.
Dafür habe ich dann 2 Grafiken gebastelt:
- Eine die links anfängt und "unendlich" lang geht
- Eine abschließende für rechts.

Nun möchte ich, dass die rechte Grafik dort anfängt, wo die linke aufhört und die linke soll nur so lang sein wie der Text innerhalb ist.
Leider schaut das ganze bei mir so aus... -> http://s7.directupload.net/images/120725/d4w5jft2.png

Man sieht, dass die rechte Grafik, leider... rechts ist :D und nicht mit der linken Grafik abschließt.

Hier einmal mein CSS-Code:
Code: 
#form{
    width: 1080px;
    margin: 35px auto;
    border: 1px solid green;
    
}

#menu_box{
    margin: 15px auto;
    height: 29px;
    text-align:center;
    border: 1px solid red;
    
}


#NaviLinks {
    background: transparent url(bilder/menu_links.png) top left no-repeat;
    height: 29px;
    float: left;
    color: white;


}
#NaviRechts {
    background: transparent url(bilder/menue_rechts.png) top right no-repeat;
    height: 29px;
    width: 12px;
    float: right;


Und der HTML-Code:
Code: 
<div id="form">
    
        <div id="menu_box">
            
            <div id="NaviLinks">
            Test Test Test Test Test Test Test
            </div>
            <div id="NaviRechts">
            </div>    
        
        </div>
        
    </div>

Ich bedanke mich schon einmal.

Grüße
Konda
 
das div#NaviRechts braucht ein float: left; kein float: right;

für weitere informationen googel mal nach "Sliding Doors", so nennt sich die Technik, die du anwenden willst
 
Hallo,

Danke für deine schnelle Antwort,
ich habe dazu allerdings noch eine Frage...

und zwar will ich die Menüleiste zentrieren, was sich durch das float:left, als etwas schwierig darstelllt....
Eigentlich dachte ich, es wäre damit getan das ich der
menu_box "margin: 15px auto;" gebe,
da ich der Box keine Breite gebe... Eigentlich sollte es sich dann doch dem Inhalt anpassen und sich somit mit dem Inhalt mittig zentrieren, oder?

Aber wie man auch auf dem Bild sieht,
hat die menu_box die maximale breite,
woher bekommt sie die und wieso? ​
 
Ich bin zwar neu und hab nicht so viel Ahnung, aber wie währ wenn du mal probierst NaviLinks float rechts und NaviRechts float links zu machen ;-)

Sag mir bescheid obs geklappt hat :D

mfG Backfighter
 
Habe es jetzt nicht ausprobiert, aber die Bilder müssten einfach die Positionen tauschen.
Also die rechte Grafik ist ganz links von menu_box und die linke Grafik ist ganz rechts von menu_box.

Würde mich jetzt wundern, wenn ein anderes Ergebnis dabei rauskommt.
 
Der Code wird von oben nach unten abgearbeitet, erst wird das Linke und dann das Rechte Bild gezeichnet. Daher ist das ergebniss:
Bildlinks "fließt" links an Bild rechts und Bildrechts "fließt" rechts an Bild links. Und schon ist es zentriert ;-)
 
Backfighter schrieb:
Der Code wird von oben nach unten abgearbeitet, erst wird das Linke und dann das Rechte Bild gezeichnet. Daher ist das ergebniss:
Bildlinks "fließt" links an Bild rechts und Bildrechts "fließt" rechts an Bild links. Und schon ist es zentriert ;-)
Zum Vergrößern anklicken....
Interessante Theorie, aber so funktioniert das leider nicht. Konda hat Recht, die Bilder würden einfach nur die Seite tauschen.
 
threadi schrieb:
Schau mal hier:
Horizontale Zentrierung einer gefloateten Listen-Navigation
Beautiful Horizontally Centered Menus/Tabs/List. No CSS hacks. Full cross-browser.
Zum Vergrößern anklicken....

Dankeschön, hat mir soweit geholfen... aber ich glaube ich habe es etwas unsauber programmiert... Ich habe noch einen unschönen Nebeneffekt:
http://s1.directupload.net/images/120726/m8b7fk77.png

Wie man sieht, habe ich unten eine Scrollleiste, da sich der grüne Kasten außerhalb des Bildschirmes befindet.
Hier einmal der Code:
Code: 
#menu_box{
    margin: 15px auto;
    height: 29px;    
    clear:left;
    float:left;
    position:relative;
    left:50%;


    border: 1px solid green;
    
    
}


#NaviLinks {
    background: transparent url(bilder/menu_links.png) top left no-repeat;
    height: 29px;
    float: left;
    color: white;
    position:relative;
    right:50%;
    padding: 5px 5px 0px 16px;


    
}
#NaviRechts {
    background: transparent url(bilder/menue_rechts.png) top left no-repeat;
    height: 29px;
    width: 12px;
    float: left;
    
     position:relative;
   right:50%;
}

Code: 
<div id="menu_box">
            
            <div id="NaviLinks">
            Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
            </div>
            <div id="NaviRechts">
            </div>    
        
</div>

Grüße
Konda
 
Gib #menu_box mal noch "overflow: hidden;" - dadurch sollte der Scrollbalken weg sein. Hat allerdings den Nachteil, dass Du hier kein Aufklappmenü verwenden könntest, wenn Du eines willst.
 
threadi schrieb:
Gib #menu_box mal noch "overflow: hidden;" - dadurch sollte der Scrollbalken weg sein. Hat allerdings den Nachteil, dass Du hier kein Aufklappmenü verwenden könntest, wenn Du eines willst.
Zum Vergrößern anklicken....

Bei overflow: hidden werden doch einfach nur überstehende Teile aus der Box abgeschnitten, oder?
Denn wenn ich dies mit reinpacke, sieht man einfach von der Menüleiste nur noch diesen Teil,
welcher sich in der #menu_box befindet... und das ist dann nur noch die Hälfte der Leiste, da die #menu_box genau in der Mitte des Bildschirmes beginnt.
 
Hast recht. Doofe Idee. Mach es anders und gib "overflow: hidden;" einem oberhalb von dem Menü liegenden HTML-Element, welches auch eine feste Breite hat. Wenn Du so etwas nicht hast, könntest Du höchstens per

Code: 
html { overflow-x: hidden; }

jegliches horizontale Scrollen unterbinden. Das wird aber manchen deiner Besucher nicht gefallen.
 
threadi schrieb:
Hast recht. Doofe Idee. Mach es anders und gib "overflow: hidden;" einem oberhalb von dem Menü liegenden HTML-Element, welches auch eine feste Breite hat. Wenn Du so etwas nicht hast, könntest Du höchstens per

Code: 
html { overflow-x: hidden; }

jegliches horizontale Scrollen unterbinden. Das wird aber manchen deiner Besucher nicht gefallen.
Zum Vergrößern anklicken....
Die erste Idee ist bei mir gut anwendbar ;-)
Klappt jetzt alles so wie ich es wollte,
ich danke dir ;-)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben