28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème avec mon background !

Modérateur
Bonjour à tous,
Je suis débutant en matière de création de sites web et j'ai rencontré un problème que je n'arrive pas à résoudre (ou alors c'est tout a fait normal, je ne sais pas...).
Bref, je conçois en ce moment le site d'une entreprise pour un stage et je rencontre quelques soucis, notamment concernant le positionnement de mon footer et également concernant mon background.
Ce dernier s'efface littéralement lorsque je zoom sur la page! Est-ce normal?

Merci de vos réponses
Modérateur
pas tout à fait, c'est mon background qui s'efface Smiley ohwell

le problème de mon footer, c'est autre chose, il est en position fixed et je n'arrive pas à l'afficher avec une autre option que celle ci...

Edit :
Mon site n'a pas les dimensions d'une page entière, il y a un background et dans ce background, il y a mon site avec lui aussi un background. C'est le background général qui "passe par-dessus" le reste quand je zoom...
Modifié par Khalysto (17 Apr 2013 - 14:37)
Khalysto a écrit :
pas tout à fait, c'est mon background qui s'efface Smiley ohwell

le problème de mon footer, c'est autre chose, il est en position fixed et je n'arrive pas à l'afficher avec une autre option que celle ci...


J'ai un problème du même genre avec mon footer mdr. Glisse nous le CSS qui concerne ton background stp
Modérateur
html {
height:100%;
width:100%;
margin:0;
padding:0;
background:#fff url(../images/bgTotal.png);
}

body{
width:1200px;
height:100%;
margin-top:0;
margin-left:5%;
margin-right:5%;
background:#fff url(../images/bg.jpg) 0 0 repeat;
-webkit-background-size: cover; /* pour Chrome et Safari */
-moz-background-size: cover; /* pour Firefox */
-o-background-size: cover; /* non reconnu*/
background-size:cover;
font-size:13px;
color:#343434;
font-family: arial, tahoma, sans-serif;
font-weight:bold;
}


voilà, ça donne ça pour l'affichage ^^
Je sais pas si c'est très propre...
Modifié par Khalysto (17 Apr 2013 - 14:42)
Modérateur
Oh là ! ^^
ça donne que mon site fait la dimension complète de la page, c'est pas ce que je recherche^^
par contre, j'ai testé de mettre une hauteur fixe à la place de height:100% et ça marche, mais du coup, le footer ne "colle" plus au site si je dézoom... Smiley ohwell
Modérateur
C'est le backgound du html qui passe par dessus l'autre. Mais je crois que height:100% redimensionne le background a chaque fois que je zoom
Pour que le footer colle au bas de la page essaie :
.footer {
position : fixed;
top: 80%; (à toi de régler)
}

Par contre il te suivra dans ta navigation. Sinon t'as :
.footer {
position: relative (ou absolute je sais plus);
bottom: 0;
}

En ce qui concerne ton html rajoute lui un z-index : 2. Teste avec d'autre chiffre
Modérateur
Super ! Smiley lol
Mon problème de background est réglé! Merci beaucoup Smiley smile
Reste mon footer, mais c'est une autre histoire...^^
Khalysto a écrit :
Super ! Smiley lol
Mon problème de background est réglé! Merci beaucoup Smiley smile
Reste mon footer, mais c'est une autre histoire...^^


Un exemple de z-index : http://fr.html.net/tutorials/css/figure020.gif
Sa modifie la profondeur en clair Smiley smile .

Pour ton footer t'as essayer ce que je t'ai dis ?

.footer{
    position: relative (si sa marche pas essaie absolute);
    bottom: 0;
}


Et si tu veux qu'il te suive dans la navigation :

.footer{
    position: fixed;
    top: 80% (par exemple après tu jauges);
}


Je te conseille les % car en pixel sa peut varier en fonction de la taille de l'écran du visiteur Smiley smile
Modérateur

#ft { /*footer*/
bottom :0;
float:left;
clear:both;
position:relative;
width:1200px;
border-top-style:solid;
border-color:#0000;
height:39px;
background: url(../images/topmenu.jpg) 0 0 repeat-x;


Voilà le css de mon footer.
Comme vous pouvez le voir, il est en position fixed, ce qui, lorsque je zoom, le décale et ne me permet plus d'accéder aux liens qu'il contient...

voulez vous une image?
Khalysto a écrit :

#ft { /*footer*/
bottom :0;
float:left;
clear:both;
[b]position:relative;[/b]
width:1200px;
border-top-style:solid;
border-color:#0000;
height:39px;
background: url(../images/topmenu.jpg) 0 0 repeat-x;



Tutoie moi je te prie je fais du CSS depuis une semaine tu sais mdr. Déjà ton footer est en position relative. Ensuite vire le float le clear et le width + height je suis même pas sur que t'en ai besoin. En clair voila ce que je te propose simplement
.ft {
position:fixed;
top : 80% (à toi de tester sa);
border-top-style:solid;
border-color:#0000;
background: url(../images/topmenu.jpg) no-repeat;
[/code]

Ou alors :
.ft {
position:relative;
bottom: 0;
border-top-style:solid;
border-color:#0000;
background: url(../images/topmenu.jpg) no-repeat;
[/code]

Je te précise que j'ai mi un "." plutôt qu'un "#" car au lieu d'avoir écrit dans le HTML "id="ft"" j'écris "class="ft"".

Teste avec le # si il marche sa va t'embête pas
Modérateur
Bien, donc l'affichage que j'ai avec fixed, c'est celui que j'ai expliqué dans mon précédent post et lorsque je le met en position relative, l'image ne s'affiche plus et le footer monte vers le milieu de la page...
Mais je préfère l'affichage que j'ai avec la 2ème solution, vu que je peux scroller mon site sans que le footer ne reste à une position fixée ^^

Bon après, y a encore des problèmes...
Modérateur
Effectivement, il reste au milieu même avec cette propriété...
j'ai testé avec le top:50%, mais j'ai l'impression qu'aucune propriété n'a d'influence sur le placement dès que le footer est en relative...
Sujet clos
Aller à