Titre: Problème affichage site web
Posté par: Elfy75 le le 21-07-2011 a 21:56:45
Bonjour,
J'ai lancé mon premier site web hier en voici le lien : www.djibe.com
Mon problème est que je n'ai pas encore trouvé la solution pour adapter mon site web à toute taille d'écran, en fonction de la taille, le titre n'est plus centré, les photos en hauteur sont coupées, ect.. Le défilement des images à l'horizontale est normal, c'est voulu.
Un petit coup de main serait bienvenue, mon code source est visible les problèmes majeurs sont avec Série 1, 2, 3, 4
Voilà
Merci beaucoup |
Titre: Re:Problème affichage site web
Posté par: Pad le le 21-07-2011 a 22:53:38
| il faudrait éviter d'utiliser le positionnement "absolute" mais plutôt passer sur du "relative" pour tes images ! |
Titre: Re:Problème affichage site web
Posté par: Elfy75 le le 21-07-2011 a 23:30:03
Qu'est ce que cela change? je n'ai jamais utilisé la posiition "relative".
ça va résoudre mon problème?
Merci |
Titre: Re:Problème affichage site web
Posté par: Pad le le 22-07-2011 a 03:43:51
Plusieurs pistes pour comprendre le positionnement :
http://fr.html.net/tutorials/css/lesson14.php (http://fr.html.net/tutorials/css/lesson14.php)
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html (http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html) |
Titre: Re:Problème affichage site web
Posté par: MarvinLeRouge le le 22-07-2011 a 10:42:10
Salut,
A mon avis, il n'y a même pas besoin de positionnement :
- tu centres le titre, tu lui retires cette hauteur forcée en jouant sur le line-height et le padding
- tu mets tes photos dans une barre défilante (tu trouveras surement un plugin en jQuery qui fait ça tout seul)
- et tu centres la pagination avec un display inline sur les éléments qui la composent
Et zou plus de problèmes de résolution.
|
Titre: Re:Problème affichage site web
Posté par: Elfy75 le le 22-07-2011 a 12:41:38
Plusieurs pistes pour comprendre le positionnement :
http://fr.html.net/tutorials/css/lesson14.php (http://fr.html.net/tutorials/css/lesson14.php)
http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html (http://www.alsacreations.com/tuto/lire/608-initiation-au-positionnement-css-partie-2.html)
|
|
Merci pour les liens |
Titre: Re:Problème affichage site web
Posté par: Elfy75 le le 22-07-2011 a 12:42:59
Salut,
A mon avis, il n'y a même pas besoin de positionnement :
- tu centres le titre, tu lui retires cette hauteur forcée en jouant sur le line-height et le padding
- tu mets tes photos dans une barre défilante (tu trouveras surement un plugin en jQuery qui fait ça tout seul)
- et tu centres la pagination avec un display inline sur les éléments qui la composent
Et zou plus de problèmes de résolution.
|
|
Merci beaucoup pour ton aide malheureusement ça va être trop compliqué pour moi, je suis encore novice dans le domaine :s |
Titre: Re:Problème affichage site web
Posté par: bidouille7 le le 23-07-2011 a 10:52:25
Bonjour. Là ou sont tes photos tu mets cette ligne de code:
<P><marquee align="center" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" scrolldelay="1" direction="left" height="90">
Et à la fin de la liste des photos tu ajoutes ceci:
height="37" border="0" /></a></marquee>
Cela va te permettre de faire défiler tes images sans que cela ne prenne beaucoup de place sur la page.
A plus. |
Titre: Re:Problème affichage site web
Posté par: Elfy75 le le 23-07-2011 a 12:40:43
Bonjour. Là ou sont tes photos tu mets cette ligne de code:
<P><marquee align="center" onmouseover="this.stop()" onmouseout="this.start()" scrollamount="10" scrolldelay="1" direction="left" height="90">
Et à la fin de la liste des photos tu ajoutes ceci:
height="37" border="0" /></a></marquee>
Cela va te permettre de faire défiler tes images sans que cela ne prenne beaucoup de place sur la page.
A plus.
|
|
Super merci pour l'info bidouille7
;) |
Titre: Re:Problème affichage site web
Posté par: bidouille7 le le 23-07-2011 a 13:41:10
| Pas de quoi, ravi d'avoir pû t'aider. A plus. |
Titre: Re:Problème affichage site web
Posté par: MarvinLeRouge le le 25-07-2011 a 13:46:50
| La balise marquee est hors-normes w3c depuis ... houla plus que ça |
Titre: Re:Problème affichage site web
Posté par: bidouille7 le le 25-07-2011 a 17:19:14
| Peut-être que cette balise "marquée" n'est pas reconnue par le W3C. Néanmoins cela permet d'avoir du texte,des images,des bannières qui défilent sans que cela ne prenne trop de place sur l'écran. je pense que c'est ce que recherchait ELFY75. Apparemment cela lui plait. Maintenant si il y a une autre méthode aussi facile,pourquoi ne pas lui avoir donnée. A plus. |
Titre: Re:Problème affichage site web
Posté par: MarvinLeRouge le le 26-07-2011 a 13:26:40
| Il existe des modules jQuery qui font ça, en permettant de séparer le fond de la forme et de l'interaction. C'est pour ça que je déconseille la balise marquee (ou toute autre balise mélangeant ces différents éléments). |
Titre: Re:Problème affichage site web
Posté par: KB le le 26-07-2011 a 14:04:54
<marquee> ne doit pas etre utilisée.
Comme le recommande marvinLeRouge, utilise le jquery (entre autre). le web est plein de tuto sur les sliders en javascript. |
Titre: Re:Problème affichage site web
Posté par: bidouille7 le le 26-07-2011 a 14:12:58
Bonjour. Pouvez-vous expliquer pourquoi ON NE DOIT PAS UTILISER CETTE BALISE "marquée".
Merci et à plus. |
Titre: Re:Problème affichage site web
Posté par: KB le le 26-07-2011 a 15:07:43
| la balise marquee est propriètaire et elle est déprécié par le w3c |
Titre: Re:Problème affichage site web
Posté par: bidouille7 le le 26-07-2011 a 17:51:50
re.Je veux bien vous croire,mais alors pourquoi lorsque l'on fait une recherche sur le web en demandant le code html pour le défilement d'images, on retrouve ce code sur de nombreux sites.
Par contre j'ai trouvé un code en JS,mais cela ne fonctionne pas.Je ne sais pas les modifications qu'il y a faire,car une partie du code ne doit pas être modifiée.
A plus. |
Titre: Re:Problème affichage site web
Posté par: Pad le le 26-07-2011 a 22:02:46
| les scripts que tu as vu ne sont peut être tout simplement plus mis à jour... pour éviter cela vérifie toujours les dates de publication de l'article ou de la page car on trouve souvent des scripts bien trop vieillot par rapport à ce qu'on peut faire maintenant ;) |
Titre: Re:Problème affichage site web
Posté par: bidouille7 le le 27-07-2011 a 11:51:36
Bonjour. Ok je vais regarder cela de plus près. Maintenant pouvez-vous me dire ce que vaut ce code en JS, et ou faut-il faire les modifications. Merci et à plus.
<script language="JavaScript1.2">
<!-- Begin
//largeur du curseur (en pixels)
var sliderwidth=330
//hauteur du curseur (Netscape)
var sliderheight=145
//vitesse de défilement
var slidespeed=4
//les images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.outils-web.com"><img src="boo_88x31.gif" border=1></a>'
leftrightslide[1]='<a href="http://www.outils-web.com"><img src="tools_88x31.gif" border=1></a>'
leftrightslide[2]='<a href="http://www.outils-web.com"><img src="logo_90x60.gif" border=1></a>'
leftrightslide[3]='<a href="http://www.outils-web.com"><img src="logo_140x40.gif" border=1></a>'
leftrightslide[4]='<a href="http://www.outils-web.com"><img src="part_88x31.gif" border=1></a>'
/*
dynamicdrive.com
*/
///////Ne rien modifier sous cette ligne////////////////////////////////////
var copyspeed=slidespeed
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide+" "
if (document.all){
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
<script language="JavaScript1.2">
<!-- Begin
//largeur du curseur (en pixels)
var sliderwidth=330
//hauteur du curseur (Netscape)
var sliderheight=145
//vitesse de défilement
var slidespeed=4
//les images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.outils-web.com"><img src="boo_88x31.gif" border=1></a>'
leftrightslide[1]='<a href="http://www.outils-web.com"><img src="tools_88x31.gif" border=1></a>'
leftrightslide[2]='<a href="http://www.outils-web.com"><img src="logo_90x60.gif" border=1></a>'
leftrightslide[3]='<a href="http://www.outils-web.com"><img src="logo_140x40.gif" border=1></a>'
leftrightslide[4]='<a href="http://www.outils-web.com"><img src="part_88x31.gif" border=1></a>'
/*
dynamicdrive.com
*/
///////Ne rien modifier sous cette ligne////////////////////////////////////
var copyspeed=slidespeed
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide+" "
if (document.all){
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
<script language="JavaScript1.2">
<!-- Begin
//largeur du curseur (en pixels)
var sliderwidth=330
//hauteur du curseur (Netscape)
var sliderheight=145
//vitesse de défilement
var slidespeed=4
//les images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://www.outils-web.com"><img src="boo_88x31.gif" border=1></a>'
leftrightslide[1]='<a href="http://www.outils-web.com"><img src="tools_88x31.gif" border=1></a>'
leftrightslide[2]='<a href="http://www.outils-web.com"><img src="logo_90x60.gif" border=1></a>'
leftrightslide[3]='<a href="http://www.outils-web.com"><img src="logo_140x40.gif" border=1></a>'
leftrightslide[4]='<a href="http://www.outils-web.com"><img src="part_88x31.gif" border=1></a>'
/*
dynamicdrive.com
*/
///////Ne rien modifier sous cette ligne////////////////////////////////////
var copyspeed=slidespeed
for (i=0;i<leftrightslide.length;i++)
finalslide=finalslide+leftrightslide+" "
if (document.all){
document.write('<marquee id="ieslider" scrollAmount=0 style="width:'+sliderwidth+'">'+finalslide+'</marquee>')
ieslider.onmouseover=new Function("ieslider.scrollAmount=0")
ieslider.onmouseout=new Function("if (document.readyState=='complete') ieslider.scrollAmount=slidespeed")
}
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers){
document.ns_slider01.visibility="show"
setTimeout("window.onresize=regenerate",450)
intializeleftrightslide()
}
if (document.all)
ieslider.scrollAmount=slidespeed
}
function intializeleftrightslide(){
document.ns_slider01.document.ns_slider02.document.write('<nobr>'+finalslide+'</nobr>')
document. ns_slider01.document.ns_slider02.document.close()
thelength=document.ns_slider01.document.ns_slider02.document.width
scrollslide()
}
function scrollslide(){
if (document.ns_slider01.document.ns_slider02.left>=thelength*(-1)){
document.ns_slider01.document.ns_slider02.left-=slidespeed
setTimeout("scrollslide()",100)
}
else{
document.ns_slider01.document.ns_slider02.left=sliderwidth
scrollslide()
}
}
window.onload=regenerate2
// End -->
</script>
<ilayer width=&{sliderwidth}; height=&{sliderheight}; name="ns_slider01" visibility=hide>
<layer name="ns_slider02" onMouseover="slidespeed=0;" onMouseout="slidespeed=copyspeed"></layer>
</ilayer>
J'ai voulu simplement changer les lignes leftrightslide[0]='<a href="http://www.outils-web.com"><img src="boo_88x31.gif" border=1></a>' qui se trouve en début de code. Je n'ai rien fait après. |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|