28172 sujets

CSS et mise en forme, CSS3

[Résolu] Transformation CSS3 en cascade

Bonjour à tous et toutes,

tout d'abord, puisqu'on a jusqu'au 31 janvier pour exprimer ses voeux, je profite de ce petit appel à l'aide pour vous souhaiter tous mes voeux de bonheur et de santé pour cette nouvelle année Smiley smile

Ceci étant, je viens vers vous, comme expliqué plus haut, pour un petit appel à l'aide, oh, rien d'urgent, toutefois, j'aimerais vous faire part d'un point qui soulève ma curiosité, mais regardons plutôt

http://www.coloriage.tv/dessincolo/pluto.png

Smiley langue Smiley biggrin

Trêve de plaisanterie, j'ai crée un site avec un menu latérale qui se déplie au passage de la souris cf : http://nicolasmazieres.com

Dans les pages intérieures du site, le menu vient s'afficher par dessus le contenu du site or, je souhaiterai que le contenu se déplace en suivant le menu... et je ne vois pas trop comment faire ça en CSS.
En effet, une partie du menu est visible à l'écran et quand on passe la souris sur cette parie, l'ensemble de la div contenant le menu se déplace de gauche à droite.
Comportement normal, mais je ne vois pas où et comment intervenir dans mon code pour que ce déplacement intègre l'ensemble de la page en cours de visualisation ?

Merci d'avance pour vos conseils et pistes de recherches.

Cordialement votre

Bruno
Hello Bruno,

Bonne année à toi aussi, ça fait toujours plaisir Smiley smile .

En full css, je pense que ce n'est pas réalisable car le menu et la page ne sont pas du tout au même endroit (même si le css4 prevoit un sélécteur parent).
Je pense que tu vas devoir passer par du js avec un ajout de classe

Bonne journée,
Tom
bonsoir,

le plus sur serait de gerer ça via javascript.

Sinon via CSS tu peut essayer quelque chose du genre de :
html, #main {
    transition:0.5s
}
html body #main, body{
margin:0;
}
html {
padding-left:60px;
}
html:hover {
padding-left:280px;
}
#main:hover  {
margin-left:-220px;
}

++
Merci à vous deux.

Je vais tester la solution CSS dans un premier temps et si jamais j'essaierai le JavaScript.

Merci encore Smiley cligne
Pour la solution CSS, le plus simple serait de remettre le menu dans le flux et de jouer sur les caractéristiques des flottants.
comm ceci:


html, body , #page {
	height:100%;
	padding:0;
	margin:0;
}
#page {
	float:left;
}
/*************** HEADER / SITE-HEADER ***************/
.site-header {
	height: 100%;
	width: 280px;
	float:left;
	background: rgba(0, 0, 0, .6);
	margin-left: -220px;
	transition:  0.5s ease-in-out;
	padding-top: 40px;	
	margin-top: 0;
        position:relative;
}
#main {
	overflow:hidden;
}

en enlevant les transform, left et position fixed du <header>

bonne soirée
Sujet clos
Aller à