Hauteur du site extensible

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Hauteur du site extensible

sk077

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

Publicité

ZeBix

edit > preview

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 ?

sk077

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

macgawel

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:

sk077

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

macgawel

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.

sk077

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 !

macgawel

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.

FORUM HardWare.fr

Programmation

HTML/CSS

Hauteur du site extensible

Sujets relatifs
1er site à la main et premieres erreurs	Newbie absolu: comment ajouter un livre d'or à mon site svp
Site web supportant les sous domaines	Redirection sur toutes les pages d'un site
Aide modification de mon site	Choix CMS pour un site de vente particulier a particulier.
Excel : ajuster hauteur de la celulle par VBA	Comment est fait ce site CSS ?
[Résolut] Besoin d'aide : utilisation de toute la hauteur d'une page	Publier site en local avec easyphp
Plus de sujets relatifs à : Hauteur du site extensible

Page générée en 0.065 secondes