rss
Ils ont besoin de votre aide Tous les messages sans réponse
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

[Image de fond d'écran + image haut droite]

Posté par Newhope, le vendredi 5 janvier 2007 à 14:17:30
Coucou ^^

J'ai fais tout un parcours du combattant pour installer un site web depuis mon propre ordi, n'étant qu'un pauvre étudiant en droit et n'y connaissant strictement rien en informatique ^^

J'ai eus beaucoup d'aide grâce à des tutos de ce site qui m'ont énormément aidé : mon site est derrière un routeur, j'ai donc du :
- Créer une adresse ip fixe (deeEnEs)
- Configurer les ports de mon routeur
- Configurer mon firewall
- Configurer le "listen" et les root directory dans la config du serveur apache.
- Configurer la redirection du serveur sur le routeur.

J'ai réussis et je le dois grandement aux articles de ce site et à ceux du forum easyphp !

J'en suis maintenant à la réalisation du site web, mon but pour ma page index est de mettre une image de fond comme background et une image également sur le côté, et que ces images s'adapte à la résolution du visiteur (je suis en 1280 x 960 pour ma part).
Et là je but totallement malgrès les nombreux codes copiés vilement sur le net.

Voici le dernier que j'ai trouvé

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
#hd{
background-repeat:no-repeat;
background-image:url(Images/saikano.jpg);
}


#hg{
background-repeat:no-repeat;
background-image:url(Images/1154519890.jpg);
}



#hd {
background-position:top right;
}

#hg {
background-position:top left;
}

#contenu {
margin-left:100px;
margin-right:100px;
}
#contenu p {
text-align:justify;
}
-->
</style>
<title>Images aux quatre coins d'une page web en CSS</title>
</head>
<body>
<div id="hg">
<div id="hd">
<div id="bg">
<div id="bd">
<div id="contenu">
<h1>Images aux quatre coins d'une page web en CSS</h1>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
<hr />
<p style="text-align:center"><a href="javascript:history.back()">Retour</a&g­t;</p>
<p style="text-align:center">© <a href="http://www.mammouthland.net">Bienvenue à Mammouthland !</a></p>
</div><!-- /contenu -->
</div><!-- /hg -->
</div><!-- /hd -->
</div><!-- /bg -->
</div><!-- /bd -->


</body>
</html>
}




Je laisse le texte j'éditerai plus tard le problème c'est les images, Saikano est l'image que je veux incorporer en haut à droite et 1154519890.jpg celle que je veux en fond d'écran, et il faut qu'elles gardent la même proportion selon la résolution du visiteur.

Merci d'avance à tous ceux qui passeront me prodiguer leur précieux conseil je suis un peu desespéré là ça fait 2h je bute dessus ^^
Configuration: Windows XP
Internet Explorer 7.0
Répondre à Newhope  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Julien, le vendredi 5 janvier 2007 à 16:43:57
moi je te donne une petite methode que je m'etais faite pour gerer la dimension du fond d'ecran.
Par contre il te faut une image par dimension avec le nom sous la forme Fond_1280_960.jpg dans ton dossier images/ je fait toujours comme ca car quand tu redimensionne directement dans le html tu perd de la qualité.

PAGES resolution.php : 
<?

if(isset($_GET['width']) && isset($_GET['height'])) // Verifie que les dimensions données ne sont pas vides 
{
	$img = "images/Fond_".$_GET['width']."_".$_GET[­'height'].".jpg"; // Va chercher l'image de la bonne dimension
	
	if(file_exists($img)) echo $img; // Si le fichier existe il saffiche
	else echo "images/Fond_1280_960.jpg"; // Sinon affiche le fond le plus grand
}
else echo "images/Fond_1280_960.jpg"; // Si les dimensions ne sont pas données selectionne le fond le plus grand

?>


La page de ton site : 
<html>
<head>
<script type="text/javascript">
function ajax(fichier)
{
	if(window.XMLHttpRequest) // FIREFOX
	xhr_object = new XMLHttpRequest();
	else if(window.ActiveXObject) // IE
	xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
	else
	return(false);
	xhr_object.open("GET", fichier, false);
	xhr_object.send(null);
	if(xhr_object.readyState == 4) return(xhr_object.responseText);
	else return(false);
}

function bg()
{
	var url = ajax("resolution.php?width="+screen.width+"&a­mp;height="+screen.height);
	var bgObject = eval('document.body');
	bgObject.style.backgroundImage = "url(" + url + ")";
}

