28172 sujets

CSS et mise en forme, CSS3

Problème avec mon "Bloc contenu" [Résolu]

Bonjour à tous, voila, je m'exerce au CSS sur un site "fake", en ayant repris pas mal de bases d'un gabarit alsacréations, j'aurais voulus conaître le problème dans mon code face à mon bloc contenu qui soit ne prend pas la largeur logique que je lui donne (je fait des soustractions de pixels avec le menu et l'éspace et j'arrive donc a 450px) soit en étant moins large ou trop et donc passant à la ligne du dessous laissant le menu seul...

[EDIT Laurie-Anne : Image trop grande]http://img179.imageshack.us/img179/9299/24826375.jpg

je vous joint mon code css si il peut aider, je ne voit pas de quoi cela peut venir, j'ai éesayer de lui donner une largeur "100%" mais dans son conteneur il passe automatiquement à la ligne,

merci à vous


#global {
	width: 750px;
	margin: auto;
	margin-top: 40px;
	margin-bottom: 20px;
}

#header {
	width: 750px;
	height: 150px;
	background: #800000;
	
}

#centre {
	width: 100%;
	overflow: hidden;
	background: #FFFFFF;
}

#navigation {
	width: 150px;
	height: 450px;
	float: left;
	margin-top: 20px;
	background: #B22222;
}

#contenu {
	width: 560px;
	height: 450px;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 20px;
	background: #B22222;
}

Modifié par Teytoon (10 Sep 2009 - 12:48)
Petit problème dans mon #header aussi, je souhaite appeler l'image header.jpg ce trouvant dans "img/header.jpg", j'ai placer ce code dans le css et celle ci n'aparait pas... Smiley decu 

#header {
	background-image: url(img/header.jpg);
    background-repeat: no-repeat;
    width: 750px;
	height: 150px;
    padding: 0;	
}
Je n'ai pas le temps de tester le code mais je me demande si ce n'est pas dû au "centre". Supprime les données de la classe .centre et regarde ce que cela fais.

J'ai calculé les width avec les margin et ça m'a l'air ok.

A++

Smiley cligne
Salut,

Finalement, je n'ai pas bien saisi ton erreur ou ce que tu as envie de faire.
J'ai cette fois ci testé ton code et il fonctionne.
Si tu veux que ton contenu n'ait pas de margin-right, ajoute 20px en plus à ton width.


#contenu { 
    width: 580px; 
    height: 450px; 
    float: left; 
    margin-left: 20px; 
    margin-top: 20px; 
    background: #B22222; 
}


Par contre , concernant la balise #centre, il vaux mieux que tu écrives ton width en pixel : 750px (tu utilises partout des pixels sauf là.)
Et ton overflow:hidden n'est pas nécessaire.

@+ Smiley cligne
Modifié par Oryo (09 Sep 2009 - 14:56)
Mon problème vient maintenant du menu,
j'ajoute un padding de 20 px à mon menu de navigation pour centrer un peut plus le texte tous en gardant le fer à gauche :

#navigation {
	width: 150px;
	height: 450px;
	float: left;
	margin-top: 20px;
	background: #800000;
	color: #FFFFFF;
	font-size: 12px;
	text-align: left;
	padding: 20px;
	line-height: 20px;
}


Mais voila ce que j'obtient :

[EDIT Laurie-Anne : Image trop grande]http://img200.imageshack.us/img200/2411/59579856.jpg

Encore ce fichu "contenu" qui passe à la ligne, alors que sans le padding il a sa place normale avec sa largeur maximal.

Smiley bawling help
Modifié par Laurie-Anne (09 Sep 2009 - 16:16)
Tu devrait peut-être faire une recherche sur "modèle de boite HTML"...

Tu comprendrais mieux pourquoi si tu as une padding de 20px et un width de 150px la largeur réelle de ton bloc sera de 190px.
Effectivement comme ça je comprend mieux... Mais je pensez que le padding été une marge intérieur qui n'influencé pas la taille du bloc, alors quelle balise utiliser pou centrer mon texte dans le bloc en gardant mon fer à gauche?

merci !
Effectivement ça marche, je vient aussi de comprendre que modifié le padding influé sur le design lui meme...
Bas j'ai maintenant un problème de différence d'hauteur entre mon contenu et mon navigation mais je crois conaître la solution, c'est de mettre une image en repeat et background Smiley lol (j'éesaye tout à l'heure), donc résolu oui !
Sujet clos
Aller à