css menu

Metty · 28.11.2012

hallo...

wer kennst sich gut mit css aus?

bin schon seid tagen dran das menu fertigzustellen..

wenn man auf ein link geht eerscheint unten ein border-bottom linie in rot..

jetzt will ich aber das die rote linie genau aufs graue verleuft nur komisch zeigt er 1px weiter oben an..

wie kriege ich das hin das die rote linie genau aufs graue geht???

wer super wenn jemand weiss wie das geht....

MFG Metty

hub · 28.11.2012

AW: css menu

Moin moin,
nur ein paar Gedanken:
- du solltest deinem a-Tag im Normalzustand auf die richtige Höhe bringen, das erspart dir viel fummelei
- die rote Linie geht so micht auf den Border des nächsten Containers, der wird logischerweise verschoben
- Abhilfe könnte schaffen, in dem du dein Menü mit einer absoluten Position darüber legst. Dann kannst du es so justieren, das der folgende Container überlappt wird. Dabei musst du dann auf den Z-Index achten.
- oder du machst es mit einem Trick (das wäre mein Lösungansatz), in dem du in deinem Menü-Container eine Linie gewünschter Breite mit Css auf die untere Kante positionierst, den kannst du dann mit deinem a-Tag "überblenden" ohne das sich die Positionen verschieben ...

Gruß Ulli

Fritschie · 28.11.2012

AW: css menu

Wenn Du Firefox hast dann nutze das Plugin "Firebug" damit kann man Fehler schön analysieren und abändern. Bei mir gehört es zum Pluginstandard

Metty · 28.11.2012

AW: css menu

hi hub

ich kam jetzt soweit das ich die roten linien jetzt aufs graue bekomme..

nur wenn ich jetzt auf ein link gehe haut er ab....

warum?

hub · 28.11.2012

AW: css menu

Moin, das Problem ist, das du dein a-Tag in den Zuständen unterschiedlich handhabst. Den optimalen Zustand erreichst du, wenn du im "Normalzustand" alle notwndigen Eigenschaften zuweist und bei hover nur die rore Linie sichtbar machst. Bedenke auch, das border-bottom die Höhe deines Links ändert. Also braucht der Link im Normalzustand auch einen border-bottom ... (z.B.)
Ich würde nicht den einzenen Links ein absolute verpassen, sondern dem gesamten Menü-Container. Bei deiner Variante ändert sich durch das absolute auch das Positiobierungsverhalten von float.
Ich kann mir das, wenn du willst, morgen im Laufe des Tages etwas genauer anschauen .

Gruß Ulli
edit: Ich bin kein Css-Guru. Vielleicht gibt es auch eine bessere Lösung.

Metty · 28.11.2012

AW: css menu

hi ulli

ja wer super nett wenn du ma rüber schauen könntest...

um so länger ich rüber schaue um so weniger verstehe ich^^...

MFG Metty

hub · 29.11.2012

AW: css menu

Moin moin,
ich habe mal ein paar Passagen in deiner Css geändert, mit kurzen Anmerkungen versehen und in den gängigen Browsern getestet.
Hier der geänderte Code aus dem Abschnitt Menü (.../style.css):

HTML:

#navigation{ 
... 
}
.menu { /* die relative position auf deiner seite */
 padding:0; 
 margin:0; 
 height:54px; /* 1px kleiner als der inhalt */
 position: relative;
 z-index: 2; /* 1 ebene über darunterliegendem container "navigation" */
}
#menu { /* die absolute position in .menu */
 padding:0p; 
 margin:0;
 position: absolute; /* ab hier absolute positionierung */
 top: 0;
 right: 20px; /* position menü rechte seite*/
}
#menu ul { /* ab hier "normal", dein eigentliches menü "*/
 margin:0;
 padding:0;
 list-style-type:none;
 font-size:13px;
 float: right;
}
#menu li {
 display:block;
 margin:0;
 padding:0;
 float: left;
}
 
