28173 sujets

CSS et mise en forme, CSS3

Question et mise en place de bordures ...

J'ai un probleme avec la mise en page de mon bloc principal
Celui est centré horizontalement
Voilà les bordure que comprendra mon bloc principal
http://img334.imageshack.us/img334/2889/aide6hu.jpg
Il y a la parti extérieur qui a un dégradé bleu --> noir vers l'intérieur (il sont encadré en rouge
Puis il il y a un espace blanc de 1px ensuite une grosse bar de 2px qui entoure le contenu, autrement dis je cherche a réaliser la mise en forme du bloque principal
Comment puis-je faire avec les css?
J'ai déjà fait çà:

body 	{
	background-color:#28353D;
		}

#main	{
	background-color:#FFFFFF;
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 735px;
	border: 2px solid; /* trait gris */
	border-color: #B8B8B8;
		}	 
	

<body>
<div id="main"></div>
</body>


_il me reste a metrre le dégradé de chaque coté et metre les angle du degradé --> tout cela est coté extérieur de la div
_puis mettre la marge blanche ( a l'intérieur de la div) entre le dégradé et la trait gris

Pourriez-vous m'aidez ?
Modifié par analfabete (11 Feb 2006 - 22:50)
Je vois bien une solution assez simple :
Puisque la page aura une largeur fixe (750px environ), on peut se permettre de créer un bloc avec une image de fond qui reprend la bordure de gauche et celle de droite (degradés, espace blanc et bordure grises inclus). Reste le problème de la bordure du haut et de celle du bas.

Si la div#page contient un en-tête (genre une zone de titres) et un pied de page (liens, infos, mentions légales...), on casera les dégradés et espaces blancs et bordures (pfiou...) correspondants dans les images de fond de chacun de ces éléments.

Enfin, pour que le contenu (texte ou autre) des blocs ne vienne pas se ficher dans les espaces qui, graphiquement, seront des bordures, on pourra utiliser deux choses :
- soit des paddings dans les éléments parents (en-tête, bloc principal, pied de page...), en faisant attention à être en modèle de boîte standard (le document HTML aura une déclaration de type de document bien comme il faut) et en pensant que si mon bloc a une largeur fixe de 730px et des paddings de 20px sur les côtés, la largeur totale du bloc (largeur utile + retraits) sera de 20px + 730px + 20px, soit 770px.
- soit des marges (margin) pour les éléments enfants. Ce qui demandera de redoubler chaque conteneur (div#page, en-tête, pied de page) par un élément enfant, probablement une div, qui aura les marges nécessaires pour créer les retraits voulus.

Voilà, c'est mon idée.

Note : les bordures en dégradés ne sont pas possibles en CSS, il faut forcément des images. De plus, la "triple" bordure demandée aurait nécessité au moins deux blocs imbriqués : un premier avec le dégradé, et à l'intérieur un bloc avec la bordure grise (tout en ménageant le retrait qui va bien entre les deux).
Le problème c'est que les dégradé ont tous une direction vers l'itérieur du bloc
Du bleur vers le noir :
bas: http://img101.imageshack.us/img101/5906/dregadebottom4tb.png
gauche: http://img101.imageshack.us/img101/3465/dregadeleft9cl.png
droite: http://img101.imageshack.us/img101/7927/dregaderight7ez.png
haut: http://img101.imageshack.us/img101/8776/dregadetop5uf.png
Donc pour faire un background cela ne va pas etre possible, deplus pour chaque angle il me faut une image de degradé spécifique:
http://img152.imageshack.us/img152/1255/angle0mn.png

Je ne comprend pas trop ce que tu m'as dit mpop, il me faut deux bloc sa j'ai comprit, un avec les dégradé un un autre avec le coutour blanc et la bordure grise?
Je viens de penser a quelque chose:
je crée un bloc parent avec un backgroud horizontal qui aura la largeur du bloc et qui aura dégradé trai bland et bordure girse puis en haut je mais une image avec le dégradé et pareil en bas ? Sa fais un peux lourd Smiley biggol , il doit bien avoir une solution avec les css plus propre Smiley rolleyes
Modifié par analfabete (12 Feb 2006 - 14:13)
Re bonjour tout le monde! Smiley cligne
J'avance tout doucement voila ce que j'ai fait:
j'ai crée un background horizontale de 1px que j'ai mit dans mon bloque 'main"
je cherche maintenant a mettre une marge entre le bloc parent et les bloques enfants de façcon que les blocs enfants ne vienne pas dans le dégradé... comment pourrais-je faire car j'ai mit sa:
#main	{
	background-image:url(../img/design/bg_main.png);
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 759px;
	padding-left: 19px;	
		}

mais le problème c'est que a droite cela crée la suite du background si vous voulez voir c'est ici http://analfabete.free.fr
Me reste a mettre le dégradé de l'entete avec les coutour gris puis ceux du pied. J'espère que les deux image ne vont pas etre trop lourde Smiley sweatdrop
car pour l'instant le background pèse 287 octect Smiley lol
Modifié par analfabete (12 Feb 2006 - 16:40)
j'ai un problème avec les padding je veux que le texte et les futurs blocs enfants soit a 17px des bordures du bloc parent appeler "main" que ce soit a gauche ou droite
Sinon pour les dégradé du haut et du bas je vais inséré deux image dans la div main une en top et une en bottom qu'en penses tu?
#main	{
	background-image: url(../img/design/bg_main.png);
	background-repeat: repeat-y ;
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 759px;
	padding: 17px 17px ;
		}