</script>
</head>
<body onLoad="javascript:bg()" style="background-attachment:fixed;">
Contenu
</body></html>



Bon je sais c'est un peu du systeme D mais ca fonctionne, j'ai utiliser du php et de l'ajax.

Bonne chance
++
   
Répondre à Julien

2


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Julien, le vendredi 5 janvier 2007 à 16:50:09
apres a toi de rajouter ton code dans l'entete (<head></head>) et le corps (<body></body>)
   
Répondre à Julien

3


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Newhope, le vendredi 5 janvier 2007 à 18:13:45
Coucou julien et merci ! j'ai résolu le problème pour les résolutions en fait ^^ mais là le problème cest que l'image de fond fait la taille de l'écriture.

<html>
<head>
<title>Welcome on TANA.GOTDNS.ORG</title>

<style type="text/css">
<!--

#hd{
background-repeat:no-repeat;
background-image:url(Images/saikano.jpg);
background-attachment:fixed;
}


#center{
background-repeat:no-repeat;
background-image:url(Images/Ragnarok1280.jpg);
background-attachment:fixed;
}



#hd {
background-position:50% 10%;
}

#center {
background-position:0% 0%;
}


#contenu {
margin-left:100%;
margin-right:100%;
}
#contenu p {
text-align:justify;
}
-->
</style>


<body>
<div id="center">
<div id="hd">

<div id="contenu">
<h1 align="justify"> </h1>
</div>
</contenu>
<h1 align="center"><strong><em>The Legend Will Reborn</em></strong></h1>
<p align="justify"><em><strong>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</strong></em></p>
<hr align="JUSTIFY" />
</div>
</hg>
<p style="text-align:center">© <a href="/home.php">Seek The Truth</a></p></div></hd>
</div></bg>
</div></bd>


</body>
</head>
</html>


Le rendu :

http://img441.imageshack.us/my.php?image=clipboard03gu2.jpg


Ca fait 3h que j'essaye de faire en sorte que la page web prenne comme fond l'image Ragnarok 1280 en fond d'ecran (pour la résolution 1280 avec laquelle je travaille) cest desespérant ...
   
Répondre à Newhope

4


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
Julien, le vendredi 5 janvier 2007 à 18:35:46
aaaaa ookkkk desole !!

dans ce cas la modifie ta feuille de style comme cela, dit moi si c'est ce que tu recherche: 

<style type="text/css">
<!--

#hd{
background-repeat:no-repeat;
background-image:url(gg.jpg);
background-attachment:fixed;
height:100%;
width:100%;
}


#center{
background-repeat:no-repeat;
background-image:url(Images/Ragnarok1280.jpg);
background-attachment:fixed;
}



#hd {
background-position:50% 10%;
}

#center {
background-position:0% 0%;
}


#contenu {
margin-left:100%;
margin-right:100%;
}
#contenu p {
text-align:justify;
}
-->
</style>
   
Répondre à Julien

5


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 Newhope, le dimanche 7 janvier 2007 à 18:26:29
même effet que l'autre, enfin j'ai résolu le problème avec un autre code maintenant je lutte pour la balise include qui marche pas
   
Répondre à Newhope
Posez votre question Répondre
Logiciels pertinents trouvés dans les téléchargements
Télécharger Virtual Dimension 0.94Virtual Dimension - Ce logiciel vous permet d'avoir des bureaux virtuels, c'est à dire des écrans avec chacun leurs fenêtres, barre des tâches...Catégorie: Environnement de travail
Licence: Open Source
Télécharger PicLens 1.7.1.3900PicLens - PicLens permet de transformer instantanément un navigateur Internet en un logiciel de présentation d'images plein écran....Catégorie: Navigateurs
Licence: Freeware/gratuit
Télécharger VSO Image Resizer 2.0.1.9VSO Image Resizer - Le logiciel VSO Image Resizer organise vos photos en réduisant leur résolution et en les déplaçant facilement au sein de...Catégorie: Graphisme
Licence: Freeware/gratuit
Télécharger ImageWell 3.5.3ImageWell - ImageWell n'est pas à proprement parler un logiciel de Retouche photo. Il permet plutôt de préparer des images pour le...Catégorie: Retouche photo
Licence: Freeware/gratuit
Plus de logiciels gratuits sur « [Image de fond d'écran + image haut droite] »