Strich unter Link auf gleiche Breite setzen wie den Button

**Voselix** · 18.04.2015, 11:09

Hallo Zusammen,

wieder mal eine Anfängerfrage von mir---ich hänge wieder mal :-(

Ich habe eine waagerechte Navigation---wenn ich über die Links fahre (hover) soll ein Strich unter dem Button erscheinen.

Tut er auch....jedoch ist der schmaler als der Button....setze ich im css auch padding links unt rechts auf 10px, vererbt sich diese Eigenschaft irgendwie und der Button wird auch 10 breiter---der Strich ist wieder zu schmal.

---kann mir jemand beim modifizieren der css helfen?

Code:

#header nav.mod_navigation {
    top:12%;
    position:fixed;
    margin-left:-200px;
    left:50%;
}

#header nav.mod_navigation li {
    display:inline;
    padding:10px;
    background-color:#fff;
    list-style-type:none;
}

a:link,
a:visited,
a:active {
    text-decoration:none;
    color:#000;
}

a:hover {
    padding:0 0 10px;
    background-color:#fff;
    border-bottom:4px solid #db4040;
    font-weight:normal;
    color:#000;
}

li span {
    padding:0 0 10px;
    border-bottom:4px solid #db4040;
    font-weight:bold;
    color:#000;
}

Vielen Dank vorab für eure Hilfe:-)

**MacKP** · 18.04.2015, 11:12

Hallo Voselix,
dann mach mal das padding beim li raus und füge das dem a, span wieder hinzu. Dann passt das ;-)

Viele Grüße

**marebe** · 18.04.2015, 12:51

Hallo Vodelix,

mach doch mal Folgendes in Dein CSS rein:
.mod_navigation li.active, .mod_navigation li:HOVER {border-bottom: 4px solid #db4040;}

dann hängt die Linie nicht am Text, sondern am li Bock und das ist glaub was Du willst, oder?

**Voselix** · 19.04.2015, 11:01

Vielen Dank euch beiden...es hat mit der Formatierung von marebe geklappt!!!!

Super lieben Dank!

Könnte mir jemand bitte noch schreiben, wie ich das Navigationsmodul am unteren Rand des Headers positioniere?

**marebe** · 19.04.2015, 13:33

Hi Voselix,

Code:

#header nav.mod_navigation {
  left: 50%;
  margin-left: -200px;
  margin-top: -46px;
  position: fixed;
  top: 25%;
  z-index: 2;
}

mit "top: 25%" würde die Navi direkt unter dem Header kleben und mit "margin-top: -46px" zieht man sie um ihre eigene Höhe wieder nach oben.
Den z-index braucht man, weil die Farblinien sonst vom Hauptinhaltsblock überdeckt würden.

Viele Grüße,
Martin

**Voselix** · 19.04.2015, 14:00

Ja, da hab ich wohl was auf der Leitung gesessen-25% nach unten...46px wieder hoch--logisch---danke.

Auch mit dem z-index ist ok---leider klappt das aber nicht...der Strich bleibt immer hinter dem hauptinhaltsblock...selbst bei z-index 100...

Siehe Bild: Bild

**marebe** · 19.04.2015, 14:12

vielleicht ists auch am besten, die Navi in die Hauptspalte zu verlegen. Dann hast Du kein z-index Problem und sagst einfach nur "margin-top: -46px" und "position: absolute".
Dann bleibt sie auch unbeeinflusst davon, wenn Du mal entscheidest, dass der Header 33 statt 25 Prozent hoch sein soll...

edit: im Firefox funktioniert die aktuelle Variante übrigens (wenn man Deinen Link da aufruft) Du hattest Chrome, gell?

**Voselix** · 19.04.2015, 16:49

mhhh.ich hab mal einfach die Verschiebung nach oben um die Rahmenstärke vergrössert und so ists auch gut.

GLG und danke :-)))

**marebe** · 20.04.2015, 08:19

Hallo Voselix,

ich glaub das Problem steckt weniger in den Details, als in der grundsätzlichen Herangehensweise.
HTML hat was mit Strukturen zu tun und das bedingt auch eine strukturierte Herangehensweise.
Man sollte mit der Realisierung einer Seite erst anfangen, wenn man sich darüber klar ist, wie das Resultat aussehen und funktionieren soll.
Am besten ists natürlich, schonmal in Photoshop aufzumalen, was dabei raus kommen soll, aber eine Bleistiftskizze tuts zu Not auch.

Wenn man das hat, dann gleicht man den Entwurf mit der Grunstruktur der Contao Page ab und notiert sich, was in welchen Bereich kommt.
Auf diese Weise lassen sich einige Fallstricke umgehen und die Gefahr, dass man sich verzettelt wird geringer.
Wenn der Grundriss steht, dann kann man sich mit Details befassen, ohne dabei den Faden zu verlieren.

Wie Du an dieses Projekt jetzt ran gegeangen bist weiß ich nicht, aber vielleicht ist ja eine Anregung für Dich dabei.

**Voselix** · 21.04.2015, 00:18

ja, da ist bestimmt was dran-was du sagst.

Ich erstelle jedoch seit 1999 Webseiten-allerdings im statischen html-mit dreamweaver, frontpage und flash.

Oft ist das Layout jedoch einfach nicht im Vorfeld klar bzw. festgelegt---grade hier im contao ist es für mich dadurch sehr schwer alles in Bezug auf das Layout auszulagern...in Modulen, css & themes...

Ich kann eine Webseite Pixelgenau im html gestalten...da bin ich so sicher, das ich alles umgesetzt bekomme.

Das hat in der Anfangsphase auch nicht so schnell funktioniert und damals hatte ich noch einen Mentor....

Jetzt beim dritten contao Projekt fange ich ganz langsam an sicherer zu werden und finde auch öfter meine bezeichner, formatdefinitionen, und kriege langsam Ideen umgesetzt....aber das dauert halt....aber ich lerne...

Ich danke allen für die Geduld mit mir und hoffe, das ich nicht nerve mit meiner Fragerei!
Danke an die tolle community für all die Hilfe, die ich bekommen habe!!!

LG
Voselix

**marebe** · 21.04.2015, 08:33

ok, verstehe...
also ich hab mir am Anfang einfach mal ein Contao Layout mit allem was geht gebaut (header, footer, eigener Bereich unter dem Header und 3-spaltig).
Dann hab ich alles mit verschiedenen Farben hinterlegt und als HTML Modul in die Bereiche rein geschrieben, wie sie heißen.
Mit CSS hab ich den wrappern und .inside Blöcken noch paddings verpasst.
Danach kann man mit Firebug schön sehen wie alles zusammen geht oder sich die Page ausdrucken, um sich das für die Planung neben das Keyboard zu legen.
Ich hab früher auch immer gleich mit Tippen angefangen und gemeint "das wird schon", aber komischerweise geht es schneller, wenn man sich Zeit nimmt und erstmal im Kopf aufmalt, was man eigentlich machen will.

Viele Grüße,
marebe

**Voselix** · 23.04.2015, 11:13

Danke für Deine hilfreichen tipps marebe,

bin jetzt ein gutes Stück weiter gekommen - doch jetzt hab ich doch glatt noch ein winziges Problemchen :-)

die linke Navigation springt in der Höhe immer um diese Borderbreite....egal, wo ich da was ändere, entweder ist der Hover weg oder es springt weiterhin.

Kannst du da mal nachsehen, wo und wie ich das unterbinden kann?

Link

Besten Dank vorab!