http://analfabete.free.fr
Modifié par analfabete (12 Feb 2006 - 21:00)
analfabete a écrit :
j'ai un problème avec les padding je veux que le texte et les futurs blocs enfants soit a 17px des bordures du bloc parent appeler "main" que ce soit a gauche ou droite
Sinon pour les dégradé du haut et du bas je vais inséré deux image dans la div main une en top et une en bottom qu'en penses tu?
#main	{
	background-image: url(../img/design/bg_main.png);
	background-repeat: repeat-y ;
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 759px;
	padding: 17px 17px ;
		}


http://analfabete.free.fr


Avec le code que tu as utilisé, ta page aura un padding-left de 17px, un padding-right de 17px également, mais aussi un padding-top et un padding-bottom de 17px. Si c'est l'effet voulu, tout va bien. D'ailleurs, ça peut aussi s'écrire :
padding: 17px;

La notation avec deux valeurs servant à différencier les valeurs latérales des valeurs verticales.

Utiliser des images en haut et en bas (balise <img /> donc...) n'est pas une mauvaise idée. Mais comme une page a généralement une zone de titres en haut, et/ou un pied de page en bas, tu as peut-être la possibilité de faire autrement.
Mais sinon, pas de problème, sauf que... ça ne passera pas à cause de ton padding de 17px. Tes images, même en display: block;, ne pourront pas se coller aux bords de ta div de page (div#main) à cause de cela.

À la rigueur, ça pourra se corriger de la manière suivante :
img#haut {
	display: block;
	position: relative;
	top: -17px; left: -17px;
}
img#bas {
	display: block;
	position: relative;
	bottom: -17px; left: -17px;
}

Ce qui demandera peut-être aussi de mettre la div#main en overflow: hidden; pour éviter que les images, juste avant leur correction de position (à cause du position: relative) ne viennent agrandir ta div#main.

Bref, gérer les espaces directement comme paddings de ta div#main, à mon avis c'est un peu casse-gueule (mais pas impossible).

Si tu n'as que quelques blocs dans ta div#main (un pour les titres, un pour le menu de navigation, un pour le pied de page, et un pour le contenu principal, par exemple), tu peux garder la technique que je done, à base de marges (et si besoin de paddings) pour les éléments enfants plutôt que pour la div parente.
Bonjour sa fait longtemps car j'étais absent !
J'ai un nouveau problème, voilà avant tout mon code:
body 	{
	background-color: #28353D;
	margin-top: 65px;
		}

#global	{
	background-image: url(../img/design/bg_main.png);
	background-repeat: repeat-y;
	margin-left: auto; /* pour que #main soit centrer */
	margin-right: auto;
	width: 759px;
		}

#main	{
	margin: 0px 18px 0px 18px ;
		}


Et la page ICI
Divers problèmes apparaisse:_ il y a une répétition du background horizontale en bas de la page qui n'apparait pas dans dreamweaver
_la marge en haut n'est pas respecté, il y a un espace entre le header et le texte trop important par rapport au bas qui me convient

Voilà Smiley cligne
Sujet clos
Aller à