CSS en vrac celon resolution ecran

Fermé
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 - 19 août 2009 à 12:23
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 - 19 août 2009 à 14:24
Bonjour,

Alors voilà j'ai un petit problème avec le design d'un site, "http://ng-industry.fr/index.php"
Mon ecran est en 1400*900 (21') j'ai donc naîvement placé mes <div> et mes <span> en fontion de mon navigateur.
voilà ce que moi je voit :
http://img32.imageshack.us/img32/5338/site1400.png


Et voilà ce que voient les personnes qui ont un affichage en 1024 ou 1280 :
http://img35.imageshack.us/img35/7888/site1024.png

voici mon code CSS :
https://paste.org/9869

Les images qui me posent problèmes sont :

- Les petits bouton roses (<span class="bouton1") => jusqu'a "bouton 8"
- L'image rectangulaire d'affiliation (<span class="affil")

qui ont pour codes respectifs:
Les Boutons
#
.bouton1
#
 
#
{
#
    position:absolute;
#
 top: 460px;
#
 left: 340px;
#
}
#
 
#
.bouton2
#
 
#
{
#
    position:absolute;
#
 top: 460px;
#
 left: 380px;
#
}
#
 
#
.bouton3
#
 
#
{
#
    position:absolute;
#
 top: 460px;
#
 left: 420px;
#
}
#
 
#
.bouton4
#
 
#
{
#
    position:absolute;
#
 top: 460px;
#
 left: 460px;
#
}
#
 
#
.bouton5
#
 
#
{
#
    position:absolute;
#
 top: 500px;
#
 left: 340px;
#
}
#
 
#
.bouton6
#
 
#
{
#
    position:absolute;
#
 top: 500px;
#
 left: 380px;
#
}
#
 
#
.bouton7
#
 
#
{
#
    position:absolute;
#
 top: 500px;
#
 left: 420px;
#
}
#
 
#
.bouton8
#
 
#
{
#
    position:absolute;
#
 top: 500px;
#
 left: 460px;
#
}


L'image

.affil
{
        position:absolute;
	top: 65%;
	left: 74%;
}


J'ai changé top & left qui etait en pixel par des % et ça n'a pas changé grand chose...

Merci d'avance pour vos reponses je suis pas un pro et je m'y suis mis ya pas longtemps c'et peut etre juste une erreur bête :p

Bonne journée.
A voir également:

10 réponses

kimimsc Messages postés 124 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 18 avril 2010 2
19 août 2009 à 12:33
bonjour, ils servent a quoi les petite rectangles rose?

si j'ai bien compris tu veux que les rectangles affiliations et autres soient cliquable?

<a href="le_nom_de_la_page.htm"><img src="../../source_de_l'image.png" alt="le_texte_qui_doit_apparaitre_quand_l'image_n'a_pas_pu_être_chargée" /></a>
0
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 1
19 août 2009 à 12:35
Oui c'est exactement ça :)

<span class="bouton1">
<a href="index.php" target="_blank"><img src="images/button.gif">
</a>
</span>
(chaque bouton sera cliquable individuelement et ouvrira un site dans un nouvel onglet)

pour l'image rectangulaire, elle n'est pas cliquable, j'ai juste voulu que tout le monde puisse la copié :)

merci.
0
kimimsc Messages postés 124 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 18 avril 2010 2
19 août 2009 à 12:38
tout ca tu dois le mettre dans le fichier html
0
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 1
19 août 2009 à 12:48
Oui c'est le cas, tout est sur index.php (enfin en faite tout est dans un autre endroit mais j'ai utilisé un "includes"
pour faire afficher ce que je veux sur l'index:))
0

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

Posez votre question
kimimsc Messages postés 124 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 18 avril 2010 2
19 août 2009 à 13:21
et ca ne marche pas?
0
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 1
19 août 2009 à 13:27
Bah non selon la resolution de l'ecran les images apparaissent en vrac...
0
kimimsc Messages postés 124 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 18 avril 2010 2
19 août 2009 à 13:37
body
{
background-image: url("../images/pattern.gif");
background-repeat: repeat;
margin:auto;
}
header
{
background-image: url("../images/header.png");
width: 1024px;
height: 284px;
position:relative;
}



essai ca et dit moi
0
kimimsc Messages postés 124 Date d'inscription lundi 2 mars 2009 Statut Membre Dernière intervention 18 avril 2010 2
19 août 2009 à 13:46
tu peux aussi mettre

body
{width:100%;}
0
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 1
19 août 2009 à 13:55
Merci pour tes conseils :)

en faite j'ai changer absolute par relative puis j'ai reajuster les % ça à l'air de marcher pour l'image de droite ^^
http://ng-industry.fr/index.php

j'essai pour les boutons ;)
0
fandjo83 Messages postés 8 Date d'inscription lundi 19 mai 2008 Statut Membre Dernière intervention 27 août 2009 1
19 août 2009 à 14:24
ça marche ^^
0