Barres blanches, problème css? sur le forum Création de sites web - 24-11-2017 15:11:14

Liste des sujets

Barres blanches, problème css?

Mihawk1534

Niveau 6

24 novembre 2017 à 15:11:14

Salut, alors voilà, je suis totalement débutant et pour les cours je dois réaliser un site...

Mon problème est ces deux bande blanches en haut et à droite...Comment je fais pour les enlever ?

Merci !

#photoaccueil {
	width: 100%;
    height: 100%;
	
    
}

body {
	margin:0px;
	padding:0px;
	
}

li {
	list-style:none;
	text-align:center;
	top:38;

}

a {
	color:black;
	text-decoration:none;
	display:block;
	width: 200px;
	background-color:#ccc;
	padding:10px;
	float:left;
	
	
}

a:hover{
	background-color:#737373;
}

li ul {
	position:absolute;
	display:none;
	
}
#ul-bloc {
	left:220px;
	top:38px;
}

#ul-prof {
	left:440px;
	top:38px;
}

li:hover ul {
	display:block;
}

nav{
	text-align:center;
	top:38px;
	position:relative;
	left:80px;
}

<!DOCTYPE>
<html lang="fr">
	<head>
		<meta charset="utf-8">
		<title>Accueil</title>
		<link rel="stylesheet" href="style/style.css">
	</head>
	<body>
		<nav>
			<ul>
			<li><a href="#">Accueil</a></li>
			<li>
				<a href="#">Bases</a>
				<ul id="ul-bloc">
					<li><a href="#">Tenir son appareil </a></li>
					<li><a href="#">Expositon </a></li>
					<li><a href="#">Ouverture </a></li>
					<li><a href="#">Vitesse d'obturation </a></li>
					<li><a href="#">ISOs</a></li>
					<li><a href="#">Focus</a></li>
					<li><a href="#">Profondeur de champs</a></li>
				</ul>
			</li>
			<li>
				<a href="#">Choisir APN</a>
				<ul id="ul-prof">
					<li><a href="#">Débutants </a></li>
					<li><a href="#">Intermédiaires</a></li>
					<li><a href="#">Avancés</a></li>
					
				</ul>
			</li>
			<li><a href="#">Liens utiles</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
		</nav>
		<img src="images/photoaccueil.jpg" alt="Photo de fond" id="photoaccueil">
	</body>
</html>

Message édité le 24 novembre 2017 à 15:12:38 par Mihawk1534

DrazonYT

Niveau 5

24 novembre 2017 à 16:13:27

Il n'y a aucune barre blanche.

fanof_banni

Niveau 13

24 novembre 2017 à 19:47:21

Si tu veux mettre une image de fond, tu choisis l'élément sur lequel tu veux ce fond soit mis (par exemple ta balise body), et tu utilises en css l'attribut background auquel tu passes l'url de ton image.
Tu as ensuite d'autres attribut pour indiquer si ton image doit être agrandi, dupliquée, pour la repositionner si elle ne doit pas occuper tout l'espace etc...
A noter qu'un fond n'affecte pas la taille d'un élément, donc tu met un fond sur un élément vide qui fait 0px de hauteur, tu ne verras rien, ton élément fera toujours 0px.
Il est facile de palier à ce problème en appliquant du height, du min-height ou du flex-grow (ce dernier attribut ne te parle problablement pas, c'est du flex, tu verras ça sans doute plus tard, c'est super pratique).
https://www.w3schools.com/css/css_background.asp

Une balise image n'a absolument pas vocation à être utilisée comme tu le fais.

Depuis un navigateur, fais mumuse avec l'inspecteur (clic droit -> inspecter), pour moi celui de chrome est le plus agréable à l'usage, mais tu peux utiliser un autre navigateur si tu préfères.
Tu peux observer chaque éléments, vérifier les padding et les margin appliqués dessus, t'amuser à redimensionner les images, vérifier comment se comporte un élément quand tu changes son display etc...
Les modifications effectuées de la sorte sont perdues lorsque tu actualise ou ferme la page, elle ne modifient absolument pas ton fichier html.

Mihawk1534

Niveau 6

25 novembre 2017 à 09:21:12

Le 24 novembre 2017 à 19:47:21 fanof_banni a écrit :
Si tu veux mettre une image de fond, tu choisis l'élément sur lequel tu veux ce fond soit mis (par exemple ta balise body), et tu utilises en css l'attribut background auquel tu passes l'url de ton image.
Tu as ensuite d'autres attribut pour indiquer si ton image doit être agrandi, dupliquée, pour la repositionner si elle ne doit pas occuper tout l'espace etc...
A noter qu'un fond n'affecte pas la taille d'un élément, donc tu met un fond sur un élément vide qui fait 0px de hauteur, tu ne verras rien, ton élément fera toujours 0px.
Il est facile de palier à ce problème en appliquant du height, du min-height ou du flex-grow (ce dernier attribut ne te parle problablement pas, c'est du flex, tu verras ça sans doute plus tard, c'est super pratique).
https://www.w3schools.com/css/css_background.asp
Une balise image n'a absolument pas vocation à être utilisée comme tu le fais.
Depuis un navigateur, fais mumuse avec l'inspecteur (clic droit -> inspecter), pour moi celui de chrome est le plus agréable à l'usage, mais tu peux utiliser un autre navigateur si tu préfères.
Tu peux observer chaque éléments, vérifier les padding et les margin appliqués dessus, t'amuser à redimensionner les images, vérifier comment se comporte un élément quand tu changes son display etc...
Les modifications effectuées de la sorte sont perdues lorsque tu actualise ou ferme la page, elle ne modifient absolument pas ton fichier html.

Je ne peux dire que merci à ce message détaillé !

Aide à l'achat Mac
Steam Deck
Création de sites web
Création de Jeux
Linux
Programmation
Internet
Macintosh
Hardware

La vidéo du moment

News jeu

187 611 spectateurs

Halo: Campaign Evolved fait de la coopération sa plus grande force

Loin de se limiter à une simple refonte graphique, Halo: Campaign Evolved reconstruit la campagne du premier Halo en accordant une place centrale à la coopération. Que ce soit pour découvrir l'aventure une première fois ou la parcourir à nouveau, le titre multiplie les options pour permettre aux joueurs de former facilement une escouade, tout en ajoutant de nouvelles mécaniques qui encouragent la rejouabilité.

Toutes les news jeu