calendar
Calendrier
Précédent   Forums CustomXP > Informatique - General > Informatique et internet
Recharger cette page Questions de site web
Informatique et internet
un probleme de pc ? windows plante inexorablement ? comment installer un logiciel ? configurer une connexion internet, etc... ce forum est dedie a tous les petits soucis quotidien de l'informatique

Réponse
Page 1 sur 2 | 1 2 >  | 
Modes d'affichage clear
Rechercher clear
Outils de la discussion clear
#1
Vieux 26/01/2007, 22h22
Questions de site web
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Salut !

1ère question

J'ai commencé un site web. J'ai mis une image de fond et j'aimerais nen mettre une autre par-dessus. Avec Firefox elle embarque par-dessus mais avec Explorer elle est en-dessous. (J'utilise le bloc-notes) Y a-t-il un code spécial pour dire qu'une image soit en premier plan ?


------------------------------


2e question

J'aimerais mettre une image dans le centre de l'écran (l'image est de 64px de haut) et ensuite j'aimerais mettre 2 bandes sur les côtés pour que quand je rapetisse la fenêtre de mon navigateur, se soit les 2 bandes sur les côtés qui rapetisse et non l'image du centre. Comment je marque ça en code ? (bloc-notes)


Merci d'avance !!
Réponse avec citation Haut de page
#2
Vieux 26/01/2007, 23h08
Lefreut
-
Avatar de Lefreut
Team CustomXP.net
Date d'inscription : août 2003
Messages : 5 816
Lefreut est déconnecté
Citation:
Envoyé par RocKkk Voir le message
1ère question

J'ai commencé un site web. J'ai mis une image de fond et j'aimerais nen mettre une autre par-dessus. Avec Firefox elle embarque par-dessus mais avec Explorer elle est en-dessous. (J'utilise le bloc-notes) Y a-t-il un code spécial pour dire qu'une image soit en premier plan ?
Tu peux par exemple faire un <div> et lui mettre une image de fond avec la propriété CSS background. Et dans ce <div>, tu met une <img> qui sera donc par dessus

Citation:
Envoyé par RocKkk Voir le message
2e question

J'aimerais mettre une image dans le centre de l'écran (l'image est de 64px de haut) et ensuite j'aimerais mettre 2 bandes sur les côtés pour que quand je rapetisse la fenêtre de mon navigateur, se soit les 2 bandes sur les côtés qui rapetisse et non l'image du centre. Comment je marque ça en code ? (bloc-notes)
J'ai pas bien compris ce que tu veux faire Si tu met une image avec une taille fixe. Elle se reduit pas quand tu rapetisse la fenêtre du navigateur
Réponse avec citation Haut de page
#3
Vieux 27/01/2007, 14h12
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Bien je veux dire que je metterais une image en taille fixe dans le milieu et 2 images en taille non fixe sur les côtés. Comme ça quand je rappetisse ma fenêtre de navigateur, se sont les 2 images du côté qui rapetissent et non celle du centre. (C'est pour faire un menu en haut (un menu dont les onglets sont des image qui vont se placer dan sl'image du centre))
Réponse avec citation Haut de page
#4
Vieux 27/01/2007, 16h02
Lefreut
-
Avatar de Lefreut
Team CustomXP.net
Date d'inscription : août 2003
Messages : 5 816
Lefreut est déconnecté
Cela va dépendre des images que tu veux mettre. Si c'est une image qui se répète en largeur, tu fais une image de 1px de large et tu utilise ce que j'ai répondu à ta première question avec un repeat sur le background. Comme cela l'image s'adapte en largeur au <div>.

Tu a un screen de ce que tu veux faire
Réponse avec citation Haut de page
#5
Vieux 04/02/2007, 18h58
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Ok je t'ai fait des petits screens. Je vais te les expliquer.

Screen 1


