28172 sujets

CSS et mise en forme, CSS3

Précisions bannière en 3 parties

Bonjour,

J'essaye de mettre en place la bannière principale pour mon site.

J'étais partis sur l'idée de la faire avec 3 div :
un premier div de taille fixe (1000px) centré et les deux autres avec un background-repeat occupant la place restante à gauche et à droite.

Je n'arrive pas à faire ça, j'ai donc fais une recherche et je suis tombé sur la solution de n'utiliser qu'une seule image centrée et repeat :
http://forum.alsacreations.com/topic.php?fid=4&tid=54169

Cependant j'ai peur que pour de hautes résolutions le logo réapparaisse à moitié (puisque toute l'image est en repeat)
Ya t-il un moyen de régler ça ? ou alors quelque chose d'autre m'a échappé ?

merci
codename44 a écrit :
un premier div de taille fixe (1000px) centré et les deux autres avec un background-repeat occupant la place restante à gauche et à droite.

C'est le genre de configuration qui n'est pas trop possible en CSS (on n'a pas vraiment d'outils pour, en dehors peut-être de Flex Box en CSS3). La bonne nouvelle c'est que, le plus souvent, ce type de configuration n'est pas nécessaire. On s'en sort en général très bien avec un une image de fond sur un conteneur global (HTML, BODY ou un DIV créé pour l'occasion), et dedans un unique DIV centré grâce à la technique des marges automatiques.

codename44 a écrit :
Ya t-il un moyen de régler ça ? ou alors quelque chose d'autre m'a échappé ?

Quel est le design au juste? Si on savait précisément ce que tu veux faire (plutôt que le mécanisme que tu as envisagé pour y arriver), on pourrait te dire si c'est jouable avec la technique classique ou s'il faut ruser un peu.
Bonsoir à toutes et à tous,

je n'ai peut-être pas tout compris, mais je procéderai ainsi :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div#content {
			background-color	: skyblue;
}

div.boite1 {
			display				: inline-block;
			background-color	: lightyellow;
			width				: 17%;
			margin				: 1%;
			text-align			: center;
}

div.boite2 {
			display				: inline-block;
			background-color	: lightyellow;
			width				: 59%;
			margin				: 1%;
			text-align			: center;
}

div.boite3 {
			display				: inline-block;
			background-color	: lightyellow;
			width				: 17%;
			margin				: 1%;
			text-align			: center;
}
</style>

<!--[if IE]>
<style type="text/css">
div.boite1 {
			display				: inline;
			zoom				: 1;
}

div.boite2 {
			display				: inline;
			zoom				: 1;
}

div.boite3 {
			display				: inline;
			zoom				: 1;
}
</style>
<![endif]-->
</head>

<body>
<div id="content">
	<div class="boite1">bla bla bla</div>
	<div class="boite2">bla bla bla</div>
	<div class="boite3">bla bla bla</div>
</div>
</body>
</html>


Testé sur IE 8 (je suis encore sous XP), Google chrome, safari, Mozilla Firefox et opera.

Maintenant, à la place du 'BLA BLA BLA', tu peux mettre des images.

@+
Modifié par Artemus24 (05 Jun 2011 - 20:33)
Artemus24, les différents problèmes avec ta solution sont:
- Tu appliques un correctif de manière indiscriminée à toutes les versions d'Internet Explorer, dont les versions 8 et 9 (et futures versions 10, 11...), alors que seul IE7 en a besoin.
- Ton bloc central aura une largeur variable, en pourcentage de la largeur du viewport (zone de visualisation du navigateur). Or, codename44 voudrait une largeur fixe de 1000px.
- Tu auras des «blancs» entre tes différents blocs, ce qui ne permet pas de créer un effet graphique qui soit raccord.

Voici une piste de solution plus intéressante je pense:
http://forum.alsacreations.com/topic-4-55981-1.html#p381947
Sujet clos
Aller à