structure site Fermé

Question

Bonjour, 



je suis nouveau dans le domaine de création de sites et j'ai donc quelques petits soucis !
Tout d'abord j'ai voulu divisé mon site en 3 parties : le bandeau en haut, le contenu et le pied de page. Et j'aimerais savoir comment mettre une image ds chaque partie différente ? Quand j'essaie d'en mettre elle dépasse de la partie dans laquelle je veux la mettre, et en plus est par dessus mon texte, je voudrais qu'elle soit comme un fond d'écran.
Voici le code : 
div#bandeau {
	width: auto;
	height:320px;
	background-color:;
	}
div#contenu {
	width:900px;
	height:80px;
	background-color: gray;
	}
div#piedpage {
	width: 900px;
	height:250px;
	background-color:;
	}

Pour le menu (contenu), j'ai mis couleur grise pour faire un bandeau gris histoire que l'on distingue bien le menu, et voulai ssavoir si a la place de ce "bandeau" il était possible d'insérer une image ? 
Merci d'avance !

animostab · Answer

Bonjour

c'est possible en rajoutant
background-image:url("chemin/image.jpg");

ton image doit être de la meme taille que ta div
attention au chemin vers ton image a savoir identifier dans quel dossier est ton css, meme chose pour l'image

https://www.alsacreations.com/astuce/lire/78-quelle-est-la-diffrence-entre-les-chemins-relatifs-et-absolus.html

etc · Answer

merci pour ta réponse rapide ça marche très bien ! 
Un autre petit soucis, centrer. J'ai un menu à gauche que j'aimerais positionner au milieu de l'écran, et laisse à gauche et  à droite un espace vide dans lequel je rajouterais une photo.
Voici le code :
@charset "utf-8";
/* CSS Document */

#menu {
  width: 210px;
  list-style: none;
  margin: 10;
  padding: 0;
}

#menu li {
 background: gray;
 border: 1px solid black;
 margin-bottom: 0px ;
 font-size: 18px;
 color: #00F;
 
}

a {
  text-decoration:none;
 }

#menu li a:hover, #menu li a:focus, #menu li a:active {
  background: #1293D8 ;
  text-decoration: underline ;
}

En rajouter margin il n'y a que tres peu de différence, juste 1cm environ de décallage, j'ai beau mettre 1000 ou plus cela ne change rien aucune différence, est ce normal ?

Et pour l espace a gauche et a droite je n'ai qu'a créer un "bloc" avec div je suppose ?

animostab · Answer

sans le code html pas facile a dire

fait deja ca

#menu {
width: 210px;
list-style: none;
margin: 10 auto;
padding: 0;
}  

#menu ul {
text-align:center;
margin:0;
padding:0;
}
 
sinon en mettant 3 div avec float:left; ou display:inline-bloc; pour faire ce que tu veux (la somme de largeur des 3 divs ne doivent pas depasser la largeur de leur parent)
pour display:inline-bloc attention au white-space

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

etc · Answer

Super merci. Pour le menu ul a quoi cela sert ? En le mettant ou en l enlevant il n y a aucune différence. Et n'est il pas possible de régler plus précisement ? la ca me place le texte au milieu c est ce qu je veux, mais par curiosité si je voulais le placé un peu plus à gauche ou a droite ? Vu qu'en changeant 10 par n'importe quel autre nombre cela ne change rien. Pour le code html le voici : ...

Bienvenue sur le site des centres sociaux de Toulon,
nous vous présenterons ici les différents projets de nos services civiques.

etc · Answer

Une autre chose, pour la barre de menu j'aimerais qu'elle prenne toute la longueur de la page, et la il y a un espace vide aux extrémités : http://cjoint.com/?DACjHoSEeHd

si vous avez une solution merci.

animostab · Answer

UL indique une liste non numérotée donc ne pas retirer ca

margin: 10 auto; c'est centré donc mettre plus a gauche tu dois jouer sur les margin 

10 auto  c'est  vertical  hrizontal

sinon met margin: et quatre nombres avec px (haut droite bas gauche)   

supprimer les espaces
body:{
margin:0;
padding:0;
}

et après tu peux marger tes éléments

Un conseil
apprends le html css grace a ces tutos que tu dois tous suivre
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3

les astuces du css
http://css.mammouthland.net/

 
Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

etc · Answer

Merci encore, j'avais commencé à apprendre le html et le CSS mais il y a toujours des petits éléments ou je galère :)
Par exemple pour la barre de menu, comme j'ai montrer dans le lien cjoin, j'ai 3 boutons à gauche et un a droite, je voudrais centrer tout ces boutons au milieu de ce menu, j'ai essayé de remplacer left par center, les boutons se mettent bien au milieu de la page, par contre ils ne sont plus en ligne mais en colonne... voici le  code :
@charset "utf-8";
/* CSS Document */

#barre li { 
display : inline;
background: dimgray ;
padding : 0 0.5em;

}

#barre {
}

#barre li a:hover, #barre li a:focus, #barre li a:active {
  background: #1293D8 ;
  text-decoration: underline ;
}

li.bouton_gauche {
float : left;
}
li.bouton_droite {
float : right;
}

Aussi comme vous pouvez le constater en bas de la page c'est tout blanc :/ le fond n'est pas pris en compte comment ça se fait ?

Structure site

7 réponses

Discussions similaires