28234 sujets

CSS et mise en forme, CSS3

Div conteneur jusque tout en bas

Bonjour a tous,

voila je fait un site et mon design pourrais s'apparenter a celui ci : http://www.104vip.com/

donc le design ne se colle pas au dessus mais en dessous oui

et j'aimerais savoir comment faire pour coller ma div conteneur jusque en bas de ma page ?

PS : le site est fait avec un tableau (l'exemple ci dessus) et moi je le fait avec des div donc c'est ca la difference :rolleyes:

Merci d'avance Smiley bawling
Modifié le 02 Dec 2004 - 00:42
Modérateur
Bonjour,

Je suis pas certain d'avoir compris ton problème, mais est-ce que tu veux dire que tu as un espace en haut de page ? Si oui, il s'agit de la marge par défault de la balise body. Tu peux retirer cette marge via CSS :

body {
margin:0;
padding:0;
}

J'ai mis le padding aussi car j'ai déjà lu quelque part que c'était plus sûr (certains navigateurs pourraient avoir un padding par défault sur le body).

À bientôt !
lol ton code colle ma div au dessus de la page alors que je le veu en dessous...

donc

|-----------------|
| ma page |
| ------------- |
| | ma | |
| | div | |
|-----------------|

tu vois un peu ce que je veu donc il ya un espace au dessus mais en dessous c'est collé ...
Salut dib258,

J'avais un problème similaire! je l'ai résolu par les valeurs négatives:

margin-top: -12px;

par exemple
Comme c'est ton premier post, je t'invite à lire Aide / Règles.

Le lien mentionné plus haut ne nous renseigne pas vraiment sur ton problème.

Je te suggère de décrire ton problème avec plus de précision. Pour ce faire, tu peux poster quelques codes et un exemple en ligne serait un atout.

Par ailleur, comme c'est coutume ici sur le Forum Alsacréations, je t'invite à passer au Bar du forum pour Le post des présentations.
Modifié le 02 Dec 2004 - 04:00
Dib258 a écrit :
Bonjour a tous,

voila je fait un site et mon design pourrais s'apparenter a celui ci : http://www.104vip.com/

donc le design ne se colle pas au dessus mais en dessous oui

et j'aimerais savoir comment faire pour coller ma div conteneur jusque en bas de ma page ?

PS : le site est fait avec un tableau (l'exemple ci dessus) et moi je le fait avec des div donc c'est ca la difference :rolleyes:

Merci d'avance


Bonsoir,
La structure que tu souhaites réaliser n'est pas très compliquée, Alsacréations et son auteur met à disposition des tutoriels et des modèles de mises en page que l'on a tout intérêt à consulter pour s'inspirer et trouver une base de départ. Je t'invites à consulter cette partie du site:
http://www.alsacreations.com/articles/

Par ailleurs après tes premiers posts je te convie à venir te présenter dans notre "bar du forum" comme le veut la tradition.

édit:@Stephan coutume, tradition on est pas loin Smiley cligne
Modifié le 02 Dec 2004 - 00:29
Modérateur
a écrit :
lol ton code colle ma div au dessus de la page alors que je le veu en dessous...


C'est juste que j'avais pas trop saisis ce que tu voulais réaliser. C'était pas très clair je crois. Smiley rolleyes Smiley smile
Ok merci a tous mais j'ai résolu le problème qui m'embetait ...

mais comme le dit le bon dicton une erreur en cache une autre ><

et donc maintenant j'ai fait ceci : http://sites.neeweb.com/dib258

donc la présentation marche bien sous FireFox sous IE ya un problème de décalage d'un pixel ...

mais si vous réduiser un peu la fenetre vous verrez que le fond d'écran va vers la gauche ce qui est très genant :s

donc j'aimerais que la div conteneur sois comme coller au background
pour cela je vous met du code :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
	margin:0px;
	padding:0px;
	text-align:center;
	background-image : url("images/fond_site.gif");
	background-repeat : repeat-y;
	background-color :#CACACA; /*#E2E1E1*/
	background-position:56%;
}
#conteneur {
	width: 660px;
	
	margin-left:auto;
	margin-right:auto;
}
</style>
</head>
<body>
<div id="conteneur">
	<img src="images/header.gif" alt="header" />
	<a href="#">Home</a> - 
	<a href="#">Forum</a> - 
	<a href="#">Calendrier</a> - 
	<a href="#">Photo</a> - 
	<a href="#">Contact</a>
	<br /><br />
	<img src="images/haut_page.gif" alt="haut_page" />
	<div id="page">
	salut
	</div>
	<img src="images/bas_page.gif" alt="bas_page" />
</div>
</body>
</html>


Voila merci d'avance (je cours me presenter Smiley lol )

PS : j'ai retirer une partie de code pour que ca soit plus facile a piger Smiley langue
À mon avis c'est le background-position:56%; qui cause problème.

Tu peux essayer la déclaration suivante :

body {
   margin: 0px; 
   padding: 0px; 
   text-align: center; 
   background: #cacaca url("images/fond_site.gif") top center repeat-y; 
}


En ce qui concerne les propriétés raccourcies :
http://www.yoyodesign.org/doc/w3c/css2/colors.html#propdef-background

Et puis au cas ou ça t'intéresserait : Le DOCTYPE qu'il vous faut

PS : Chouette ton avatar ! Smiley cligne
Modifié le 02 Dec 2004 - 19:47
Lol merci stephan c'est deja un net avancement Smiley lol

mais il ya encore un bug sous Mozilla qu'il n'y a po sous IE ...

http://sites.neeweb.com/dib258

il ya un décalage d'un tout tout tout tout petit pixel ... qui fait tout foirer Smiley bawling

sais t'on modifier cela ?

PS : merci pour mon avatar Smiley langue
Modifié le 02 Dec 2004 - 20:30
À tout hasard, tu peux essayer de rajouter : background-attachment: fixed; mais ceci dit sous toute réserve.
"Connection refusée lors de la tentative de contact de ... "

Tu peux décrire ici comment ton problème a été résolu, sinon le sujet ne sera utile à personne.

Si ton problème est réglé, un tag [Résolu] serait bienvenu en éditant ton sujet.

Merci !
Modifié le 03 Dec 2004 - 05:06
Sujet clos
Aller à