Rahmen überdecken

[DerMitSkill]

Hallo Leute,
hab da ein Problem.

-> Link entfernt.

Ich möchte, wenn ich in der Navigation in der Mitte, auf Profil, Gästebuch usw. gehe, dass der Rahmen untendrunter verschwindet bzw. überdeckt wird (sozusagen als hover-effekt) Ich bekomms einfach nicht hin.

Wie kann ich das machen?

 

[Efchen]

Deine Menü-Tabs haben bereits keinen Rahmen. Daher kannst Du ihn auch nicht weg machen. Wo kein Rahmen ist, kann man ihn auch nicht entfernen. Der Rahmen gehört zum #profil-unten.

Du könntest höchstens einen Rahmen in Hintergrundfarbe definieren und diesen dann den anderen Rahmen überlappen lassen.

 

[DerMitSkill]

Du könntest höchstens einen Rahmen in Hintergrundfarbe definieren und diesen dann den anderen Rahmen überlappen lassen.

Genau das möchte ich eigentlich, aber wie? :(

Wenn ich den Rahme definiere rutsch das einfach runter und wird nicht überdeckt.

 

[Efchen]

Zum Überlappen brauchst Du absolute oder relative Positionierung. Sonst stehen die Elemente ja untereinander.

 

[DerMitSkill]

Ich hab jetzt die ganze Zeit rumprobiert, ich bekomme es nicht hin. Wo muss da position:relative hin?

 

[hokage555]

also ich würde den einzelnen button position:relativ geben.

das dann so verschieben, dass es den rahmen überdeckt. ein paar pixel sollten reichen.

und damit das ganze auch wirklich über dem rahmen ist, ihn also überdeckt, würde ich den links noch einen hohen z-index geben.

.deinlink:hover{
position:relative;
top:2px;  <=  /*je nach dicke deines rahmens*/
z-index:100;
}

versuch mal die 3 angaben zu deiner hover linkformatierung zu machen.
musst allerdings die höhe des hoverbuttons noch um die verschiebten pixel (2px) vergrößern. weil sonst springt der ja immer hin und her ^^

ist allerdings ungetestet. wenn es so nicht klappt. versuche diesen gedankengang mal weiter zu gehen. ich nehme an, dass efchen das auch so meinte.

grüße hokage

 

[DerMitSkill]

Super. Der Rahmen wird überdeckt, aber das Stück, was runtergerutscht wird, bekomm ich oben nicht dazu... wieso? Was muss ich machen?

 

[Efchen]

Super. Der Rahmen wird überdeckt, aber das Stück, was runtergerutscht wird, bekomm ich oben nicht dazu... wieso? Was muss ich machen?

Was bedeutet das?
Mit der Lösung wird das Element in seiner ursprünglichen Größe um 2px nach unten verschoben (nicht vergrößert). Wenn Du es oben länger haben willst, müsst Du die Größe entsprechend um 2px erhöhen.

 

[DerMitSkill]

Ich habs auf 1px bzw. 0.0625em gestellt. Das Element wird bei einem hover 1px bzw. 0.0625em nach unten geschoben. Das Problem ist, dass dann eben oben dieser eine Pixel bzw. die 0.0625em fehlen. Nur weiß ich nicht, wie ich sie dazu bekomme.... padding-top, margin-top, alles geht nicht und bringt den falschen Effekt.

 

[Efchen]

Naja, wenn Du ein Element nach unten verschiebst, dann beginnt es oben natürlich auch tiefer. Dann musst Du auch die Größe (height) ändern.

 

[hokage555]

wie efchen schon gesagt hat ;-)

ich nehme an, dass du deinem normalen link eine höhe gegeben hast.
ist ja auch logisch, da es ja wie ein button aussehen soll ;-)

also hast du irgendwo in deiner linkformatierung ein height: *** stehen.

die *** sind z.B. bei .deinlink = 25px (nur ein beispiel)
bei deinlink:hover musst du dann die 25px + 1px rechnen^^

also ist dein height bei deinlink:hover 26px groß

.deinlink{
deine formatierungen
...
height:25px;
}

.deinlink:hover{
deine formatierungen
...
position:relative;
top:1px;
z-index:100;
height:26px;
}

