Hauteur du site extensible

Marsh Posté le 02-06-2009 à 17:16:16

Bonjour à tous,

Je suis actuellement en train de développer un site internet pour une de mes actions pro en BTS. Mon problème est que je n'arrive pas à ce que ma page s'agrandisse automatiquement en fonction de la longueur du texte.

Voici une image générale du site :

Voici comment se compose mon contenu :

Le haut du contenu (en dégradé) :

Puis l'image de répétition, qui continue le contenu :

Mon texte commence sur le dégradé, et termine sur l'image de répétition. Je n'arrive pas à faire répéter automatiquement cette image de répétition afin qu'elle se termine à la fin de mon texte. Pourriez vous m'aider ?

Merci

Reply

Marsh Posté le 02-06-2009 à 17:16:16

Reply

Marsh Posté le 03-06-2009 à 03:39:05

Salut,

si je comprends bien, l'image que tu montres ici est un montage photoshop du résultat que tu voudrais ?

Parce que si c'est un screenshot du site effectif, il me semble que ça répond exactement à ce que tu cherches à faire non ?

Reply

Marsh Posté le 03-06-2009 à 09:52:16

Oui c un montage photoshop, c'est ma maquette. Le site est tres bien avancé, mais il me reste ce problème.

Reply

Marsh Posté le 03-06-2009 à 13:38:42

Normalement, on met l'image de fond à répéter en arrière-plan de la zone qui contient le texte, et on la définit comme extensible.

Fichier CSS =>

Code :

#contenu {background-image:url(monimage.jpg);
background-repeat: repeat-x;}

Fichier HTML =>

Code :

<div id='contenu'>blabla...</div>

Après, sans voir le code c'est un peu difficile de dire comment faire :sarcastic:

Reply

Marsh Posté le 03-06-2009 à 21:17:46

Vu que ça commence sur l'image du haut, je ne peux pas faire comme ça. Voici le code :

Index.php :

<div id="contenu">
<div class="menuGauche">
<div class="elementMenuGauche"><a href="rien.html">Partenaires</a></div> 
<div class="separationMenuGauche"></div> 
<div class="elementMenuGauche"><a href="rien.html">Particuliers</a></div> 
</div>

<div class="contenuDroite">
<div class="contenuTitre">
Album photos 
</div>
<div class="contenuTexte">
Mon texte 
</div>
</div>
</div>

<div id="textureY">
</div>

CSS :

#contenu
{
width: 920px;
height: 133px;
margin: auto;
background-image: url("Images/Contenu/Haut.png" );
background-repeat: no-repeat;
}

#textureY
{
width: 920px;
height: 450px;
margin: auto;
background-image: url("Images/Contenu/TextureY.jpg" );
background-repeat: repeat-y;
}

.menuGauche
{
width: 147px;
margin-top:45px;
margin-left: 32px;
float: left;
color: white;
font-size: 14px;
text-decoration: none;
font-family: "Arial", serif;
}

.elementMenuGauche
{
color: white;
margin-bottom: 10px;
margin-top: 10px;
font-size: 14px;
text-decoration: none;
font-family: "Arial", serif;
}

.elementMenuGauche a
{
color: white;
font-size: 14px;
text-decoration: none;
font-family: "Arial", serif;
}

.elementMenuGauche a:hover
{
color: #ff6633;
}

.separationMenuGauche
{
height: 2px;
width: 147px;
margin-top: 10px;
background-image: url("Images/MenuGauche/Separation.png" );
background-repeat: no-repeat;
background-position: center center;
}

.contenuDroite
{
margin-top: 35px;
margin-left: 80px;
float: left;
color: #242321;
font-size: 14px;
text-decoration: none;
font-family: "Arial", serif;
}

.contenuDroite a
{
color: #242321;
font-size: 12px;
text-decoration: none;
font-family: "Arial", serif;
float : right;
}

.contenuDroite a:hover
{
text-decoration: underline;
}

.contenuTitre
{
color: #ff6633;
font-size: 30px;
text-decoration: none;
font-family: "Arial", serif;
font-weight: bold;
}

.contenuTexte
{
margin-top: 30px;
width: 625px;
text-decoration: none;
font-family: "Arial", serif;
}

PS : ici (http://eventfuldestiny.olympe-netw [...] /index.php)un aperçus du site

Message édité par sk077 le 03-06-2009 à 22:40:55

Reply

Marsh Posté le 03-06-2009 à 23:57:33

Quelques réflexions vite fait :
1. Un DIV vide, c'est mal.
2. Un DIV utilisé juste pour contenir un autre DIV, c'est mal (ton menu qui ne contient que objetsMenu)
3. Une balise DIV, c'est ce qu'on utilise quand on n'a rien d'autre. En l'occurrence, on peut considérer qu'un menu est une liste d'éléments...
4. Dans le même registre, pourquoi mettre ton titre dans un DIV alors que la balise H1 sert à ça ?
5. Pense à valider ton site (ICI).
6. Ton titre "A propos", pourquoi utiliser une image ?

Tu pourrais refaire la maquette avec un dégradé plus marqué ? Parce que là, j'ai du mal à voir où il s'arrête.
A priori, je te conseillerais de revoir ton code, en commençant par définir clairement tes zones, et ensuite en essayant de "coller" la présentation. Là, il y a beaucoup de balises qui n'ont pas d'autre utilité que de "positionner" tes images.

Reply

Marsh Posté le 04-06-2009 à 10:05:10

Pour la balise H1 je n'y avais pas pensé, c'est vrai.
Ensuite le titre A propos est une image car la police utilisée n'est pas une police par défaut dans chaque système d'exploitation.
Pour le dégradé, c'est un dégradé qui se voit très peu, mais pour moi c'est ce qui contribue au site à avoir un look sympas.
Sinon, je vais voir comment modifier tout ce que tu m'as dit, merci !

Reply

Marsh Posté le 04-06-2009 à 10:49:01

D'accord pour le dégradé, mais pour les tests c'est un peu délicat, vu qu'il est assez discret.
Je te conseillerais de mettre un dégradé bien contrasté le temps de faire ta mise en page.

Reply

Hauteur du site extensible

Sujets relatifs:

Leave a Replay