3- Je veux que cette image sois de 700px de large. Elle, quand je rapetisse la fenêtre elle ne se déforme pas. Elle est toujours de 700px de large et elle bouge juste pour rester centrée. les onglets qui sont par dessus (comme Accueil) ne se déforme pas eux non plus ... ils restent à la même place (ils suivent l'image du centre (3)).

1- Je veux que cette partie prenne le reste à droite de l'écran du visiteur. Et que disons que je rapetisse la fenêtre l'image se rapetisse en largeur.

2- Pareil comme 1sauf qu'elle est à Gauche


Quand je rapetisse la fenêtre de mon navigateur, je veux que les images 1 et 2 se consument et que l'image 3 reste toujours de 700px et s'adapte seulement pour rester centrée.

Screen 2

Le Screen 2 représente ce que sa donne en ce moment quand je rapetisse la fenêtre.

1- On dirait que le Background est fixe et qu'il n'en a qu'un ?
2- l'onglet Acceuil n'a pas bougé d'un poil.... il faudrait qu'il suive l'image du centre...



Merci à tous !
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : 1.JPG Affichages : 115 Taille : 85,3 Ko ID : 3157   Cliquez sur l'image pour la voir en taille réelle Nom : 2.JPG Affichages : 104 Taille : 53,0 Ko ID : 3158  
Réponse avec citation Haut de page
#6
Vieux 04/02/2007, 19h18
Lefreut
-
Avatar de Lefreut
Team CustomXP.net
Date d'inscription : août 2003
Messages : 5 816
Lefreut est déconnecté
Tu fais un div global avec ton image de fond et dedans un div de largeur fixe centré avec l'image de 700px. Un truc de ce style.

Le code HTML:
Code:
<div class="main">
<div class="center">
...
</div>
</div>
Et le CSS:
Code:
.main {
  background: #FFF url(...) repeat-x;
}

.center {
  width: 700px;
  margin: auto;
  background: url(...);
}
Bon c'est basique, cela demande adaptation pour correspondre exactement à ce que tu veux.
Réponse avec citation Haut de page
#7
Vieux 04/02/2007, 20h13
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
J'ai fait ce que tu a dis et j'étais sûr que sa marcherais mais non ??

Je ne comprend vraiment pas ... tous mes liens sont bon je les ai tous regardés ?

Là sur le navigateur il n'y a plus aucun menu ... y a juste un espace ?

regarde le code ...

HTML:

Code:
<div>
                <div class="main">
                <div class="center">
                <div id="onglets">
                <div class="oacceuil"></div>
                <div class="oflash"></div>
                <div class="oicons"></div>
                <div class="owallpaper"></div>
                <div class="odesks"></div>
                <div class="oautres"></div>
                </div>
                </div>
                </div>
             </div>
Et le CSS

Code:
body
{
   margin: auto;
   background-color: #9fd8ff;
}
/*MENU*/
.main
{
  background-image: url(".images/Menu/Background copie.jpg");
  background-repeat: repeat-x;
}

.center
{
  width: 700px;
  margin: auto;
  background-image: url("./images/Menu/Background copie.jpg");
  background-repeat: repeat-x;
}
#onglets
{
border: 0px;
width: 725px;
margin-top: -59px;
}

.oacceuil
{
width: 120px;
margin-left: 50%;
background-image: url("./images/Menu/Accueil4.jpg");
height: 32px;
}
Je ne voit aucune erreur ?
Dernière modification par RocKkk ; 04/02/2007 à 20h16.
Réponse avec citation Haut de page
#8
Vieux 04/02/2007, 20h53
bubka
- Gorille ultrabright -
Avatar de bubka
Team CustomXP.net
Date d'inscription : décembre 2002
Messages : 16 780
bubka est déconnecté
spa tres cohérent tout ça. tu mets tes sous div de 120px chacunes ( soit 720 px ) dans une div qui en fait 725 ( jusque la ça va ) mais tu places le tout dans une div qui devrait faire 700px ?!

Met le background de .center dans #onglets, ça reviendra au meme et t'economiseras une class css.

de plus, si j'ai bien compris lee truc, a mon avis il te manque des float:left sur chaque sous div correpsondant à un onglet. Sans ça, ça va pas ressembler a grand chose à mon avis
Réponse avec citation Haut de page
#9
Vieux 04/02/2007, 20h58
Anti-trust
Z'avez pas vu Cortex ?
Avatar de Anti-trust
Ultimate
Date d'inscription : décembre 2002
Messages : 11 004
Anti-trust est déconnecté
vous pourriez parler français

Réponse avec citation Haut de page
#10
Vieux 04/02/2007, 21h58
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Bubka, j'ai fais tous les correctif merci ;)

Mais ça n'a rien changé .... Les images n'apparaissent plus ??

regardez sur le screen

Ya plus rien qui marche et ... RRrrr
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : 3.JPG Affichages : 107 Taille : 42,2 Ko ID : 3160  
Dernière modification par RocKkk ; 04/02/2007 à 23h08.
Réponse avec citation Haut de page
#11
Vieux 04/02/2007, 22h56
Lefreut
-
Avatar de Lefreut
Team CustomXP.net
Date d'inscription : août 2003
Messages : 5 816
Lefreut est déconnecté
Rajoute un height de la hauteur de tes images dans le .main car vu qu'il n'y a pas de textes dans tes divs, ceux-ci n'ont pas de hauteur.

Citation:
Envoyé par RocKkk Voir le message
Code:
#onglets
{
border: 0px;
width: 725px;
margin-top: -59px;
}

.oacceuil
{
width: 120px;
margin-left: 50%;
background-image: url("./images/Menu/Accueil4.jpg");
height: 32px;
}
Le margin-top: -59px et margin-left: 50% me parraissent bizarre. Ils servent à quoi?
Réponse avec citation Haut de page
#12
Vieux 04/02/2007, 23h12
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Ok j'ai tout rajouté et enlevé ce que tu m'a dit mais les images ne réapparaissent pas ??? je ne comprend pas ?? le code a l'air parfait mais il faut croire que non ??
Réponse avec citation Haut de page
#13
Vieux 04/02/2007, 23h32
Lefreut
-
Avatar de Lefreut
Team CustomXP.net
Date d'inscription : août 2003
Messages : 5 816
Lefreut est déconnecté
En fait, c'est dans le .center qu'il faut le mettre le height.

Avec ce code, j'obtiens l'image en pièce jointe. C'est à peu près ce que tu veux?

Code:
<!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" xml:lang="fr" lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />	
		<meta http-equiv="content-language" content="fr" />
		<link rel="stylesheet" media="screen" type="text/css" title="main" href="style.css" />
		<title>Test panel</title>
	</head>
	<body>
		<div>
    <div class="main">
      <div class="center">
      <div class="oacceuil">Accueil1</div>
      <div class="oacceuil">Accueil2</div>
      <div class="oacceuil">Accueil3</div>
      <div class="oacceuil">Accueil4</div>
      <div class="oacceuil">Accueil5</div>
      <div class="oacceuil">Accueil6</div>
      <div class="oacceuil">Accueil7</div>
      </div>
    </div>
    </div>
	</body>
</html>
Code:
body
{
   margin: auto;
   background-color: #9fd8ff;
}

.main
{
  background: #F0F;
}

.center
{
  width: 700px;
  height: 25px;
  margin: auto;
  background: #0F0;
  text-align: center;
}

.oacceuil
{
  width: 100px;
  float: left;
}
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : test.jpg Affichages : 105 Taille : 48,3 Ko ID : 3161  
Réponse avec citation Haut de page
#14
Vieux 16/02/2007, 00h50
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
C'est super j'ai réussi à faire ça

En fait, mon problème était que mes images ne marchaient pas ... on aurait que le liens était bogué ?? mais bon ... là sa marche

Je vous ai mis un screen

Si j'ai d'autres problèmes, je reposterai dans ce topic.


EDIT: oufff ... la qualité est mauvaise ...(du screen) en tout cas c'ets meilleur en vrai... lol
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : Sans titre.JPG Affichages : 91 Taille : 43,1 Ko ID : 3183  
Réponse avec citation Haut de page
#15
Vieux 17/02/2007, 21h21
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
J'ai encore quelques petits problèmes de code ...

(Le screen 1 vas avec le code du screen 2 et le screen 3 et 4 vont ensembles aussi. le dernier, c'est mon CSS pour l'image CORPS)

Alors je veux que les mots soient dans l'encadré noir. Mais je ne suis aps capable de les placer ... Il faut que je centre l'image CORPS et que je puisse contrôler l'emplacement du texte...

Comme on peut voir, sur le 1er screen le texte se met centré comme l'image et je ne peut plus le bouger ...

Sur le screen 3, l'image CORPS se place en dessous du texte... et quand je descend le texte, l'image descend aussi ???

Merci à vous tous !
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : bla.JPG Affichages : 100 Taille : 58,2 Ko ID : 3189   Cliquez sur l'image pour la voir en taille réelle Nom : bla2.JPG Affichages : 84 Taille : 15,4 Ko ID : 3190   Cliquez sur l'image pour la voir en taille réelle Nom : blb.JPG Affichages : 109 Taille : 60,2 Ko ID : 3191   Cliquez sur l'image pour la voir en taille réelle Nom : blb2.JPG Affichages : 88 Taille : 15,3 Ko ID : 3192   Cliquez sur l'image pour la voir en taille réelle Nom : css.JPG Affichages : 80 Taille : 7,7 Ko ID : 3193  
Réponse avec citation Haut de page
#16
Vieux 18/02/2007, 16h13
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Il n'y a personne qui sait ?
Réponse avec citation Haut de page
#17
Vieux 18/02/2007, 16h24
bubka
- Gorille ultrabright -
Avatar de bubka
Team CustomXP.net
Date d'inscription : décembre 2002
Messages : 16 780
bubka est déconnecté
essai quelque chose dans ce genre la :

Code HTML:
<div id="corps">
  <div class="titre">
    <a href="index.html">RoCkKK Art</a>
  </div>
  <div class="soustitre">
    Expositions graphiques, Ressources windows, Explorez !
  </div>
</div>
avec ceci pour ta class 'titre' :
Code HTML:
.titre {
  padding-top: 20px;
}
Si jamais le titre est mal positionné en hauteur, modifie la valeur 20 dans la class titre.
Réponse avec citation Haut de page
#18
Vieux 20/02/2007, 02h03
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Ok ! C'est fait !

merci à vous tous !

P.S.: S'il y a d'autres personnes qui ont des petits problèmes avec vos sites web n'hésitez pas !
Dernière modification par RocKkk ; 20/02/2007 à 02h07.
Réponse avec citation Haut de page
#19
Vieux 20/02/2007, 02h26
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Salut ! J'ai une autre interrogation ...

Si vous regardez sur le print screen, j'aimerais que la zone en rouge (zone du centre qui est encadré en rouge) ait une barre de défilement.

Finalement je veux que le menu en haut reste fixe et que ce soit la section en rouge qui soit défilable. En rose, ce serait l'emplacement de la future barre de défilement.

Je connais déjà la fonction overflow et scroll ou auto mais quand je l'applique, sa fait 2 barre de défilement dont une qui ne marche pas ??

Merci d'avance !
Miniatures attachées
Cliquez sur l'image pour la voir en taille réelle Nom : Sans titre.JPG Affichages : 119 Taille : 46,6 Ko ID : 3199  
Dernière modification par RocKkk ; 20/02/2007 à 02h28.
Réponse avec citation Haut de page
#20
Vieux 21/02/2007, 00h48
RocKkk
-
Avatar de RocKkk
Basic
Date d'inscription : juillet 2006
Messages : 32
RocKkk est déconnecté
Je crois que je n'ai pas posté mon message à la bonne heure hier (moi je suis au Québec)

En tout cas ... c'est juste pour faire un petit up !
Réponse avec citation Haut de page
Réponse
Page 1 sur 2 | 1 2 >  | 
Utilisateurs regardant la discussion actuelle : 1 (0 membre(s) et 1 invité(s))
 


Navigation rapide
Règles de messages
Vous ne pouvez pas créer de nouvelles discussions
Vous ne pouvez pas envoyer des réponses
Vous ne pouvez pas envoyer des pièces jointes
Vous ne pouvez pas modifier vos messages
Les balises BB sont activées : oui
Les smileys sont activés : oui
La balise [IMG] est activée : oui
Le code HTML peut être employé : non
Règles du forum

Powered by vBulletin® Version 3.8.11 - Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.
Version française #21 par l'association vBulletin francophone - CNIL N°834125