Imprimer la Page

Forum-webmaster

Général => Discussions générales => Message commencé par: Eydiaze le le 11-02-2010 a 21:46:41

Titre: Problème site
Posté par: Eydiaze le le 11-02-2010 a 21:46:41

bonjour ^^ voilà je fais en ce moment mon site et je rencontre un soucis.

Je m'explique je voudrais mettre trois images sur le site (attention quand je dis images, c'est pour le layout/design) un fond de couleur beige par exemple, puis une image sous l'image corps :-X hors je ne sais pas faire le fameux code pour cette image entre la couleur body et l'image corps.

Quelqu'un pourrait m'aider s'il vous plait!?

voici une schéma parce que rien de mieux qu'une image pour illustrer le problème =)
[url=http://www.casimages.com/img.php?i=100211095537536396.png]

Titre: Re:Problème site
Posté par: webexp le le 12-02-2010 a 09:29:18

Bonjour Eydiaze,

S'agit-il de quelque chose comme ça ?

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<style type="text/css">
body{background:#CCCC00;
}
#mainContainer{
width: 960px;
height: auto;
margin: 0 auto;
}
.header{
height: 100px;
background:#999900;
}
.menu{
height:50px;
background:#999999;
}
.imageContent{
width: 200px;
height: 250px;
float: right;
background:gray;
margin: 5px;
}
.content{
background:red;
min-height:250px;
width: 900px;
margin: 0 auto;
}
</style>
<body>
   <div id="mainContainer">
   <div class="header">header</div>
<div class="menu">menu</div>
<div class="content">contenu
   <div class="imageContent">image contenu</div>
</div>
</div>
</body>

</html>

Titre: Re:Problème site
Posté par: Eydiaze le le 12-02-2010 a 14:56:27

:-X euh....j'avoue que je m'y prend pas comme ça...je vais essayer ton code pour voir ??? tu as mis du css dans le html en fait c'est ça? (moi je les divises vu la plouc que je suis XD pour ne pas me perdre) voici ce que j'ai en css perso:

