|
|||
Menu
Hallo
Ich arbeite grade eine bestehende Seite in eine Mobile Version um. Dazu möchte ich das Menü anpassen. Links ein button zum öffnen des menüs dann der Bereich(Text 1 bzw. "Service") und dann der aktuelle Seitentitel (Text 2 bzw. "Download") Hier eine Grafik mit meiner Gestaltungs Idee: Der rote Bereich ist die Farbe von dem Bereich in dem sich der Nutzer grade bewegt, daher variable. der gelbe Bereich ist fest. Ich weiß leider überhaupt nicht wie ich das umsetzten soll bisher habe ich: Der Menü streifen: höhe 45px und Color gelb HTML-Code:
<div class="BodyElement" style="background-color:#FFD407"> <div style="height:45px;"> HTML-Code:
<a href="#" class="noarrow menupic" style="float:left; margin-left: 0.6em"><img src="mfiles/img/menu.gif" style="width: 40px; margin-top:0.5em "></a> HTML-Code:
<img src="mfiles/img/menu_curve.gif" style="height: 45px;" />
HTML-Code:
<a href="/index.php" id="navservice" class="Navigation">Service</a> HTML-Code:
<img src="mfiles/img/menu_curve.gif" style="height: 45px" /> <a id="page_title" class="Nav_Page">Startseite</a> </div></div> (sieht etwas anders aus weil die angaben eigentlich in einem externen style sheet lagern) Mein Problem dabei ist das einfärben eines bereiches. Ich bin aber auch für neue Vorschläge offen Wenn ihr fragen habt fragt bitte Ich hoffe ihr könnt mir helfen! Gruß js |
Sponsored Links |
|
|||
Lösch das, was du bis jetzt hast und fang neu an.
Ein Menü gehört in eine Liste, du brauchst die divs und imgs nicht. Die runden Enden machst du mittels der CSS Eigenschaft border-radius, mittels negativem margin lässt du die Bereiche überlappen. |
Sponsored Links |
|
|||
mmh ist ja eigentlich kein Menü, daher erscheint es mir nicht so sinvoll mit listen zu arbeiten?!
Hab trotzdem einmal neu angefangen und bin soweit gekommen: HTML-Code:
<div class="BodyElement" style="height:45px;"> <div class="menu_a1"><a href="#" class="noarrow menupic" style="float:left; margin-left: 0.6em"><img src="mfiles/img/menu.gif" style="width: 40px; margin-top:0.5em "></a></div> <div class="menu_a2"><a href="/index.php" id="navBrandneu" class="Navigation">brandneu</a><div> </div> Code:
.menu_a1{ height:45px; width:5em; border-top-right-radius: 22.5px; border-bottom-right-radius: 22.5px; background-color:#FFD407; } .menu_a2{ height:45px; width:15em; border-top-right-radius: 22.5px; border-bottom-right-radius: 22.5px; background-color:#D40000; } Dafür sind Div Container ja auch ausgelegt. nur wie ändere ich das? ---- Edit: Nebeneinander & überlappt hab ich sie jetzt mit margin und float:left. Der 1. Breich mit dem button ist nur leider unter dem 2. wie ordne ich die in der Z Achse an? Geändert von jsdev (27.08.2014 um 12:26 Uhr) |
|
|||
Dein Threadtitel ist Menu, also warum sollte es nicht um ein MenÜ gehen?
Eine Auflistung von Elementen ist trotzdem eine Liste. Eventuell eine Definitionsliste? Nimm für den radius 50%, dann brauchst du dir um die exakte Größe keine Gedanken machen. Auch gibt es KEINE komma-Pixelwerte. Mach dich schlau, was ein Pixel ist, dann weißt du, warum. Mit z-index kannst du Elemente in der z-Achse anordnen. |
|
|||
ok dann ersetzte ich die divs mal mit listen
Radius 50 geht nicht! Das hatte ich schon ausprobiert, weil dann auch 50% von der Breiter genutzt werden und ich möchte einen runden Halbkreis und kein Ovalen Bezüglich der Koma haste natürlich recht Sorry war schon später Abend bei mir... z-index funktioniert nicht hab ich auch schon ausprobiert Im WWW steht man braucht dazu ne Position Angabe die nicht static ist aber selbst wenn ich das ändere funktioniert nicht Jedenfalls Danke für eure Antworten bisher! |
|
|||
Ja mache das Mal und zeige deinen Versuch her.
Ich habe noch nicht verstanden, woran du scheiterst. Hier mal mein kleines Beispiel: Edit fiddle - JSFiddle _______________ MfG Roland |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem mit PullDown Menu auf ipad/iphone | smisonline2 | CSS | 1 | 13.05.2013 18:13 |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Linkverhalten im IE6 | ChOpSueY! | CSS | 19 | 19.05.2008 23:48 |
Drop Down Menu Positionsproblem | Schky | CSS | 4 | 21.04.2008 14:09 |
Problem mit vertikaler Navigation | Krissie | CSS | 0 | 15.08.2007 13:51 |