Bordure de page

Ecam · Message par **Ecam** » 29 avr. 2012, 21:37

Bonsoir,

Sur mon site, j'ai créé à droite et à gauche de la page des bloc div (aligne=gauche/align=droite), j'ai rajouté du texte à l'intérieur. Ces blocs ont une hauteur définie, et ce que j'aimerai c'est qu'elles descendent automatiquement jusqu'en bas de la page. Mon site contient plusieurs page mais n'ont pas forcément la même hauteur. Et donc j'aimerai que ces blocs descendent automatiquement jusqu'en bas des pages selon leurs hauteur.
J'ai tenté le "height=100%" mais ça ne fonctionne pas

Voici le code html d'un des bloc :

Code : Tout sélectionner

</style>
</head>
<body>
<div align="left" id="gauche">  
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p> ECAM</p>
  <p>ECAM  </p>
  <p>ECAM  </p>
  <p>ECAM  </p>
  <p>ECAM  </p>
  <p>ECAM  </p>
  <p>ECAM  </p>
  <p>ECAM  </p>
  <p>ECAM</p>
  <p>ECAM</p>
  <p>ECAM</p>
  <p>ECAM</p>
  <p>ECAM</p>
  <p>ECAM</p>
</div>

voici le code css de ce bloc :

Code : Tout sélectionner

#gauche {
	border-style: outset;
	border-color: black;
	text-align: center;
	float: left;
	font-weight: bold;
	background-color: #ff9900;
	margin-left: 1%;
	color: #cc0000;
	font-style: oblique;
	width: 65px;

GAUNCE · Message par **GAUNCE** » 30 avr. 2012, 12:42

Bonjour,
Si tu mets 100%, c'est 100% du contenu. C'est à dire que si tu as 3 lignes tu auras un immense vide sous ton footer.
Si tu veux que ta page aille jusqu'en bas de l'écran, il faut lui donner une hauteur fixe, par exemple 768 px, bien entendu pour les pages à faible contenu.

Ecam · Message par **Ecam** » 30 avr. 2012, 13:45

Justement, pour aller en bas de la page, il faut faire un défilement. Mais la longueur de la page est différente selon la page. Or, au lieu délimiter manuellement la longueur du bloc pour chaque page, je cherche à ce qu'elle se fasse automatiquement.
La balise height=100 % ne fonctionne pas.

GAUNCE · Message par **GAUNCE** » 01 mai 2012, 12:08

Je suis pas sûr de te suivre. Donne nous l'adresse de ton site, ce sera beaucoup plus facile pour t'aider.

Ecam · Message par **Ecam** » 01 mai 2012, 13:00

Il n'est pas encore en ligne.

Dans ce site, je dois avoir une dizaine de pages, chacune d'elle à une taille différente, donc le bloc div aligné à gauche aura une hauteur différente également.
Ce que j'aimerai faire, c'est de faire en sorte que ce bloc descendent automatiquement en bas de la page. La balise height;100 % ne fonctionne pas.

GAUNCE · Message par **GAUNCE** » 01 mai 2012, 13:48

Ca ne descend pas tout seul, mais qu'en fonction du contenu ou de la taille que tu lui donnes. En html, il n'y a pas d'autre solution! Peut être en java script?

Ecam · Message par **Ecam** » 01 mai 2012, 15:37

Effectivement c'est en html. (height: 900 px; par exemple). Je pensais qu'une balise html/CSS pourrait la faire descendre toute seule.
Aurais-tu une piste où m'orienter sur le javascript ?

GAUNCE · Message par **GAUNCE** » 01 mai 2012, 19:21

En fait c'est possible, essaye de mettre dans le code css du bloc concerné ceci:
height: auto;
min-height: 900px;
si 900px est la taille de ton écran

Ecam · Message par **Ecam** » 01 mai 2012, 22:51

Comment connais-tu la taille de l'écran en px ?

atheo · Message par **atheo** » 02 mai 2012, 08:29

La hauteur de ton écran t'est donnée dans ses caractéristiques commerciales...

Sinon il existe un petit programme bien utile pou calibrer ses photos, textes etc. Pixelruler que tu peux entre autres télécharger là :

http://www.commentcamarche.net/download ... ixel-ruler

Sinon pour ton problème de hauteur de page es-tu allé voir le site d'Alsacréation ?

http://www.alsacreations.com/static/gabarits/liste.html
Il y a plein d'idées.

Bon courage

Ecam · Message par **Ecam** » 02 mai 2012, 11:55

J'ai jeté un oeil mais j'ai du mal à comprendre comment procéder et comment rendre le bloc factice.

Message par **chinon37** » 11 mai 2012, 09:27

Attention, les visiteurs n'ont pas forcément la même taille d'écran que le concepteur du site. Aussi créer une page avec une hauteur d'écran fixe n'est pas une bonne idée. Cela peut amener à des résultats bizarres!

Pour le résultat que tu souhaites, si j'ai bien compris, il faut que tu utilises la méthode de l'image de fond, comme je l'explique dans un autre poste.
Je te conseilles de créer une image avec le ECAM sur le fond de couleur que tu souhaites. Cette image sera toute petite et tu pourras la répéter à l'infini sur ton fond de page. En avant, il suffira de créer un bloc conteneur <div> avec un fond gris qui contiendra toutes les infos de ton site.
Ce code te donne une idée du résultat:

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><meta content="text/html; charset=UTF-8" http-equiv="content-type">

<title>essai</title><style type="text/css">
#fondpage {
  width: 1200px;
  min-height: 100%;
  margin-right: auto;
  margin-left: auto;
  background-color: #cccccc;
  height: 1000px;
  margin-top: 0px;
  padding-top: 0px;
}

</style></head><body style="background-image: url(file:///C:/Users/user/Desktop/heron1.png);">
  
<div id="fondpage">
<h1 style="color: red; text-align: center;">Contenu</h1>
</div>

</body></html>

Copie d'écran du résultat: ici

Geckozone

Bordure de page

Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Re: Bordure de page

Qui est en ligne ?