Probleme d'images décalées

avec css ?

Sujet résolu

30 mars 2006 à 20:19:37

Bonjour !!
Alors voila mon probleme :

J'ai démarré un site sur la programmation de calculatrice, hébergé par ifrance.
Pour l'instant je n'ai fait qu'une seule page :index.php

J'y ai mis la présentation et une grande image pour tester mon bouton en bas de page "Remonter", qui remonte jusqu'au haut de page comme vous l'avez deviné

.

Seulement voila, sur mon PC tout marche à merveille (j'ai firefox bien sur) et sur les pc de la salle info de mon lycee tout foire : mon texte va en bas du menu, comme si celui ci n'était pas en float et bien sur, mes images (la grosse image et une image de presentation) se décalent sur le fond de mon menu auquel j'ai appliqué un repeat-y.
Voici le code css de mon menu....

/* MENU */
#menu
{
float:left;
width:186px;
margin-left:0;
margin-right:0.5%;
margin-top:0;
font-size:0.95em;
background :url("fond_menu.png");
background-position:top;
}
#menu h5
{
margin:0;
padding-top:2px;
padding-left:10px;
padding-bottom:0;
vertical-align:bottom;
color:#FFF;
font-size:1em;
background:url("header_menu.png") no-repeat;
background-position:center;
}
#menu ul
{
list-style-type:circle;
list-style-position:inside;
padding:0;
margin:0;
margin-top:2px;
color:#464646;
margin-bottom:10px;
}
#menu li
{
padding-left:5px;
background:url('fond-lien.png') no-repeat;
margin-bottom:5px;
list-style-image:url('puce.gif');
}
#menu ul ul
{
padding:0;
margin-left:20px;
}
#menu ul ul li
{
margin-top:5px;
background:inherit;
list-style-image:url('minipuce.gif');
}
#menu .element_menu
{
padding:0;
margin:0;
margin-bottom:10px;
margin-top:0px;
}
#menu_pub
{
width:95%;
overflow:hiden;
text-align:center;
padding-top:10px;
}

....et le code(simplifié) de mon index :

<div id="menu">
<?php include("menu.php"); ?>
</div>

<div id="menu_horizontal">
<ul>
<li><a href="index.php"><img src="accueil.gif" alt="accueil" />Accueil</a></li>
<li><a href="http://univers-ti.forumactif.com"><img src="forum.gif" alt="forum" />Forum</a></li>
<li><a href="contact.php"><img src="contact.jpg" alt="contact" />Contact</a></li>
<li><a href="admin.php"><img src="admin.jpg" alt="admin" />Admin</a></li>
</ul>
</div>

<div id="corps">
<?php
include("presentation.php") ;
include("news.php");
?>
</div>

Commen vous l'avez remarqué, j'inclus presentation.php :

<div id="welcome">
<img src="welcome.png" alt="Bienvenue sur Univers Ti"/>
</div>

<span class="presentation_puce">
<p id="ancre_remonter">
<ul>
<li>
<strong>Mais qu'est-ce que c'est que ce site ?</strong>
: Ce site est THE site de la programation sur Ti82 Stats à Ti83+ !
</li>
<br/>

<li>
<strong>C'est pour qui ?</strong>
: Eh bien...pour tous ceux qui ont une calculette <acronym title="Texas Instruments">TI</acronym>82 Stats à 83+
</li>
<br/>

<li>
<strong>C'est payant ?</strong>
: Bien sur que non !! Ce site regroupe des centaines de programmes en tous genre : jeux, maths, physique, svt, apps...et bien plus encore !<br/>
</li>
</p>
</span>
<img src="giant.jpg">

le css :

#welcome
{
margin-top:15px;
margin-bottom:5px;
}

Mes questions :

-Avez vous le meme bug que les ordis de mon lycee
-Si oui quelle est la solution ?

Voila merci beaucoup !!

Ah oui...le lien c'est ici

baba0076

30 mars 2006 à 20:25:34

Tout fonctionne bien chez moi, mais aufaite, c'est bien de copier...

Phnx

30 mars 2006 à 20:29:15

Oui j'ai le meme bug sous firefox o_O

Question : est ce que c'est normal la photo en dessous de ton texte ?

Pour la solution essaye de mettre un float-right dans ton menu5 ou celui qui gere la page centrale =]

thurzaz

30 mars 2006 à 20:46:52

@baba0076 :
Pour la copie c'est vrai que je me suis fortement inspiré du site du zero mais c'est pour le temps de créer les autres pages, afin d'avoir une vue d'ensemble du site .
Apres je changerai c'est évident

@Phnx :
Oui c'est une grande photo dont la seule utilité est de tester mon ancre "remonter" située en bas de page, comme je l'ai expliqué .

merci pour vos reponses je vais essayer le float right (tu veut dire dans body ?)

pascall

30 mars 2006 à 21:10:18

salut

c'est quoi les dimensions de ton image "welcome ?
je me demande si ce n'est pas elle qui est en cause

gcyrillus

30 mars 2006 à 21:11:24

bonjour,

ta page est fluide, et si la fenetre de l'ecran est inferieur a largeur du menu + le contenu et l'image, ça passe tout sinplement sous le menu.
en fixant une largeur a #banniere(ou mettre tout dans un conteneur global avec une largeur ) tu peut assurer alors une largeur minimale a ta page et garantir l'espace suffisant pour menu et contenu en largeur.

Autre soucis:

Voila le debut de ta page en ligne ...
Si tu affiche la page dans internet exploreur il l'a decodera fâçon html et css1, il reste en mode "quirk" (interpretation html et css de base) . car n'importe quoi placé avant le doctype fait qu'il l'ignore totalement.
C'est ton hebergeur gratuit qui ajoute ce script a ta page ...

Les cours du SDZ preconisent maintenant un doctype xhtml 1.0 . Ton xhtml 1.1 est inutile

fan de pluxml je suis cuisinier et codeur amateur. Des thèmes pour pluxml ? Oui

thurzaz

31 mars 2006 à 9:22:26

En effet, le probleme venait de la taille de l'image.

Sinon pour le doctype j'ai mis 1.0 au lieu de 1.1

merci beaucoup pour vos reponses qui ont apportés une solution a mes problemes !

thurzaz