28111 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un petit soucis sur css et je vais essayer de l'expliquer correctement. Tout d'abord je vous met mon code CSS :
nav {
	background-color:black;
	color:white;
	position:fixed;
	display:inline-block;
	width:28%;
	vertical-align: top;
	z-index:100;
}
nav li:hover ul {
	    display: block ;
	    background-color: white;
	    color:black;
    position: absolute;
    top: 36px; 
    left: 400px; 
    z-index: 100; 
}
ul {list-style:none;
z-index:100;}

nav li {
	padding:100px;
	z-index:100;
}

section {
	display:inline-block;
	width:70%;
	position:absolute;
	right:20px;
	z-index:1;
}


Donc voilà, j'avais mis le menu (nav) et la section en inline-block pour qu'elles soient l'une à côté de l'autre. Cependant, je voulais que mon menu soit fixe (donc position:fixed). Mais dans ce cas, la section repasse derrière et cela foire tout le inline-block. J'ai donc bidouiller avec la position:absolute pour remettre la section à droite. Mais quand je modifie par exemple la taille de ma fenêtre, je me retrouve avec le même problème, une partie de la section passant derrière le menu. Auriez-vous la solution à mon problème ? Merci d'avance !
Je me permet d'ajouter que j'ai tester avec left:x px après la position:absolute dans section, et cela marche mais ça me semble être un peu dégueu comme solution...
Modifié par raco (17 Feb 2021 - 12:01)
Modérateur
Salut,

Plutôt que de passer ta section en absolute laisse la en display:block et donne lui un margin-left ou padding-left de la taille de ton menu (ou un peu plus si tu veux un espacement)

nav {
	background-color:black;
	color:white;
	position:fixed;
	width:28%;
	z-index:1;
}
section {
        padding-left: 30%;
}

https://jsfiddle.net/undless/na1z6b9c/
Meilleure solution