Comment créer un conteneur CSS fluide
Résolu/Fermé
A voir également:
- Container en css
- Taille bouton css - Forum HTML
- Nv container - Forum Carte graphique
- Css premier plan ✓ - Forum CSS
- Enlever couleur lien css ✓ - Forum CSS
- Css exposant ✓ - Forum CSS
9 réponses
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié par RAD ZONE le 20/01/2011 à 01:22
Modifié par RAD ZONE le 20/01/2011 à 01:22
looool un peu spec pour les standard et la semantique ton truc mais
bon je t ai fais un truc vite fait , mais ca fonctionne et c est valide W3C XHTML Transitional , j ai mis une bordure pour que tu vois mieux la div
tu ajuste la position par raport au top si tu veux !
par contre si tu veux que cela soit centre aussi verticalement ,
il faudra dans la CSS donner a la div#conteneur un "height" un "top:50%;" et mettre un "margin-top:- la moitier du height" que tu as mis!
exemple pour un height de 200px
voir le résultat avec cette modif !
A+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
bon je t ai fais un truc vite fait , mais ca fonctionne et c est valide W3C XHTML Transitional , j ai mis une bordure pour que tu vois mieux la div
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>
Accueil
</title>
<meta http-equiv="Content-Language" content="fr" />
<script language="javascript" type="text/javascript">
//<![CDATA[
window.moveTo(0,0)
window.resizeTo(screen.width,(screen.height-25))
//-->
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
body,html{
width:100%;
height:100%;
margin:0;
padding:0
}
#background{
width:100%;
height:100%
}
#content{
position:absolute;
left:0;
top:0
}
div#conteneur{
left:50%;
width:800px;
margin-left:-400px;
padding:0px;
background-color:transparent;
border:1px dashed #564B47;
text-align:center;
position:fixed
}
span.c2{
color:#800000;
font-family:Georgia
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:150%
}
/*]]>*/
</style>
</head>
<body>
<img src="images\image en.jpg" alt="" id="background" name="background" />
<div id="content">
<div id="conteneur">
<span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte texte texte</span>
</div>
</div>
</body>
</html>
tu ajuste la position par raport au top si tu veux !
par contre si tu veux que cela soit centre aussi verticalement ,
il faudra dans la CSS donner a la div#conteneur un "height" un "top:50%;" et mettre un "margin-top:- la moitier du height" que tu as mis!
exemple pour un height de 200px
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-100px;
padding:0px;
background-color:transparent;
border:1px dashed #564B47;
text-align:center;
position:fixed
}
voir le résultat avec cette modif !
A+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
Tu es Génial Rad Zone,
J'ai regardé attentivement tout le script, je comprends le principe et là où je me gourrais, c'était les valeurs fixes, je ne voulais plus du tout en mettre...La première fois que je m'essaie de faire des pages web flexibles...Loooolllll! Je savais fort bien qu'il fallait que j'aille avec du pourcentage mais je ne savais vraiment pas comment faire.
Par contre, encore quelques p'tits soucis. En résolution 800 X 600, le texte est centré mais il n'entre pas tout dans le cadre, image en jpg, texte trop gros.
J'ai testé avec presque toutes les autres résolutions avec le navigateur firefox et ça fonctionne nikel, tout se place automatiquement dans le centre de mon cadre et prends la proportion souhaitée sauf qu'avec Explorer, ben oui, l'explorer de m...., je ne dirai pas le mot, rien de tout ça fonctionne. J'aurais aimé que ça fonctionne aussi bien avec lui comme avec Firefox. Pour ce qui est des autres navigateurs, je ne sais pas, pas testé mais, j'ai adoré ce que j'ai vu avec firefox.
Est-ce qu'il aurait une façon que ça fonctionne avec Explorer aussi bien qu'avec Firefox? Là est le plus gros défi puisque ce site en question, presque tout le monde visite avec Explorer :((
Saanboy!
P.S : Je le répète, tu es génial!
J'ai regardé attentivement tout le script, je comprends le principe et là où je me gourrais, c'était les valeurs fixes, je ne voulais plus du tout en mettre...La première fois que je m'essaie de faire des pages web flexibles...Loooolllll! Je savais fort bien qu'il fallait que j'aille avec du pourcentage mais je ne savais vraiment pas comment faire.
Par contre, encore quelques p'tits soucis. En résolution 800 X 600, le texte est centré mais il n'entre pas tout dans le cadre, image en jpg, texte trop gros.
J'ai testé avec presque toutes les autres résolutions avec le navigateur firefox et ça fonctionne nikel, tout se place automatiquement dans le centre de mon cadre et prends la proportion souhaitée sauf qu'avec Explorer, ben oui, l'explorer de m...., je ne dirai pas le mot, rien de tout ça fonctionne. J'aurais aimé que ça fonctionne aussi bien avec lui comme avec Firefox. Pour ce qui est des autres navigateurs, je ne sais pas, pas testé mais, j'ai adoré ce que j'ai vu avec firefox.
Est-ce qu'il aurait une façon que ça fonctionne avec Explorer aussi bien qu'avec Firefox? Là est le plus gros défi puisque ce site en question, presque tout le monde visite avec Explorer :((
Saanboy!
P.S : Je le répète, tu es génial!
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié par RAD ZONE le 20/01/2011 à 02:22
Modifié par RAD ZONE le 20/01/2011 à 02:22
oui IE est une m....de !
mais pour moi il ni as que en vertical que IE pose un prob !
voila ce que ca donne sur firefox , Chrome,Safari, Opera, IE8 chez moi !
http://rad2.free.fr/ccm/Saanboy/video.htm
mais apres pour IE il faut bidouiller avec des conditionel pour essayer , mais a mon avis ca vas etre une vrais galere !!
bonne nuitee les petiots ;-))
a+
mais pour moi il ni as que en vertical que IE pose un prob !
voila ce que ca donne sur firefox , Chrome,Safari, Opera, IE8 chez moi !
http://rad2.free.fr/ccm/Saanboy/video.htm
mais apres pour IE il faut bidouiller avec des conditionel pour essayer , mais a mon avis ca vas etre une vrais galere !!
bonne nuitee les petiots ;-))
a+
Resalut Rad Zone, J'ai regardé ta vidéo, une chance que je ne suis pas laid comme cette image que tu as choisi pour ton test...ahahahahhahaha.. Bon revenons au sérieux!
Je te vois vraiment fort en informatique, tu es un Expert en programmation? J'aimerais ben ça avoir ta force en tout cas, j'aurais pas mal moins de misère j'en suis certain. Pour une fois que j'ai trouvé un excellent programmeur, ben là, je suis content en bibitte! Merci mon Dieu!
Si je comprends bien, je devrais faire ma mise à jour de l'explorer vers la 8, puisque je n'ai que la 6...Well, Ok! Si tu penses qu'il n'y a rien d'autre à faire, je vais faire ça car tu vois mon Rad Zone, je n'ai plus du tout la patience de me battre avec la 6 et commencer à trouver des solutions... Si TOI, tu trouves que ça sera une vraie galère alors, je démissione. Ça ne me tente pas de me battre encore pour les mêmes affaires pendant encore trois ans.
Je ne te remercierai jamais assez Rad Zone pour toute l'aide que tu viens de me donner. Grâce à toi, je vais avancer et faire d eplus belles pages car je serai plus souple. MERCI MERCI MERCI RAD ZONE !!!!!!!!! Si j'étais une fille, je t'embrasserais.
Si j'ai quelque chose d'autres, je peux te réécrire? Quoi que c'est rare que j'ai besoin d'aide car j'ai l'habitude de me débrouiller mais là, je ne pouvais pas faire autrement, j'étais entrain de manger mes cheveux là.
Saanboy
Je te vois vraiment fort en informatique, tu es un Expert en programmation? J'aimerais ben ça avoir ta force en tout cas, j'aurais pas mal moins de misère j'en suis certain. Pour une fois que j'ai trouvé un excellent programmeur, ben là, je suis content en bibitte! Merci mon Dieu!
Si je comprends bien, je devrais faire ma mise à jour de l'explorer vers la 8, puisque je n'ai que la 6...Well, Ok! Si tu penses qu'il n'y a rien d'autre à faire, je vais faire ça car tu vois mon Rad Zone, je n'ai plus du tout la patience de me battre avec la 6 et commencer à trouver des solutions... Si TOI, tu trouves que ça sera une vraie galère alors, je démissione. Ça ne me tente pas de me battre encore pour les mêmes affaires pendant encore trois ans.
Je ne te remercierai jamais assez Rad Zone pour toute l'aide que tu viens de me donner. Grâce à toi, je vais avancer et faire d eplus belles pages car je serai plus souple. MERCI MERCI MERCI RAD ZONE !!!!!!!!! Si j'étais une fille, je t'embrasserais.
Si j'ai quelque chose d'autres, je peux te réécrire? Quoi que c'est rare que j'ai besoin d'aide car j'ai l'habitude de me débrouiller mais là, je ne pouvais pas faire autrement, j'étais entrain de manger mes cheveux là.
Saanboy
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
Modifié par RAD ZONE le 20/01/2011 à 08:21
Modifié par RAD ZONE le 20/01/2011 à 08:21
une petite correction qui m avait echape ;-))
j ai mis l image dans la div "content" et j ai modifie la CSS pour cette div ! ca ne changera rien pour IE6
mais c est un peu plus propre comme ca,c est valide W3C bien sur !
mais IE6 commence meme a etre boycotte par de tres gros site grand public !
bien que nous soyons assez habitue a titre personel a creer des code specifique a IE cela devient trop fastidieux pour un developpeur d entreprise de passer des heures (donc de l argent ) pour un navigateur obsolète comme IE6, il ne reste que certaines entreprises , qui pour des raisons de securite ne permettent pas les mise a jour des softs ,
les utilisateurs de windows pirate ancienne version qui ne savent pas faire un " WGA remover "
et peut etre quelque masochiste ou quelque nostalgique qui navigue
regulierement avec IE6 comme navigateur par defaut ;-)
maintenant il faudrait verifier sur mac avec IE ! cette methode peux poser probleme , mais meme remarque, il faut etre vicelard pour allez naviguer avec IE sur un mac ;-))
a+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
j ai mis l image dans la div "content" et j ai modifie la CSS pour cette div ! ca ne changera rien pour IE6
mais c est un peu plus propre comme ca,c est valide W3C bien sur !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
/*<![CDATA[*/
window.moveTo(0,0)
window.resizeTo(screen.width,(screen.height-25))
/*]]>*/
</script>
<style type="text/css">
/*<![CDATA[*/
body,html{
width:100%;
height:100%;
margin:0;
padding:0
}
#content,#content img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-100px;
padding:0px;
background-color:transparent;
border:1px dashed #564B47;
text-align:center;
position:fixed
}
span.c2{
color:#800000;
font-family:Georgia
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:150%
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<img src="image.jpg" alt="fond" />
<div id="conteneur">
<span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte texte texte</span>
</div>
</div>
</body>
</html>
mais IE6 commence meme a etre boycotte par de tres gros site grand public !
bien que nous soyons assez habitue a titre personel a creer des code specifique a IE cela devient trop fastidieux pour un developpeur d entreprise de passer des heures (donc de l argent ) pour un navigateur obsolète comme IE6, il ne reste que certaines entreprises , qui pour des raisons de securite ne permettent pas les mise a jour des softs ,
les utilisateurs de windows pirate ancienne version qui ne savent pas faire un " WGA remover "
et peut etre quelque masochiste ou quelque nostalgique qui navigue
regulierement avec IE6 comme navigateur par defaut ;-)
maintenant il faudrait verifier sur mac avec IE ! cette methode peux poser probleme , mais meme remarque, il faut etre vicelard pour allez naviguer avec IE sur un mac ;-))
a+
? La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ?
Bonsoir Rad Zone,
Je vais prendre connaissance de ton deuxième script. Je suis bien content que tu passes du temps pour m'aider à rendre ma page beaucoup plus belle et propre. Sincèrement, j'apprécie beaucoup ton aide; la première fois de ma vie qu'un programmeur se donne la peine de m'aider, j'ai toujours eu l'habitude de me débrouiller seul et avec beaucoup de misère puisque personne ne voulait me répondre convenablement. J'ai été rétissant à poster ma demande au début, je m'attendais à des critiques négatives et comme la plupart du monde, me faire répondre n'importe quoi. Si j'ai des gens qui ont besoin d'aide et que je ne peux pas aider, je te les enverrai volontier, à toi de décider de leur répondre ou pas.
J'ai trouvé comique tes expressions avec le navigateur Explorer 6 et je te donne entièrement raison. Looollll La seule chose qui me poussait à vouloir continuer à développer avec lui, c'est que la plupart des gens que je connais naviguent encore avec explorer 6 et quand il me parlait de site ben, je n'avais pas le choix de travailler avec lui, je me rends bien compte aujourd'hui à quel point il est dépassé et oui, il est temps pour moi de passer au 8 en gardant bien-sûr firefox qui pour moi, il est très important. Oui effectivement, j'ai remarqué qu'explorer 6 est laissé tombé par plusieurs sites et qu'ils proposent : explorer 8, firefox, google chrome et safari. Et je dois avouer aussi que je l'aimais bien ce navigateur, un travail fastudieux pour le mettre en forme avec d'énormes mises à jour, mais j'ai les connaissances pour le faire alors, mais pour les autres, ce n'est qu'un tas de problèmes. J'ai eu ma leçon, je viens tout juste de télécharger la version 8, ça ne me tente plus de me battre autant avec la 6, je commence à me faire vieux et les batailles d'habitude je les ai toujours gagné, peut-être pas toujours comme un excellent programmeur professionnel mais j'y arrivais, sauf bien-sûr cette dernière bataille que tu m'as aidé à gagner car sans toi, je n'aurais pas réussi celle-là!
Je ne suis pas un adepte d'un mac mais plutôt pc. Si j'avais à faire beaucoup plus, probablement que je n'aurais pas le choix d'apprendre, mais pour l'instant, ça ne fait pas partie de ma vie.
Alors, je te redis un très GROS MERCI à toi mon ami Rad Zone et que Dieu te bénisse et te donne tout ce que tu souhaites.
Saanboy
Je vais prendre connaissance de ton deuxième script. Je suis bien content que tu passes du temps pour m'aider à rendre ma page beaucoup plus belle et propre. Sincèrement, j'apprécie beaucoup ton aide; la première fois de ma vie qu'un programmeur se donne la peine de m'aider, j'ai toujours eu l'habitude de me débrouiller seul et avec beaucoup de misère puisque personne ne voulait me répondre convenablement. J'ai été rétissant à poster ma demande au début, je m'attendais à des critiques négatives et comme la plupart du monde, me faire répondre n'importe quoi. Si j'ai des gens qui ont besoin d'aide et que je ne peux pas aider, je te les enverrai volontier, à toi de décider de leur répondre ou pas.
J'ai trouvé comique tes expressions avec le navigateur Explorer 6 et je te donne entièrement raison. Looollll La seule chose qui me poussait à vouloir continuer à développer avec lui, c'est que la plupart des gens que je connais naviguent encore avec explorer 6 et quand il me parlait de site ben, je n'avais pas le choix de travailler avec lui, je me rends bien compte aujourd'hui à quel point il est dépassé et oui, il est temps pour moi de passer au 8 en gardant bien-sûr firefox qui pour moi, il est très important. Oui effectivement, j'ai remarqué qu'explorer 6 est laissé tombé par plusieurs sites et qu'ils proposent : explorer 8, firefox, google chrome et safari. Et je dois avouer aussi que je l'aimais bien ce navigateur, un travail fastudieux pour le mettre en forme avec d'énormes mises à jour, mais j'ai les connaissances pour le faire alors, mais pour les autres, ce n'est qu'un tas de problèmes. J'ai eu ma leçon, je viens tout juste de télécharger la version 8, ça ne me tente plus de me battre autant avec la 6, je commence à me faire vieux et les batailles d'habitude je les ai toujours gagné, peut-être pas toujours comme un excellent programmeur professionnel mais j'y arrivais, sauf bien-sûr cette dernière bataille que tu m'as aidé à gagner car sans toi, je n'aurais pas réussi celle-là!
Je ne suis pas un adepte d'un mac mais plutôt pc. Si j'avais à faire beaucoup plus, probablement que je n'aurais pas le choix d'apprendre, mais pour l'instant, ça ne fait pas partie de ma vie.
Alors, je te redis un très GROS MERCI à toi mon ami Rad Zone et que Dieu te bénisse et te donne tout ce que tu souhaites.
Saanboy
Bonjour Rad Zone,
Bon! Je constate qu'avec explorer 8 ma page est proportionnée exactement comme firefox. C'est génial!
Par contre, j'ai mis une chanson ,mais explorer refuse de la faire jouer et je me demande bien pourquoi ? Si tu peux trouver la source du problème, tu connais mieux que moi explorer 8, j'en serais très ravie. T'en fais pas, je ne prendrai pas l'habitude de te déranger à tous les 5 minutes. Tant qu'à t'avoir pour l'instant, j'en profite...héhé!
Voici le code :
<embed src="musique/Power Of Your Love.mp3" loop="-1" hidden="true" controls="smallconsole"></embed>
Est-ce que ça peut provenir de la pesanteur de la chanson, elle fait 4,48Mo ? Si ce n'est que ça, je vais la compresser. Qu'est-ce que tu en penses?
Saanboy
Bon! Je constate qu'avec explorer 8 ma page est proportionnée exactement comme firefox. C'est génial!
Par contre, j'ai mis une chanson ,mais explorer refuse de la faire jouer et je me demande bien pourquoi ? Si tu peux trouver la source du problème, tu connais mieux que moi explorer 8, j'en serais très ravie. T'en fais pas, je ne prendrai pas l'habitude de te déranger à tous les 5 minutes. Tant qu'à t'avoir pour l'instant, j'en profite...héhé!
Voici le code :
<embed src="musique/Power Of Your Love.mp3" loop="-1" hidden="true" controls="smallconsole"></embed>
Est-ce que ça peut provenir de la pesanteur de la chanson, elle fait 4,48Mo ? Si ce n'est que ça, je vais la compresser. Qu'est-ce que tu en penses?
Saanboy
Rad Zone, j'ai encore besoin de ton aide si tu veux bien...
Petite question probablement ben niaiseuse pour toi...
Voilà ma question : Avec la même page que tu as travaillé pour moi, ( je te redonnerai le scrip tantôt) j'aimerais mettre un background en pleine page (décoration) c'est à dire à 100% et ma page web qui affiche à 80% sur mon background, je fais ça comment dans ce script ? J'ai essayé ben des trucs mais là, il doit y avoir quelque chose que je ne comprends pas. Alors, si tu veux bien me donner ton astuce, ça serait encore Génial.
Je te redonne le script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
/*<![CDATA[*/
window.moveTo(0,0)
window.resizeTo(screen.width,(screen.height-25))
/*]]>*/
</script>
<style type="text/css">
/*<![CDATA[*/
body,html{
width:100%;
height:100%;
margin:0;
padding:0
}
#content,#content img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-100px;
padding:0px;
background-color:transparent;
border:1px dashed #564B47;
text-align:center;
position:fixed
}
span.c2{
color:#800000;
font-family:Georgia
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:150%
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<img src="image.jpg" alt="fond" />
<div id="conteneur">
<span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte texte texte</span>
</div>
</div>
</body>
</html>
Merci à l'avance de ta réponse. Je souhaite que tu sois encore mon sauveur...
Saanboy
Petite question probablement ben niaiseuse pour toi...
Voilà ma question : Avec la même page que tu as travaillé pour moi, ( je te redonnerai le scrip tantôt) j'aimerais mettre un background en pleine page (décoration) c'est à dire à 100% et ma page web qui affiche à 80% sur mon background, je fais ça comment dans ce script ? J'ai essayé ben des trucs mais là, il doit y avoir quelque chose que je ne comprends pas. Alors, si tu veux bien me donner ton astuce, ça serait encore Génial.
Je te redonne le script :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
RAD ZONE Webcreation
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
<script type="text/javascript">
/*<![CDATA[*/
window.moveTo(0,0)
window.resizeTo(screen.width,(screen.height-25))
/*]]>*/
</script>
<style type="text/css">
/*<![CDATA[*/
body,html{
width:100%;
height:100%;
margin:0;
padding:0
}
#content,#content img{
position:absolute;
width:100%;
height:100%;
left:0;
top:0
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-100px;
padding:0px;
background-color:transparent;
border:1px dashed #564B47;
text-align:center;
position:fixed
}
span.c2{
color:#800000;
font-family:Georgia
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:150%
}
/*]]>*/
</style>
</head>
<body>
<div id="content">
<img src="image.jpg" alt="fond" />
<div id="conteneur">
<span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte texte texte</span>
</div>
</div>
</body>
</html>
Merci à l'avance de ta réponse. Je souhaite que tu sois encore mon sauveur...
Saanboy
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
22 janv. 2011 à 00:01
22 janv. 2011 à 00:01
il doit y avoir quelque chose que je ne comprends pas
loool moi c est la question que je ne comprend pas ;-)) ??????
le coup des 80% et 100% , je vois pas ce que tu veux dire, surtout avec des tailles en % la fenetre du navigateur ne peux pas s ouvrir plus petite que le background ??
par ce que la moi,en lisant ta question, c est ce que je comprend !! :-o ??
ps : la musique obligatoire c est pas bon et avec <embed src=.....> encore moins ;-) !
loool moi c est la question que je ne comprend pas ;-)) ??????
le coup des 80% et 100% , je vois pas ce que tu veux dire, surtout avec des tailles en % la fenetre du navigateur ne peux pas s ouvrir plus petite que le background ??
par ce que la moi,en lisant ta question, c est ce que je comprend !! :-o ??
ps : la musique obligatoire c est pas bon et avec <embed src=.....> encore moins ;-) !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Bonsoir Rad Zone,
Ok! Je vais essayer de trouver une autre façon de m'exprimer...
Ok! Je te donne un lien que tu pourras aller voir comme exemple et c'est ce que j'aimerais faire. Je t'explique ce que moi je comprends de ça. Dans cet exemple, on voit son background et sa page web qui défile au centre de la fenêtre. J'adore ça!
Voiçi le lien : https://www.alloprof.qc.ca/
Je suis désolé de m'être mal exprimé...
Saanboy
Ok! Je vais essayer de trouver une autre façon de m'exprimer...
Ok! Je te donne un lien que tu pourras aller voir comme exemple et c'est ce que j'aimerais faire. Je t'explique ce que moi je comprends de ça. Dans cet exemple, on voit son background et sa page web qui défile au centre de la fenêtre. J'adore ça!
Voiçi le lien : https://www.alloprof.qc.ca/
Je suis désolé de m'être mal exprimé...
Saanboy
J'ai oublié...Au sujet de la chanson, je sais qu'imposer une chanson aux internautes n'est pas vraiment l'idéal, je regarderai pour décacher le lecteur pour qu'ils puissent arrêter la musique à leur guise.
Je me doutais bien aussi qu'avec <embed> ce n'étais pas l'idéal. Il y a une autre balise que je peux prendre? J'ai entendu parler du flash mais là, ça fait longtemps que tu m'as perdu...Loooollllll
Saanboy
Je me doutais bien aussi qu'avec <embed> ce n'étais pas l'idéal. Il y a une autre balise que je peux prendre? J'ai entendu parler du flash mais là, ça fait longtemps que tu m'as perdu...Loooollllll
Saanboy
Rad Zone,
Si tu veux toujours regarder l'exemple en lien que je t'ai donné, c'est ok, mais je t'ai fait un p'tit montage graphique pour résumer ce que je recherche comme page avec un background avec le même script que tu as fait pour moi. J'ai emprunté un serveur d'une femme pour te montrer mon exemple puisque ici, je ne vois pas où on peut uploader des images alors, voici le lien que j'ai fait pour te résumer exactement ce que je recherche à faire. Moi, je l'ai fait en image mais toi, c'est certain que tu pourras refaire la même chose avec un script.
http://www.marysepsy.com/exemple%20pour%20Rad%20Zone.html
Et comme tu as pu deviner, le texte centré dans le cadre
Saanboy
Si tu veux toujours regarder l'exemple en lien que je t'ai donné, c'est ok, mais je t'ai fait un p'tit montage graphique pour résumer ce que je recherche comme page avec un background avec le même script que tu as fait pour moi. J'ai emprunté un serveur d'une femme pour te montrer mon exemple puisque ici, je ne vois pas où on peut uploader des images alors, voici le lien que j'ai fait pour te résumer exactement ce que je recherche à faire. Moi, je l'ai fait en image mais toi, c'est certain que tu pourras refaire la même chose avec un script.
http://www.marysepsy.com/exemple%20pour%20Rad%20Zone.html
Et comme tu as pu deviner, le texte centré dans le cadre
Saanboy
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
23 janv. 2011 à 00:24
23 janv. 2011 à 00:24
pas possible avec ton histoire d image adaptable en taille ,
on doit mettre la div conteneur en position:fixed !
alors que pour faire ce que ru veux c est le fond qui doit etre fixe !!
la il faut choisir , soit l un ,soit l autre , mais pas les 2 !
on doit mettre la div conteneur en position:fixed !
alors que pour faire ce que ru veux c est le fond qui doit etre fixe !!
la il faut choisir , soit l un ,soit l autre , mais pas les 2 !
Hello Rad Zone,
J'ai trouvé comment faire mon ti-pit...Regarde ben ça, j'ai juste rajouter ce p'tit bout là :
<img style="display:block; position:absolute; left:9.5%; top:14%; width:81.5%; height:75%; z-index:1" src="images/image en .jpg" width="137" height="132" alt="Mon image 1">
Héhé! Là, je suis fier de moi en sibouleau.
Ta réponse m'a éclairé quand tu me disais : on doit mettre la div conteneur en position:fixed. Je me suis dit, au lieu de toucher au conteneur parce que je veux qu'il reste fluide, je vais juste superposer mes images l'une sur l'autre et jouer avec mes valeurs en pourcentage donc, le conteneur continuera de travailler par lui-même et mon image superposée se placera aussi selon mes propres valeurs données. Voilà! Ça me donne exactement le même résultat qu'avec le p'tit montage que j'avais fait comme exemple. Peu importe la résolution, le tout se place comme je voulais.
Saanboy
J'ai trouvé comment faire mon ti-pit...Regarde ben ça, j'ai juste rajouter ce p'tit bout là :
<img style="display:block; position:absolute; left:9.5%; top:14%; width:81.5%; height:75%; z-index:1" src="images/image en .jpg" width="137" height="132" alt="Mon image 1">
Héhé! Là, je suis fier de moi en sibouleau.
Ta réponse m'a éclairé quand tu me disais : on doit mettre la div conteneur en position:fixed. Je me suis dit, au lieu de toucher au conteneur parce que je veux qu'il reste fluide, je vais juste superposer mes images l'une sur l'autre et jouer avec mes valeurs en pourcentage donc, le conteneur continuera de travailler par lui-même et mon image superposée se placera aussi selon mes propres valeurs données. Voilà! Ça me donne exactement le même résultat qu'avec le p'tit montage que j'avais fait comme exemple. Peu importe la résolution, le tout se place comme je voulais.
Saanboy
Rad Zone,
Je suis dans la m....de encore hahahhahahahahahaha...
Je suis extrêmement fier de ma p'tite astuce mentionnée dans le message précédent mais seulement voilà, mon texte s'affiche en dessous de mon image superposée au background. J'aimerais ben ça que mon texte apparaisse sur mon image superposée. J'ai essayé ben des affaires mais rien ne fonctionne alors, je demande encore ton aide, si tu n'es pas tanné bien-sûr!
Je te donne mon css :
body,html{
width:100%;
height:100%;
margin:0;
padding:0
}
#background{
width:100%;
height:100%
}
#bg2{
border:0px;
display:block;
position:absolute;
left:9.5%;
top:14%;
width:81.5%;
height:75%;
z-index:1
}
#content{
position:absolute;
left:0;
top:0
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-185px;
padding:0px;
text-align:center;
position:fixed
}
span.c2{
color:#800000;
font-family:Georgia
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:150%
}
a:link, a:active, a:visited {
text-decoration : none;
color : #800000;
}
a:hover {
text-decoration : underline;
color : #800000;
}
Et voici mon body :
<body>
<div id="content">
<img src="images\fond.jpg" alt="" id="background" name="background"/><img src="images/image.jpg" alt="" id="bg2" name="bg2"/>
<div id="conteneur">
<span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte texte texte</span>
</div>
</div>
</body>
</html>
Je suis dans la m....de encore hahahhahahahahahaha...
Je suis extrêmement fier de ma p'tite astuce mentionnée dans le message précédent mais seulement voilà, mon texte s'affiche en dessous de mon image superposée au background. J'aimerais ben ça que mon texte apparaisse sur mon image superposée. J'ai essayé ben des affaires mais rien ne fonctionne alors, je demande encore ton aide, si tu n'es pas tanné bien-sûr!
Je te donne mon css :
body,html{
width:100%;
height:100%;
margin:0;
padding:0
}
#background{
width:100%;
height:100%
}
#bg2{
border:0px;
display:block;
position:absolute;
left:9.5%;
top:14%;
width:81.5%;
height:75%;
z-index:1
}
#content{
position:absolute;
left:0;
top:0
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-185px;
padding:0px;
text-align:center;
position:fixed
}
span.c2{
color:#800000;
font-family:Georgia
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:150%
}
a:link, a:active, a:visited {
text-decoration : none;
color : #800000;
}
a:hover {
text-decoration : underline;
color : #800000;
}
Et voici mon body :
<body>
<div id="content">
<img src="images\fond.jpg" alt="" id="background" name="background"/><img src="images/image.jpg" alt="" id="bg2" name="bg2"/>
<div id="conteneur">
<span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte texte texte</span>
</div>
</div>
</body>
</html>
Salut Rad Zone,
Je vois que tu ne m'as jamais répondu...Bon ok! Je ferai comme j'ai toujours fait, me débrouiller seul. Pas grave! Je suis doublement content quand je trouve mes réponses.
Je voulais quand même te remercier parce que grâce à tes réponses, ça m'a aidé grandement à avancer. Merci pour tout!
A+
Je vois que tu ne m'as jamais répondu...Bon ok! Je ferai comme j'ai toujours fait, me débrouiller seul. Pas grave! Je suis doublement content quand je trouve mes réponses.
Je voulais quand même te remercier parce que grâce à tes réponses, ça m'a aidé grandement à avancer. Merci pour tout!
A+
RAD ZONE
Messages postés
5230
Date d'inscription
samedi 20 janvier 2007
Statut
Contributeur
Dernière intervention
17 août 2024
1 360
26 janv. 2011 à 21:37
26 janv. 2011 à 21:37
je t ai dis , ce que tu fais avec le background , n est pas standard et pose d enormes problemes
ensuite pour le positionnement des elements ! d ailleurs tu t en rend compte :-))
il faut luter a chaque ajout avec son positionnement ! c est donc sans fin ;-)
ma solution est de revenir au standard , et d oublier cette image en full size dynamic !
a+
ensuite pour le positionnement des elements ! d ailleurs tu t en rend compte :-))
il faut luter a chaque ajout avec son positionnement ! c est donc sans fin ;-)
ma solution est de revenir au standard , et d oublier cette image en full size dynamic !
a+
Hello Rad Zone,
Je sais parfaitement que tu as raison; je n'ai jamais obstiné ta solution dans ton message précédent comme quoi il faut revenir au standard mais, je sais qu'il existe une méthode. Quoi qu'avec misère, je réussirai à positionner le texte dans l'image et dès que j'aurai la solution, je viendrai la poster ici; pas pour nous, mais pour les autres qui verront ces posts, ils sauront comment faire. J'appellerai ça, "la nouvelle génération." HIhihiihihihihiihhihi
Je me doute bien que tu vas penser que je perds mon temps mais j'ai l'habitude des galères alors, je continue. :)) Il est certain que si je travaillais pour une grosse Compagnie, je ne pourrais pas me permettre de passer ben du temps sur un problème de positionnement, mais j'ai la chance d'être à mon compte alors, je ne me gênerai pas pour essayer. Ce que j'aime à penser c'est que, en trouvant une solution et testé comme quoi le tout va bien, les autres ne passeront pas des heures et des heures à chercher car ils auront une solution ici et la suivront.
Saanboy
Je sais parfaitement que tu as raison; je n'ai jamais obstiné ta solution dans ton message précédent comme quoi il faut revenir au standard mais, je sais qu'il existe une méthode. Quoi qu'avec misère, je réussirai à positionner le texte dans l'image et dès que j'aurai la solution, je viendrai la poster ici; pas pour nous, mais pour les autres qui verront ces posts, ils sauront comment faire. J'appellerai ça, "la nouvelle génération." HIhihiihihihihiihhihi
Je me doute bien que tu vas penser que je perds mon temps mais j'ai l'habitude des galères alors, je continue. :)) Il est certain que si je travaillais pour une grosse Compagnie, je ne pourrais pas me permettre de passer ben du temps sur un problème de positionnement, mais j'ai la chance d'être à mon compte alors, je ne me gênerai pas pour essayer. Ce que j'aime à penser c'est que, en trouvant une solution et testé comme quoi le tout va bien, les autres ne passeront pas des heures et des heures à chercher car ils auront une solution ici et la suivront.
Saanboy
theshadoo
Messages postés
786
Date d'inscription
samedi 26 mai 2007
Statut
Membre
Dernière intervention
3 mai 2016
123
27 janv. 2011 à 22:20
27 janv. 2011 à 22:20
Tu changes les pixel en pourcentage tout simplement %
(pas tout et n'importe quo non plus lol)
(pas tout et n'importe quo non plus lol)
Hello Rad Zone,
J'ai enfin trouvé un moyen que mon texte soit visible sur mon image superposée au background. Mon problème était que cette image cachait mon texte.
Voici le html pour placer le texte sur une image superposé à une autre :
<body>
<img src="images\fond.jpg" alt="" id="background" name="background"/>
<div id="content"><img src="images/image en.jpg" style="position: fixed; margin-left:13%; margin-top:6%; width:75%; height:75%">
<div id="conteneur"><span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte<br><br>
</div>
</div>
</body>
Et j'ai changé deux valeurs en pourcentage de mon conteneur pour finaliser le tout au sujet du texte.
J'ai testé avec toutes résolutions et le tout se place à merveille là où je voulais que ça se place. Et le plus important, je vois mon texte....ENFIN!
Have a nice day Rad Zone :))
Saanboy
J'ai enfin trouvé un moyen que mon texte soit visible sur mon image superposée au background. Mon problème était que cette image cachait mon texte.
Voici le html pour placer le texte sur une image superposé à une autre :
<body>
<img src="images\fond.jpg" alt="" id="background" name="background"/>
<div id="content"><img src="images/image en.jpg" style="position: fixed; margin-left:13%; margin-top:6%; width:75%; height:75%">
<div id="conteneur"><span class="c1"><i>Présentation</i></span>
<br />
<br />
<span class="c2">texte texte texte texte texte<br><br>
</div>
</div>
</body>
Et j'ai changé deux valeurs en pourcentage de mon conteneur pour finaliser le tout au sujet du texte.
J'ai testé avec toutes résolutions et le tout se place à merveille là où je voulais que ça se place. Et le plus important, je vois mon texte....ENFIN!
Have a nice day Rad Zone :))
Saanboy
Bonjour à tout le monde.
Pour donner un exemple de tout ce que j'ai voulu faire, je vais poster mon script css et html.
Donc, je voulais un background qui s'ajuste à toutes résolutions avec une image superposée ,et que cette même image soit fixe à une position très précise mais qui puisse aussi s'étirer à toutes résolutions et pour couronner le tout, un texte visible sur l'image superposée au background.
À partir du même script ci-haut mentionné, voici le css que j'ai modifié :
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
#background{
width:100%;
height:100%
}
#content{
position: absolute;
left:13%;
top:14%
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-185px;
padding:22px;
text-align:center;
position:fixed
}
#bg2{
position: fixed;
width:75%;
height:75%
}
span.c2{
color:#800000;
font-family:Georgia;
font-size:100%
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:125%
}
a:link, a:active, a:visited {
text-decoration : none;
color : #800000;
}
a:hover {
text-decoration : underline;
color : #800000;
}
Et voici le Html :
<html>
<head>
</head>
<body>
<img src="images\fond3.jpg" alt="" id="background" name="background"/> <div id="content"><img src="images/image en .jpg" alt="" id="bg2" name="bg2"/>
<div id="conteneur"><span class="c1"><i>Texte 1</i></span>
<br />
<br />
<span class="c2">t<i>Texte 2 </i></span>
</div>
</div>
</body>
</html>
Je suis fier de vous donner cet exemple. Have a nice day! :))
Saanboy
Pour donner un exemple de tout ce que j'ai voulu faire, je vais poster mon script css et html.
Donc, je voulais un background qui s'ajuste à toutes résolutions avec une image superposée ,et que cette même image soit fixe à une position très précise mais qui puisse aussi s'étirer à toutes résolutions et pour couronner le tout, un texte visible sur l'image superposée au background.
À partir du même script ci-haut mentionné, voici le css que j'ai modifié :
body,html{
width:100%;
height:100%;
margin:0;
padding:0;
}
#background{
width:100%;
height:100%
}
#content{
position: absolute;
left:13%;
top:14%
}
div#conteneur{
left:50%;
top:50%;
width:800px;
height:200px;
margin-left:-400px;
margin-top:-185px;
padding:22px;
text-align:center;
position:fixed
}
#bg2{
position: fixed;
width:75%;
height:75%
}
span.c2{
color:#800000;
font-family:Georgia;
font-size:100%
}
span.c1{
color:#800000;
font-family:Georgia;
font-size:125%
}
a:link, a:active, a:visited {
text-decoration : none;
color : #800000;
}
a:hover {
text-decoration : underline;
color : #800000;
}
Et voici le Html :
<html>
<head>
</head>
<body>
<img src="images\fond3.jpg" alt="" id="background" name="background"/> <div id="content"><img src="images/image en .jpg" alt="" id="bg2" name="bg2"/>
<div id="conteneur"><span class="c1"><i>Texte 1</i></span>
<br />
<br />
<span class="c2">t<i>Texte 2 </i></span>
</div>
</div>
</body>
</html>
Je suis fier de vous donner cet exemple. Have a nice day! :))
Saanboy
18 janv. 2011 à 22:00
Merci de bien vouloir vous pencher sur mon problème. Comment je pourrais dire autrement...?
Si je dis "flexible", vous comprennez ce que je veux dire? J'ai une image sur ma page d'accueil en jpg qui s'ajuste à la résolution détectée de l'utilisateur quand il visite ma page En résolution 1024 X 768 mon paragraphe est centré dans le milieu de ma page, mais seulement voilà, quand la résolution est plus grande, mon paragraphe n'est plus du tout centré au milieu. Ce que j'aimerais que ça fasse c'est que quand la résolution de l'utilisateur est plus grande, que mon paragraphe soit toujours centré au milieu de ma page d'accueil. Alors, comment je peux faire en sorte que mon conteneur css puisse se positionner au milieu de ma page selon la résolution de l'utilisateur?
}
div#conteneur
{
width: 1020px;
margin-top: 18px;
margin-bottom: 18px;
padding-top: 105px;
padding-left: 250px;
text-align: center;
}
Saanboy
18 janv. 2011 à 22:57
pour centrer en élément il faut utiliser ce code :
margin:0 auto;
19 janv. 2011 à 00:48
Bon! Sans vouloir t'offenser, j'ai déjà essayé cette méthode. Je répète que ça fait un an que je cherche donc, j'en ai essayé des trucs.
Je suis obligé de te demander de ne plus me donner de réponses Louchton, tu ne comprends pas et je ne peux pas être plus clair de ce que j'ai été. Désolé!
************************************************************************************************
Y' a-t-il un programmeur dans la salle qui pourrait me répondre SVP?
D'après ce code ci-dessous, est-ce qu'il y a une façon de rendre flexible ce conteneur pour que mon paragraphe reste au centre de ma page malgré une résolution plus basse ou plus grande de l'utilisateur ???
}
div#conteneur
{
width: 1020px;
margin-top: 18px;
margin-bottom: 18px;
padding-top: 105px;
padding-left: 250px;
text-align: center;
}
Merci à l'avance!
Saanboy
Modifié par RAD ZONE le 19/01/2011 à 02:18
le probleme est que avec uniquement ce bout de CSS il est impossible de repondre avec certitude !
de plus ta question porte a confusion car comme te l a deja dit duweb "flexible" ou "fluide" n a rien a voir avec "centre" ! et pour centrer en élément il faut utiliser ce code :
margin:0 auto;
dans certains cas il faut aussi savoir si cette div est insere dans une autre ou pas(quoi que j en doute vu le 1020px et les padding exorbitant ),
mais si oui ,
quel est l attribut de positionnement du parent ?
et par "centre" tu veux dire quoi,
centre horizontalement seulement ou horizontal et vertical ?
bref ,si ton site est en ligne , donne nous un lien ,
ou sinon met le code html et CSS ici ! ;-)
a+
19 janv. 2011 à 17:18
Je te remercie de bien vouloir te pencher sur mon problème. Merci aussi de me dire ce à quoi vous ne pouvez pas répondre avec certitude juste avec ce p'tit bout de code que j'avais donné.
Avant de mettre tout mon code ici, je voulais préciser quand vous dites que mes termes, flexible ou fluide n'a rien à voir avec "center" , je le sais très bien; fallait bien que je trouve quelque chose à expliquer puisque ma question porte dans le même sens. Comprennez aussi mon impatience face à cette situation, j'ai hâte de savoir comment faire, par l'entremise de votre aide bien-sûr.
Voilà le code :
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<title>Accueil</title>
<meta name="description" lang="fr">
<script language="javascript">
window.moveTo(0,0)
window.resizeTo(screen.width,(screen.height-25))
//-->
</script>
<style type="text/css">
body,html
{
width:100%;
height:100%;
margin:0;
padding:0;
}
#background
{
width:100%;
height:100%;
}
#content
{
position:absolute;
left:0;
top:0;
}
div#conteneur
{
width: 1020px;
margin-top: 18px;
margin-bottom: 18px;
padding-top: 105px;
padding-left: 250px;
text-align: center;
}
</style>
</head>
<body>
<img src="images\image en.jpg" alt="" id="background" />
<div id="content">
<div id="conteneur"><font color="#800000" face="Georgia" size="5"><i>Présentation</i></font><br><br>
<font color="#800000" face="Georgia" size="3">texte texte texte texte texte texte texte</font></div></div>
</body>
</html>
Voilà! Happy Enjoy! :))