fazit: erhöhe einfach deinen height-wert bei hover um die anzahl der verschobenen pixel (bei dir anscheinend ja 1px)

alles klar?

grüße hokage

*edit: efchen war mit seiner antwort schneller fertig^^ naja hier nochmal ausführlich ;-)

 

[DerMitSkill]

Das geht nicht ^^ Ich komm mir grade voll dumm vor oO Sehs Dir an.... :(

 

[Efchen]

Sehs Dir an.... :(

Wo ?

-> Link entfernt.

 

[DerMitSkill]

Da: Link entfernt

Link war in #5 ;)

 

[Efchen]

Naja, Du verschiebst es doch auch nach unten :-)

Wenn Du es höher machst, musst Du es natürlich nicht nach unten verschieben ;-)

 

[DerMitSkill]

Aber wenn ichs nicht nach unten verschiebe wird der Rahmen nicht überdeckt... das soll er aber...

Ich verzweifel noch.... :(

 

[Efchen]

Wieso sollte er das nicht tun? Du veränderst doch die Höhe. position:relative muss natürlich bleiben.

Hmmm...ich verzweifel grad selber...

Ich würd die Reiter schon im :link-Zustand den Rest überlappen lassen und dann beim :hover einfach den border-bottom:0 setzen.
Aber ich kriegs grad selber nicht auf die Beine...versuche das aber auch im Firebug...der macht auch nicht immer das, was ich will ;-)

 

[DerMitSkill]

Ich würd die Reiter schon im :link-Zustand den Rest überlappen lassen und dann beim :hover einfach den border-bottom:0 setzen.

So ähnlich gehts. div#seite ul#profilnavigation li a überlappt so schon div#seite div#profil-unten und hat im normalen Zustand unten einen Rand (das sieht dann so aus, als ob es der Rand von div#seite div#profil-unten wäre). Beim hover bekommt der Rand die Farbe des Hintergrunds.

Danke Euch beiden.

@Efchen, könntest Du bitte was zur Semantik meiner Seite sagen, hätte gerne mal von Dir gewusst, ob das für Dich Semantik ist :) Wäre lieb...

 

[_Thor_]

Bin zwar nicht efchen, aber zur Semantik kann ich dir auch was sagen.

Deine erste Zeile versetzt den IE in den Quirksmode, die solltest du entfernen.

<h1> nur um den blauen Balken darzustellen, weiß ich nicht, ist ja in dem Sinne keine Überschrift. Da wäre ein neutrales <div> vielleicht besser, wenn kein Text mehr dazu kommt.

Die <div>'s um deine <p>'s sind unnötig, da reicht jeweils das <p>.

Sonst sieht das sehr gut aus.


*edit*
XHTML1.1 ist etwas übertrieben, wenn du es nicht als xml ausliefern lässt. XHTML1.0 strict reicht da völlig.

 

[DerMitSkill]

Danke :)

Die erste Zeile gehört aber zum korrekten XHTML 1.1! Solange der IE im Quirks Mode keine Fehler macht, ist er mir egal.

Das <h1> stellt nicht den blauen Balken dar, der ist eine Hintergrundgrafik. Das <h1> soll zu <h1><a href="startseite.php"><img alt="Seitenname Logo" src="design/standard/grafiken/logo.gif" /></a></h1> werden, aber erst wenn ich das Logo fertig habe. Wäre es korrekt?

Meiner Meinung nach sind die <div>'s um das <p> nicht unnötig. Das <div> fasst (wie es sich gehört) den Inhalt zusammen. Wenn Du auf der Startseite siehst, enthält das <div> 3 <p>'s, später kommen dann auch noch <img>'s und <ul>'s hinzu, was eben Inhalt ist. Genauso unter Nachrichten. Jedes <div> ist eine neue Nachricht, diese den Inhalt beinhaltet. Das kann jetzt nicht nur <h2> und <p> sein, sondern mehrere <p>'s, <ul>`s, <img>'s, <h3>'s, <h4>`s usw. Das eine <p> bei "Profil von Pascal" ist sicherlich unnötig, aber es ist nur ein Platzhalter. Sobald dort mehrere Elemente reinkommen, ist es nötig, und ich kann Dir sagen, da werden mehrere reinkommen, also erfüllt das <div> seinen Zweck: Das zusammenfassen!

Soooooo.... okay? :grin: