Mise en page du menu CSS spécifique

Question

Je suis confronté à des problèmes de développement web et je veux savoir comment je peux réaliser la mise en page this specific menu en HTML, CSS, Javascript. Lorsque vous passez la souris sur "Design" ou "Hintergründe", la zone principale change et affiche le contenu. Mon problème est la bordure, le contour qui change lorsque le point de menu actif est changé. Donc, je prendrais 2 conteneurs div pour "Design" et "Hintergründe" avec des frontières à gauche, en haut et à droite (pas de fond). Et la zone principale doit être une div avec des frontières elle-même. Comment puis-je atteindre la partie défaillante de la frontière où le choix du menu et la zone principale se mélangent dans un autre? A propos: Est-ce que ces barres de défilement (fines) costum (HTML) sont possibles en HTML pour les conteneurs div?

Thx à l'avance Tous les meilleurs Michael

Answer 1

L'onglet que vous cliquez sur a la même couleur de fond que la zone de contenu, et il a margin-bottom:-1px et z-index pour le placer sur le contenu. Cela fait que l'arrière-plan couvre la bordure de la zone de contenu, produisant l'effet que vous recherchez.

Answer 2

MichiMichbeck a donné une bonne réponse concernant les onglets.

Pour la barre de défilement fine, essayez l'un des nombreux plugins javascript/jquery disponibles. Un exemple est: http://jscrollpane.kelvinluck.com/

Vous pouvez également modifier la barre de défilement pour le navigateur webkit en CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. Mais la solution javasript serait probablement préférée.