Gerer les diminutions de pages

dourlens59 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention   -  
cubeur78 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   -
Bonjour,
Je suis actuellement entrain de créer un site web,
Je suis confronté à un problème, lorsque que je diminue la taille de ma page, ma page ne ressemble plus à rien.
Y'a t'il un style CSS qui permet de fixer des "<div>"
Cordialement,

6 réponses

Réponse 1 / 6
dargihk
 
Dur de deviner sans voir le code :s


Le problème peut venir des dimensions des éléments de votre page. Vous devez le faire en taille relative(pourcentage) pour qu'elle s'adapte à toutes les tailles(ratio longueur/largeur) et résolutions d'écran.

>Y'a t'il un style CSS qui permet de fixer des "<div>"
Que voulez vous dire? Vos div se déplacent ils?
En html et avec CSS les éléments sont positionnés à la suite sauf si on veut les sortir du flux. Il y a 2 types de comportements pour les balises: inline et block. Inline (en ligne) va remplir l'espace restant sauf si l'espae est insuffisant. Block ira à la suite en utilisant sa propre ligne.

Quand un élément est fixé (fixed en CSS) il l'est par rapport à la page et l'on peut scroller la page il restera à la plae où il est fixé(donc toujours présent où que l'on soit dans la page); cela permet d'avoir par exemple un élément de navigation mais je ne pense pas que c'est ceci que vous voulez.
0
Réponse 2 / 6
bg62 Messages postés 23735 Date d'inscription   Statut Modérateur Dernière intervention   2 409
 
ah !!!
et au départ la css est ???
0
Réponse 3 / 6
cubeur78 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   65
 
Il serait préférable d'avoir le lien de votre site ou le code.
Comme la dit dargihk, vos problème viennent du fait que vos dimensions sont sûrement en "px" et non en "%".
0
Réponse 4 / 6
dourlens59 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention  
 
Comme exemple voici le code mon header :

<div id="header" style="height:200px;" >
<br/>
<div id="boutonAccueil"><a class="bouton" href="accueil.php" > Accueil </a></div>
<div id="boutonFilm"><a class="bouton" href="listefilms.php?listefilm" > Film </a></div>
<div id="boutonSerie"><a class="bouton" href="listefilms.php?listeserie" > Serie </a></div>
<div id="boutonContact"><a class="bouton" href="contact.php" > Contact </a></div>
</div>

Et voici le css pour le header :

#header{
background-image:url(barreHaut.png);
background-repeat: no-repeat;
Float:center;
}

#boutonAccueil{
Float: left;
margin-left:275px;
margin-top: 112px;
font-weight: bold;
}
#boutonFilm{
Float: left;
margin-left:265px;
font-weight: bold;
margin-top: 112px;
}
#boutonSerie{
Float: left;
margin-left:265px;
font-weight: bold;
margin-top: 112px;
}
#boutonContact{
Float: left;
margin-left:255px;
font-weight: bold;
margin-top: 112px;
}

Quand je réduit ma page, les contenus texte de mes boutons vont faire un retour à la ligne. Je voudrais qu'il reste figer si on doit redimensionner la page
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
cubeur78 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   65
 
J'ai quelques peu remanié ton code :

HTML
<header>
<div id="header">
<br/>
<span class="bouton_menu"><a class="bouton" href="accueil.php">Accueil</a></span>
<span class="bouton_menu"><a class="bouton" href="listefilms.php?listefilm">Film</a></span>
<span class="bouton_menu"><a class="bouton" href="listefilms.php?listeserie">Serie</a></span>
<span class="bouton_menu"><a class="bouton" href="contact.php">Contact</a></span>
</div>
</header>

CSS
#header
{
background-image:url(barreHaut.png);
background-repeat: no-repeat;
text-align:center;
}

.bouton_menu
{
margin-left:4%;
margin-right:4%;
font-weight: bold;
}

Tu peux modifier l'espace entre les mots dans le marin-left et le marin-right du CSS mais il faut que les deux restent identiques pour que ton menu soit centré
0
Réponse 6 / 6
dourlens59 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention  
 
Merci de ta réponse, j'ai donc mis en place ton code, mais le problème c'est que le contenu Texte reste bloquer tous en haut, j'ai beau mettre "margin-top:" le texte reste figer tout en haut.
0
cubeur78 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   65
 
tu veux le mettre où ?
0
dourlens59 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention  
 
J'aimerais pouvoir gérer son positionnement en venant du haut, j'avais mis la margin-top: à 112px
0
cubeur78 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   65
 
il te suffit de rajouter cette ligne :
margin-top: X%;
au header dans le CSS en remplaçant X pour que ton menu soit décalé du haut de la fenêtre
0
dourlens59 Messages postés 65 Date d'inscription   Statut Membre Dernière intervention  
 
Quand je met cet ligne dans le header, le texte va bien descendre avec son image qui sera en arrière plan, mais le texte sera toujours en haut de l'image, alors qu'il faudrait qu'il descende dans l'image
0
cubeur78 Messages postés 98 Date d'inscription   Statut Membre Dernière intervention   65
 
Sans l'image en question je ne peut pas trop t'aider
0

Discussions similaires

Impossible de créer ou gérer une page Facebook
Cathou18 -
Cathou18 -

4 réponses