28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je construit petit à petit le squelette de mon site mais il y a un truc qui cloche et que je n' arrive à résoudre, je voudrais diminuer la hauteur du body, que normalement un simple " height: 800px; " dans le css devrais suffire sauf que ca ne marche pas ;( je ne comprend pas. J' ai aussi essayé en html:
<table cellpadding="0" cellspacing="0" border="0" width="100%" height="800px">
http://www.jeux-fr.eu/4
Modifié par gwenm (20 Jun 2011 - 15:14)
Bonjour,

ton tableau qui contient le contenu de ta page ne sert à rien.

Mets un div à la place, auquel tu donneras les propriétés voulues.

Ta page est si grande car tu as des choses en absolute placées bizarrement, à cause du tableau.
En éditant la page avec Firebug, j'ai viré ton tableau, mit un div conteneur avec la bonne couleur de fond, et en touchant deux trois propriétés CSS je suis arrivé à quelque chose de potable.

Ton tableau casse tes tentatives de mise en page, revois ça, et tout ira pour le mieux.
n3k0 a écrit :
Bonjour,

ton tableau qui contient le contenu de ta page ne sert à rien.

Mets un div à la place, auquel tu donneras les propriétés voulues.

Ta page est si grande car tu as des choses en absolute placées bizarrement, à cause du tableau.
En éditant la page avec Firebug, j'ai viré ton tableau, mit un div conteneur avec la bonne couleur de fond, et en touchant deux trois propriétés CSS je suis arrivé à quelque chose de potable.

Ton tableau casse tes tentatives de mise en page, revois ça, et tout ira pour le mieux.


Je vois ce que tu veut dire et je pense qu' il faut que je revoit tout mon code..j' ai trouvé ce lien qui devrais me permettre d' avancer http://pbnaigeon.developpez.com/tutoriel/CSS-HTML/mise-en-page-CSS/

Merci n3k0 Smiley cligne
Bonjour à toutes et à tous,

ton problème vient d'un mauvais usage des positions.

Dans le CSS pour le style #cont tu mets : position : relative;

puis tu modifies tes autres styles de la façon suivante :

/*------------------------------------*/
/*     Commun a toutes les boites     */
/*------------------------------------*/

.commun {
		background-image	: url(images/bg-grad.jpg);
		color				: #333333;
		border			: 2px solid #ffffff;
		padding			: 20px;
}

/*------------------------------*/
/*     Boite colonne Gauche     */
/*------------------------------*/

.lh-col{
		position			: absolute;
		top				: 154px;
		left				: 0px;
		width				: 130px;
		height			: 720px;
}

/*------------------------------*/
/*     Boite colonne Centre     */
/*------------------------------*/

.lh1-col{
		position			: absolute;
		top				: 154px;
		left				: 190px;
		width				: 470px;
		height			: 720px;
}

/*------------------------------------*/
/*     Boite haute colonne Droite     */
/*------------------------------------*/

 
.rc-col{
		position			: absolute;
		top				: 154px;
		right				: 0px;
		width				: 260px;
		height			: 200px;
}

/*-------------------------------------*/
/*     Boite centre colonne Droite     */
/*-------------------------------------*/

.rh-col{
		position			: absolute;
		top				: 414px;
		right				: 0px;
		width				: 260px;
		height			: 200px;
}

/*----------------------------------*/
/*     Boite bas colonne Droite     */
/*----------------------------------*/

.rc1-col{
		position			: absolute;
		top				: 674px;
		right				: 0px;
		width				: 260px;
		height			: 200px;
}


Et pour ton code HTML :

<div class="lh-col commun"><p class="text">gauche</p></div>
<div class="lh1-col commun"><p class="text">centre</div>
<div class="rc-col commun"><p class="text">haut droite</div>
<div class="rh-col commun">centre droite</div>
<div class="rc1-col commun">bas droite</div>


C'est pour cela que tu ne pouvais plus modifier la hauteur de ta background.

@+
Modifié par Artemus24 (20 Jun 2011 - 14:37)
Merci Artemus24 ! Comme je préfère que se soit fixe, j' ai préféré mettre absolute, mais en effet c'est pas trop mal...il faut juste que je remodifie mes valeurs maintenant, mais sinon, le grand espace qui avait à enfin disparut Smiley biggrin Un grand merci!