28173 sujets

CSS et mise en forme, CSS3

Problème de positionnement 3 <div>

Dieux du code, à l'aide pour mon css :

Je souhaite positionner sur une page 3 images différentes, une centrée, une à gauche qui rempli la page vide, l'autre à droite qui rempli la page vide. Il est important que les images de remplissage soient différentes car l'ensemble va représenter une courbe montante en son centre et un plat à gauche bas et un plat à gauche haut. J'ai essayé ça mais bon.

L'image de droite fait 1px de large et 284 de long, idem pour celle de gauche, et celle du centre fait 900 par 284, j'ai du me planter qq part... Merci 



<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style> 
/* body{padding:0;background-color:#000000;margin:0;font-family: Arial, Helvetica, sans-serif;color:#FFFFFF;text-align:center;}*/ 
body{padding:0;;margin:0;font-family: Arial, Helvetica, sans-serif;color:#FFFFFF;text-align:center;} 
 
 
#page{ 
border-width:1px; 
  border-style:solid; 
  border-color:blue; 
   
   
backgground-color:#000000;text-align:left;padding-top:100px; 
width:1024px; 
height:500px; 
} 
 
#gauche{ 
} 
 
#centre{ 
 border-width:1px; 
  border-style:solid; 
  border-color:blue; 
 background-image:url(centre.jpg);background-repeat:repeat-x; 
 width:900px; 
 height:284px; 
 clear: both; 
 } 
#droite{ 
 
 border-width:1px; 
  border-style:solid; 
  border-color:blue; 
 float:right; 
 width:1px; 
 height:284px; 
 
background-image:url(droite.gif);background-repeat:repeat-x;} 
 
#content{width:1024px; 
 
border-width:1px; 
  border-style:solid; 
  border-color:blue; 
  float:left; 
  height:284px; 
 
background-image:url(droite.gif);background-repeat:repeat-x;width:1px; 
} 
 
</style> 
<link rel="stylesheet" href="style.css" type="text/css" media="screen" /> 
<title>Document sans nom</title> 
</head> 
<div id="page"> 
<div id="content"> 
<div id="gauche"> 
<div id="centre"> 
  
 Contenbt 
 <div id="droite"></div> 
</div> 
 
</div> 
</div> 
</div> 
<body> 
</body> 
</html>

Modifié par maman poule (20 Oct 2007 - 01:21)
Salut,

Pourrais-tu nous fournir un exemple en ligne? J'ai pour ma part bien du mal à visualiser où tu veux en venir en l'état…
Merci pour ta réponse,

Le site est comme ça mais c'est en frame et moi je préfère le css afin de mieux référencer le site, car leur cache est vide comme tu pourras le constater et ça c'est pas bon pour gougle Smiley sweatdrop .

Mais C'est le même principe, une courbe au centre et deux images une à gauche et une à droite qui se reproduisent.

Le lien :

http://www.hingtonklarsey.com/agence-buzz-hington-klarsey/


Lien pour les images :

http://www.hingtonklarsey.com/agence-buzz-hington-klarsey/gauche.gif

http://www.hingtonklarsey.com/agence-buzz-hington-klarsey/droite.gif

http://www.hingtonklarsey.com/agence-buzz-hington-klarsey/centre.gif

Encore merci ! Smiley lol
Modifié par maman poule (20 Oct 2007 - 11:42)
Bonjour,

Les pages du site utilisent, sembe-t-il, le Doctype suivant:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Ce Doctype incomplet (sans URL de la DTD) fera passer les navigateurs en mode Quirks, c'est à dire que chaque navigateur fera ça à sa sauce.

Un peu de lecture:
http://css.alsacreations.com/Bases-et-indispensables/DTD-comment-choisir

De plus, je ne peux que déconseiller l'usage d'une frame pour cette page. C'est techniquement inutile, et ça a les désavantages que l'on sait.

Enfin, on pourra souligner le fait que la page est absolument vide de contenu. Les images utilisées sont à priori uniquement des éléments décoratifs, vu qu'on n'a même pas pris la peine de leur attribuer un texte alternatif. Smiley decu
Sinon, une remarque rapide: plutôt que de découper cette courbe en trois images, on pourrait la garder en une seule image et la placer comme image de fond de la page. Ça simplifierait beaucoup les choses.
Yo florent, merci pour ces remarques, cela dit, je souhaite que la courbe soit centrée horizontalement ET verticalement, crois-tu que ce soit possible d'avoir le même rendu avec une image en background ?

Par ailleurs, les textes seront inclus dans le même <div> que la courbe image centre afin qu'ils suivent exactement le centrage de l'image. Suis-je assez clair ? N'hésitez pas à me demander plus de précisions sinon.

A très vite ! Smiley ravi et merci pour tous ces suivis.
Tu peux faire quelque chose comme ceci (les images sont liées à la fin de ce post):

<!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"
	xml:lang="fr" lang="fr">



<head>

	<meta http-equiv="content-type" content="text/html; charset=utf-8" />

	<title>Mon titre</title>
	
	<style media="screen" type="text/css">
	
	* {margin:0; padding:0; border:none;}
	body {background:#000;}
	p {text-align:center; height:76px; background:url('fond.png') no-repeat 50%; position:absolute; width:100%; top:50%; margin-top:-38px;}
	
	</style>
	
</head>



<body>



<p>
	<img src="courbe.png" alt="" />
</p>



</body>

</html>


Les images:

• La courbe: upload/8252-courbe.png
• Le fond: upload/8252-fond.png


Bonne continuation! Smiley cligne
Modifié par Benjamin D.C. (20 Oct 2007 - 14:10)
maman poule a écrit :
Yo florent, merci pour ces remarques, cela dit, je souhaite que la courbe soit centrée horizontalement ET verticalement, crois-tu que ce soit possible d'avoir le même rendu avec une image en background ?

Oui, avec un background sur body. Smiley smile

maman poule a écrit :
Par ailleurs, les textes seront inclus dans le même <div> que la courbe image centre afin qu'ils suivent exactement le centrage de l'image.

Ben tu t'occupes dans un second temps du centrage vertical de tes éléments (un conteneur div#global de hauteur fixe en pixels, centré dans une cellule de tableau en height: 100%, par exemple). Si ça bouge d'un pixel par rapport au fond, ça ne sera pas bien grave.

Benjamin: pas super convaincu par ta solution. On risque d'avoir des décalages de 1px en hauteur à cause du calcul du positionnement de l'image centrale.
Et puis le alt="Courbe", franchement... Je pense que tu en connais assez pour savoir que cette information «Courbe» n'est pas pertinente (c'est à dire: on s'en fout royalement, c'est de la déco, et même si la déco ça peut être significatif on ne peut pas la transcrire par ce mot «Courbe», qui sera juste parasite dans le contenu du document). Si on utilise une image HTML, un alt="" sera plus adapté. Smiley cligne
Modifié par Florent V. (20 Oct 2007 - 14:10)
Arf oui, je n'ai pas fait attention, c'est mon éditeur (TextMate) qui indique automatiquement dans le alt le nom de l'image sans son extension et prenant la peine de transformer la 1e lettre en majuscule. Mais voilà, c'est modifié.

Sinon pour le décalage dont tu parles, je peux effectivement l'imaginer (et encore, ils font ça très bien, nos copains butineurs) en ce qui concerne le centrage horizontal, mais pas vertical.
Salut, ça marche avec la solution de benjamin, merci pour l'aide c'est très cool, comme toujours ici. C'est beau Smiley bawling

Bravo les cocos Smiley lol
Sujet clos
Aller à