zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Menu

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.08.2014, 11:17
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2014
Beiträge: 3
jsdev befindet sich auf einem aufstrebenden Ast
Standard 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;">
Der Button
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>
Den Halbkreis 1
HTML-Code:
				<img src="mfiles/img/menu_curve.gif" style="height: 45px;" />
Den text 1
HTML-Code:
						<a href="/index.php" id="navservice" class="Navigation">Service</a>
Den 2. Halbkreis und den Bild titel
HTML-Code:
				<img src="mfiles/img/menu_curve.gif" style="height: 45px" />
				<a id="page_title" class="Nav_Page">Startseite</a>
					</div></div>
Screenshot:

(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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.08.2014, 11:25
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.08.2014, 11:54
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2014
Beiträge: 3
jsdev befindet sich auf einem aufstrebenden Ast
Standard

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;
}
Das Problem ist das die untereinander dargestellt werden und nicht übereinander oder nebeneinander.
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)
Mit Zitat antworten
  #4 (permalink)  
Alt 27.08.2014, 14:01
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.08.2014, 21:53
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 27.08.2014
Beiträge: 3
jsdev befindet sich auf einem aufstrebenden Ast
Standard

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!
Mit Zitat antworten
  #6 (permalink)  
Alt 28.08.2014, 08:50
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.039
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Sicher funktioniert der z-index. Aber nachdem du keinen Code lieferst, was du gemacht hast, kann man dir leider nicht weiterhelfen.
Mit Zitat antworten
  #7 (permalink)  
Alt 28.08.2014, 21:34
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 24.06.2010
Beiträge: 528
K.Roland wird schon bald berühmt werden
Standard

Zitat:
Zitat von jsdev Beitrag anzeigen
ok dann ersetzte ich die divs mal mit listen
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
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
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 01:43 Uhr.