28173 sujets

CSS et mise en forme, CSS3

Bordure & alignement vertical...

Bonjour à tous Smiley smile

J'ai un petit souci en CSS... Je veux mettre une bordure TOUT AUTOUR de mon site, centré verticalement et horizontalement.
Problème : que je mette une bordure à body ou à ma div générale, tout se décalle après (il y a des blancs qui apparaissent autour des images, et même des images qui partent sur Firefoxounet)...

Autre problème : j'ai bien lu la FAQ concernant l'alignement vertical, mais rien n'y fait... Peut-être à cause de mes propriétés déjà présentes ?

Voici le code...
De la page HTML :


<body>

<div id='total'>

	<div id='haut'>
	</div>

	<div id='haut2'>
		<img src='images/haut2.gif'></img>
	</div>

	<div id='gauche'>
	</div>

	<div id='page'>
	</div>

	<div id='bas'>
	</div>

</div>

</body>


De la feuille de style :


body {
    margin: 0;
    text-align: center; /* pour corriger le bug de centrage IE version anterieure a 6 */
	background-color:black;
}

img {
	display: block;
}

#total {
    margin-left: auto;
    margin-right: auto;
	width:739px;
    text-align: left; /* on rétablit l'alignement normal du texte */
}

#haut {
	width:568px;
	height:92px;
	background: url(images/haut1.gif);
	float:left;
}

#haut2 {
	width:168px;
	height:92px;
	float:left;
}

#gauche {
	background: url(images/gauche.gif);
	width:172px;
	height:397px;
	top:92px;
	float:left;
}

#page {
	background: url(images/page.gif);
	width:564px;
	height:397px;
	top:92px;
	float:left;
}

#bas {
	background: url(images/bas.gif);
	width:736px;
	height:74px;
	top:490px;
	float:left;
}


Pour la bordure, j'ai essayé de la mettre dans BODY et TOTAL... en vain, ça fait péter mes images Smiley decu . J'ai aussi essayé de faire DIV par DIV (border-top pour le haut, border-left etc etc...)
( avec : border: 1px solid black; )

Merci d'avance si quelqu'un sait m'aider.......... chers gens de AlsacreationS (ça y est ! je n'oublie plus le "s" !).
Modifié par Clemdups (03 May 2006 - 09:41)
Modérateur
bonjour,

je ne comprends ce que tu veux dire a propos des images, mais je remarque que tout tes element dans "total" sont en float, ce qui a pour effet de ne pas aggrandir le conteneur dans fifou Smiley smile , essai un "overflow:hidden;" et une bordure a "total" pour voir ...
++
Bonjour et merci d'avoir répondu.
J'ai trouvé une solution, mais c'est une code de porc......
Enfin dans tous les cas, ça fonctionne à présent Smiley cligne . Merci quand même Smiley smile .
Sujet clos
Aller à