(j'ai retiré mon code par soucis de place pour le sujet)

Titre: Re:Problème site
Posté par: Pad le le 14-02-2010 a 00:59:59

Il faut que tu rajoute une balise div entre la balise <div id=corps"> du genre
<div id="souscorps"><div id=corps"></div></div>.

Ensuite il faudra mettre le css de la div souscorps du genre :
#souscorps
{
margin-top: 50px;
margin-left: 140px;
margin-bottom: 20px;
padding: 15px;
background-image: url("images/souscorps.png");
background-repeat: no-repeat;
}

Il faudra surement revoir les margin de la div corps pour qu'elle revienne au même endroit.

Titre: Re:Problème site
Posté par: Eydiaze le le 15-02-2010 a 20:43:02

merci pad alors j'ai suivi ton conseil et hum :-X je connais quelques soucis concernant l'assemblage des deux. Malgré mes changements sur les" margin" rien ne bouge comme je le voudrais autre constat, l'image corps est inchangeable sans changer l'image souscorps et inversement comme ci elles étaient collées ><"

voici ce que j'ai:
http://img7.hostingpics.net/pics/811974Sans_titre.png

voici ce que je voudrais:
http://img7.hostingpics.net/pics/909622model.png

Titre: Re:Problème site
Posté par: Eydiaze le le 20-02-2010 a 13:59:25

up svp

Titre: Re:Problème site
Posté par: Pad le le 20-02-2010 a 15:27:32

Remet nous une partie du code html et css, mais pas l'ensemble de la page...

Titre: Re:Problème site
Posté par: Eydiaze le le 27-02-2010 a 18:40:27

bon voilà les deux pages à upload sur mediafire (sans temps d'attente)
;D comme ça une vue d'ensemble et: pas de pollution visuelle !

http://www.mediafire.com/?am4zmmzanht (css)
http://www.mediafire.com/?azm13mvqmym (html)

::) vala j'espère que ça vous éclairera un peu.
Merci

Titre: Re:Problème site
Posté par: Eydiaze le le 05-03-2010 a 22:24:12

up!?

Titre: Re:Problème site
Posté par: WebRocket le le 12-03-2010 a 09:46:49

Fait t'es draft sous paint ca ira beaucoup plus vite ;)

Titre: Re:Problème site
Posté par: marionm91 le le 12-03-2010 a 12:16:18

bonjour,
je viens de regarder tes codes css et html par rapport aux images que tu donnes en disant que ce que tu obtiens .http://img7.hostingpics.net/pics/909622model.png (http://img7.hostingpics.net/pics/811974Sans_titre.png]http://img7.hostingpics.net/pics/811974Sans_titre.png[/url] D'après ce que j'ai vu , je dirai que si tu veux obtenir ([url=http://img7.hostingpics.net/pics/909622model.png)) .
Je n'ai pas les images donc le rendu je ne le vois que avec les rebords , j'ai donc une question avant de te proposer une solution , pourquoi
dans ton css , à #souscorp tu as un" margin-top : -150px ; " ??

Titre: Re:Problème site
Posté par: Eydiaze le le 12-03-2010 a 14:47:55

alors webrocket: draft!? je fais le patron du site via photoshop si c'est bien de ça que tu parles.

marionm91: parce que j'avais rencontré un soucis avec l'image corps et souscorps, au lieu de coller le menu déroulant, il y avait un grand espace le seul moyen que j'ai trouvé pour que ça colle de nouveau c'est de mettre des valeurs négatives. si tu souhaites que je joigne les images du site avec les pages pas de soucis dis le moi.

Titre: Re:Problème site
Posté par: marionm91 le le 12-03-2010 a 15:34:20

okok je vois.oui je veux bien pour les images comme ça je pourrai te fournir une réponse détaillé et précise. Car il y a forcément une solution.

Titre: Re:Problème site
Posté par: Eydiaze le le 12-03-2010 a 15:58:06

Très bien alors voici les images sites avec une image du rendu souhaité ( à peu de choses près) les noms de certaines images ne seront peut être pas correspondants à ceux de mis sur dans le css, à toi de voir normalement il ne devrait pas trop y avoir de soucis, mais si c'est le cas n'hésite pas!
http://www.mediafire.com/?tzzmmjmdkjh

Titre: Re:Problème site
Posté par: marionm91 le le 12-03-2010 a 18:04:19

okok. alors voilà j'ai fais quelque changements , je vous met ici une image du rendu , dites moi si c'est bien cela que vous voulez; , et je vous poste les modifications et les explications.http://yfrog.com/0jexemplezzj (http://yfrog.com/0jexemplezzj)

Titre: Re:Problème site
Posté par: Eydiaze le le 12-03-2010 a 20:02:21

C'est exactement ça! :D
mais est ce que l'image corps s'étend en fonction de la longueur de la news
ou est-ce que les écritures dans ce cas de figure dépasse du cadre!?

(c'est super ne serait-ce que l'arrangement des deux c'est un exploit, vous avez utilisé float?)

Titre: Re:Problème site
Posté par: marionm91 le le 12-03-2010 a 22:07:11

alors pour le design lui-même ce que jai fait dans le css :

Quand j'ouvrais la page, le menu mangé la partie basse de l'en tete , donc j'ai changé la hauteur de l'en tête :
- #en_tete
{

height: 110px; >>>> pour height : 162px; (j'ai mis la hauteur div à la meme que celle de l'image d'en tête)

puis à #menu, #menu ul /* Liste */ j'ai rajouté un margin-top : 0px; pour etre sur que le menu reste bien collé ( si ça le fait pas chez toi sans rien touché , c'est pas nécessaire de le changer).

Apres , à #souscorps , j'ai rajouté un bord tranparent "border: 2px solid transparent ;" afin de pouvoir obtenir leffet collé voulu avec le menu ,

- puis j'ai changé le margin-top en "margin-top: -3px;"

- et le margin-left en "margin-left: -20px; " car sinon ce n'était pas aligné

- et enfin j'ai réduit la largeur de l'image souscorps.png à 780px pour que ça reste aligné et ne dépasse pas de trop sur la droite.

Pour le texte dans la partir corps : par rapport au design , vu que ce sont des images , si le texte est trop long , il dépassera . La seule solution est de
rajouter une scrollbar au corp . Enfin pas tout à fait au corp sinon ça coupe un peu le design. Ce que je propose c'est de rajouter une autre div à l'intérieur
du corps :

ce qui donnera dans le html :
<div id="corps">
<div id="corps1">

n'oubliez pas de rajouter un </div> à la fin sinon il manquera une fermeture.

puis dans le css : rajouter cela
#corps1{
height : 380px;
width : 570px;
border: 2px solid transparent ;
overflow-y : scroll ;

}

et dans #corps rajouter aussi cela : height : 420px; width : 550px;

Voilà j'espère que tout ça est assez clair sinon n'hésitez à demander ou s'il ya d'autres questions.

Titre: Re:Problème site
Posté par: marionm91 le le 12-03-2010 a 22:09:22

j'oubliais j'ai aussi rajouté height : 600px; dans #souscorps pour pas que ça soit mangé par le reste.

Titre: Re:Problème site
Posté par: Eydiaze le le 12-03-2010 a 22:42:49

han! la scrollbar est trop classe! :-[ vous êtes un amur!
Par contre est-ce normal si le menu quand il se déroule ne se déroule pas de façon droite!? :-\ j'ai un peu trafiquer et visiblement ça ne veut pas repasser en déroulement droit

Titre: Re:Problème site
Posté par: marionm91 le le 13-03-2010 a 00:16:41

Alors le css que l'on as avec le sous menu décalé

/* Le menu */

#menu, #menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : 0; /* ni extérieure */
margin-left: 40px;

ce qui le décale c'est le margin-left , il déplace à la fois le menu et le sous menu.
donc pour que seul le menu soit décalé par rapport à la gauche et non le sous menu
avec je réécrit cette partie du code comme cela

#menu{
margin-left: 80px;

}
#menu ul /* Liste */
{
padding : 0; /* pas de marge intérieure */
margin : auto; /* ni extérieure */

en méttant #menu tout seul pour pouvoir lui mettre le margin-left rien qu'à lui. j'ai mis 80px pour le centrer un peu , vous pouvez changer comme vous le souhaitez. et j'ai enléve la ligne margin-left de ce que nous avons maitenant comme #menu ul /* Liste */ .

Titre: Re:Problème site
Posté par: Eydiaze le le 13-03-2010 a 00:28:44

...je me sens bête d'avoir posé la question tellement ça paraît logique maintenant que vous l'expliquez :-[ .

Merci beaucoup pour vos explications détaillées et pour votre aide!
Vous avez débloqué une situation que je croyais impossible! +1 ;)