| Autor |
Nachricht |
CreativePixel
Threadersteller
Dabei seit: 20.09.2011
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 14.02.2012 21:39
Titel [Brauche Hilfe] CSS/HTML Menü |
  |
|
Hallo,
ich bin dabei meine Web-Design Idee umzusetzen. Es hat alles bereits gut funktioniert, aber nur das Menü zickt rum! 
Bin schon die ganze Zeit am suchen, ob es für so etwas ein brauchbare Hilfe gibt ,aber ich habe nichts zufriedenstellendes gefunden.
Hier wie es aussehen soll:
Hier wie es im Browser aussieht:
HTML | Code: |
<div id="navigation">
<ul>
<li><a href="index.html">Startseite</a></li>
<li><a href="#">Beispiel</a></li>
<li><a href="#">Beispiel</a></li>
</ul>
</div><!-- Navigation -->
|
CSS | Code: |
#navigation {
list-style-type:none;
text-decoration:none;
height:24px;
background:#212121;
width:930px;
position: absolute;
bottom: 50px;
-moz-border-radius-topmright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
}
#navigation ul {
list-style: none;
margin: 0;
}
#navigation li {
float: left;
position: relative;
text-align:center;
}
#navigation li a {
font-family: Verdana, Geneva, sans-serif;
font-size:14px;
}
#navigation a {
color: #aaa;
display: block;
line-height: 24px;
padding:0 10px;
text-decoration: none;
left:-21px;
position:relative;
text-shadow:-1px -1px #0e0e0e;
text-decoration: none
}
#navigation li:hover > a,
#navigation ul ul :hover > a {
background: url(images/hover.jpg) repeat-x;
line-height: 29px;
color: #000;
text-shadow:-1px -1px #fff;
-moz-border-radius-topmright: 5px;
border-top-right-radius: 5px;
-moz-border-radius-topleft: 5px;
border-top-left-radius: 5px;
font-size: 18px;
display:block;
margin-top:-2px;
padding-bottom:12px;
text-align:center;
}
#navigation ul li:hover > ul {
display: block;
|
Nun mein Problem:
Das Tab "Startseite" soll den :hover bilden mit einer Schriftgröße von 18 (Siehe: CSS code), aber die anderen Tabs "Beispiel" (Schriftgröße: 14) verschieben sich und bleiben nicht an einer festen stelle, so wie es gedacht ist!
Habe es auch schon mit probiert aber dann verschiebt sich alles komplett. 
Danke schonmal im vorraus.
|
|
| |
  |
 |
WebRex
Dabei seit: 26.07.2011
Ort: -
Alter: 29
Geschlecht:
|
Verfasst Di 14.02.2012 22:04
Titel
|
|
|
Das Verschieben könntest Du verhindern, indem Du jedem Menüpunkt eine individuelle Breite zuweist und auf den Innen-Abstand verzichtest.
Achja, list-style-type: none für DIV#navigation ist unsinnig.
|
|
| |
 |
|
|
Anzeige
|
|
|
CreativePixel
Threadersteller
Dabei seit: 20.09.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 14.02.2012 22:09
Titel
|
|
|
Hallo,
das Design soll in Wordpress integriert werden, deswegen möchte ich es Dynamisch schreiben! 
"Hätte ich wohl Anmerken sollen." 
Ok werde es rausnehmen, Danke
|
|
| |
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst Mi 15.02.2012 22:13
Titel
|
|
|
Hi,
natürlich verschieben die anderen Tabs sich in der Breite, wenn in einem davon die Schriftgrösse wechselt und du nur mit Randabständen arbeitest. Das kannst du nur beheben, indem du den Listenelementen (oder den a) eine feste Breite zuweist.
li{width:1234px;}
Warum #navigation li:hover > a und nicht #navigation li a:hover ?
Das hier: #navigation ul ul :hover > a ist unnötig, du hast kein Submenü, und falls doch, wäre stattdessen #navigation li ul li a:hover angebracht.
Den > Selektor braucht man auf alle Fälle nicht in einer einfachen Navigation wie dieser.
Viel Erfolg!
Chris
|
|
| |
|
|
CreativePixel
Threadersteller
Dabei seit: 20.09.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 17.02.2012 05:21
Titel
|
|
|
Hallo willshedo,
wie schon angemerkt möchte ich das Design in Wordpress integrieren. Also ein "Theme" schreiben für Wordpress. Und da möchte ich es dynamisch erhalten. Genauso wie ich die Selektoren und Submenü - Selektoren erhalten möchte.
Wenn es ein HTML Design wäre, würde ich das einfacher halten.
Habe mal gedacht so etwas schon einmal gesehen zu haben mit javascript, aber keine Ahnung wo das war.
Hmmm, naja ich habe die Schriftgröße beim :hover - Element gleich gelassen.
Danke dir.
MfG
Aber ich Bedanke mich für die Antworten.
|
|
| |
|
|
CreativePixel
Threadersteller
Dabei seit: 20.09.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 23.02.2012 11:01
Titel
|
|
|
Ich habe nichts gefunden, das mein Problem beheben konnte deswegen bin ich dem Kompromiss eingegangen, das ich die Schriftgrößen gleich gelassen habe.
Man hätte auch ein Javascript schreiben können, aber ich benutze nicht gern Javascripts.
MfG
|
|
| |
|
|
pixelpapst303
Dabei seit: 06.07.2006
Ort: hamburg
Alter: 50
Geschlecht:
|
Verfasst Do 23.02.2012 11:06
Titel
|
|
|
| CreativePixel hat geschrieben: | | ..., aber ich benutze nicht gern Javascripts. |
das ist so 2002!!!
|
|
| |
|
|
CreativePixel
Threadersteller
Dabei seit: 20.09.2011
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 23.02.2012 11:09
Titel
|
|
|
| pixelpapst303 hat geschrieben: | | das ist so 2002!!! |
Auf jeden Fall!
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Brauche Hilfe mit JS-Menü
[Brauche Hilfe] Vertikales Menü in Flash
[Flash MX] Brauche Denkanstoß - dyn. Menü aus XML / rekursiv
Brauche Hilfe: Pufferfish Menü Tutorial
HTML/PHP Menü - Ist das korrekt?
brauche dringend hilfe mit einem javascript Menü
|
|
Willkommen auf dem Portal für Mediengestalter
