18008 sujets

Questions générales et questions de débutants

Problème de positionnement.

Bonjour,

Pour m'entrainer en jquery je fais un petit site de test, cependant je me suis rendu compte que j'avais quelques lacunes en positionnement CSS, je suis perdu.
Voici à quoi mon site ressemble: ICI

En gros, ce que je souhaite faire c'est de pouvoir aligner l'icone maison en haut à gauche sans que cela est d'incidence sur le positionnement du texte au centre. Mais il n'y a rien à faire j'y arrive pas, à chaque fois, la taille du div "icon-menu" influe sur le margin-top du div "texte". Je sais pas si je suis très clair. Voici mon code html et css:

<!DOCTYPE html>
<html lang="fr">

<head>
	<meta charset="utf-8">
	<title>Test Website</title>
	<link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="font-awesome.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
	<script type="text/javascript" src="script.js"></script>
</head>


<body>

	<div class="voile-left"></div>
	<div class="voile-right"></div>

	<div class="menu">

		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Contact</a></li>
			<li><a href="#">About</a></li>
		</ul>

	</div>


	<div class="icon-menu"><img src="home27-white.png"/></div>

	<div class="texte">
		
		<h1>Welcome in a new world.</h1>
		<div class="bouton">Let's start the Experience</div>
	</div>
</body>

</html>


@font-face {
  font-family: 'GeosansLight';
  src: url('geo_sans_light/GeosansLight.ttf');
}

html {
	margin:0;
  	padding:0;
	background: url('stars.jpg') no-repeat center bottom fixed;
	/*-webkit-background-size: contain;
    -moz-background-size: contain;
    -ms-background-size: cover;
    -o-background-size: cover;*/
    background-size: cover;
}

body {
	overflow: auto;
	position: relative;
	top:0;
	margin:0;
	
	
}


.voile-left {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	height: 100%;
	width: 25%;
	position: fixed;
	top: 0;
	z-index: -1;
}

.voile-right {
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	height: 100%;
	width: 25%;
	position: fixed;
	top: 0;
	right:0;
	z-index: -1;
}

.texte {
	color: white;
    
   
    text-decoration: none;
    text-align: center;

  	
    margin-left:auto;
    margin-right:auto;
    margin-top:150px;
    width: 800px;
 	
}

.texte h1 {
	text-shadow: 4px 3px 0 #000e18, 7px 6px 0 rgba(0, 0, 0, 0.1);
	font-size: 60px;
	font-family: 'GeosansLight', sans-serif;
}

.bouton {
	font-family: 'Open sans', sans-serif;
	font-size: 16px;
	margin-top:70px;
	border: solid 2px white;
	width: 250px;
	margin-right: auto;
	margin-left: auto;
	padding: 20px;
	
	cursor: pointer;
	text-transform: uppercase;
}

.menu {
	
	position: fixed;

    left: 75px;

    top: -20px;
}

.menu ul {
	list-style: none;
	margin: 0;
	padding: 0;

}

.menu li {
	display: inline;
	font-family: 'GeosansLight', sans-serif;
	padding: 10px;

}

.menu a {
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	font-size: 15px;
}

.icon-menu {
	cursor: pointer;
	margin-top:50px;
	width: 30px;
	color: white;
	
	position: fixed;

}


Merci pour votre, et hésitez pas si vous ne comprenez pas mes explications Smiley biggol
Modifié par Tenshi06 (01 Apr 2015 - 12:11)
Modérateur
Salut,

Pourquoi utiliser margin-top et non pas tout simplement top ?
.icon-menu {
	cursor: pointer;
	position: fixed;
	top:50px;
	left:0
	color: white;
}
Ah Jésus ! Ca marche merci ! A vrai dire je confonds souvent top et margin-top, j'ai encore un peu de mal à discerner la différence Smiley eek

Merci encore Smiley biggrin
Modérateur
Smiley smile avec plaisir, le margin et la fusion de marge ne sont pas évidents à prendre en main (Surtout avec le haut de la page !!).

Les margin (left ou autre hein) vont surtout servir pour espacer des éléments les uns par rapport aux autres ou bien pour centrer un élément. C'est un peu l'équivalent externe du padding.

Les positionnements top, left, right, bottom sont utilisés pour placer un élément (par rapport a un référentiel) mais sont essentiellement pratique et utilisés avec un positionnement absolute ou fixed comme c'est le cas ici. Ils fonctionnent avec les autres positionnement (relative, static etc) mais ce n'est pas courant de les utiliser pour ça, on préférera margin pour des raisons de respect flux.

Bonne continuation ! Smiley murf
Sujet clos
Aller à