#menu li a {
 display:block;
 color:#999999;
 text-decoration:none;
 font-weight:bold;
 padding:8px 10px 0 10px;
 height: 46px; /* height + padding-top + border-bottom = 55; */
}
 
#menu li a:hover { 
 color:#E34F4D;
 border-bottom: 1px solid #E34F4D;
}
 
#menu li.active a {
 color:#E34F4D;
 border-bottom: 1px solid #E34F4D; 
}
 
/*============================================== Spezial ==============================================*/

Ich habe nur die notwendigsten Sachen für das Menü geändert, die restlichen Positionen in deiner Css solltest du auch nochmal durchgehen, wenn das mehr wird, kann es sonst zu unerwarteten Fehlern in der Anzeige kommen.

Gruß Ulli

Myhar · 29.11.2012

AW: css menu

Generell solltest du dich noch mit den Grundlagen von CSS befassen Metty. Dein CSS ist relativ unaufgeräumt. Logisch, ist ja noch in der Entwicklung, aber es lassen sich schon einige unsauberen Codestile erkennen. Wenn du zB einem container eine Breite gibst, dann musst du diese Breite nicht für jedes nachfolgende Element erneut definieren.
Auch weist du unnötig viele Grafiken den einzelnen Elementen zu. Kannst du die Grafiken nicht für mehrere Elemente verwenden? Zumindest ich sehe hier keinen wirklichen Unterschied zwischen denen.

Metty · 29.11.2012

AW: css menu

hi

danke erstmal hub für deine hilfe glaube ohne dich wer ich nicht soweit gekommen..

myhar ja bin noch dabei css und html zulernen..

für mich ist das ein riesiger akt etwas zu programmiren^^

bei euch sieht das immer so leicht aus...

danke leute für eure hilfe...

mfg metty

hub · 29.11.2012

AW: css menu

Moin,
vielleicht ein kleiner Tipp, fang nicht so komplex an. Nimm eine leere Html-Datei, und packe da ein paar Div-Elemente rein, gib ihnen unterschiedliche Farben und schaffe dich an der Positionierung durch Css ...
Wenn es komplex wird, ist es gut zu Wissen, wie was ( insbesondere display und position ) reagiert und voneinander abhängt.

Gruß Ulli

Metty · 29.11.2012

AW: css menu

danke ulli für den tipp

es gibt doch noch nette menschen die einen helfen.. daumen hoch...

MFG Metty

Metty · 30.11.2012

AW: css menu

eine frage habe ich noch ulli..

und zwar beim searchbutton wollte ich gerne wenn ich draufklicke das sich rechts ein searchfeld auftaucht wo man dann halt seine suche reinschreiben kann...

kennst du dich damit aus?

MFG Metty

hub · 30.11.2012

AW: css menu

Moin,
einfach per Javascript die Css-Eigenschaft display des Containers umschalten.
Falls du mehr machen willst, schau dir mal die jQuery API an ( ... ich weiss, es gibt mehr ...). Zum Beispiel mal nach fadeIn() und fadeOut() oder show() und hide(). Da findest du brauchbare Beispiele ...

Gruß Ulli

Metty · 30.11.2012

AW: css menu

ahh super coole seite da findet man ja alles..

danke dir ulli...

MFG Metty

Metty · 30.11.2012

AW: css menu

hi ulli

guck ma bitte

genau das habe ich gesucht nur mit was wurde das geschrieben css?

MFG Metty

hub · 30.11.2012

AW: css menu

Moin,
Client-seitig bauen dort die meisten Sachen auf jQuery auf. Wenn du den Aufbau in Form eines Dashboards meist, auch dafür gibt es OpenSource Frameworks (z.B Klick) auch Ext Js wär ne Alternative. Nur Css allein reicht da nicht.

Gruß Ulli

Metty · 01.12.2012

AW: css menu

danke dir ulli für die guten webseiten..

die haben mich ein gutes stück weiter gebracht...

die webseite die ich ja am machen bin ist ja voll mit fehlern

aber gottseidank jetzt habe ich ja gute webseiten von dir wo ich lernen kann...

MFG Metty