28172 sujets

CSS et mise en forme, CSS3

Aide pour montage maquette

Bonjour à tous !

pensez-vous qu'il est possible de monter en css une page qui reprend le design ci-dessous ?? upload/15768-montageacu.jpg

si oui avez-vous quelques pistes?

merci de votre aide !
Un div pour le header, 3 div pour les 3 colonnes, et un autre div pour le footer.

Tu leur met une largeur fixe et tout ce qu'il faut, tu met tes images de fond et c'est bon.
merci !

ok pour les conseils, mais pour les images de fond, je sais pas trop parce que les carrés (à gauche et à droite, pas au centre) doivent pouvoir s'agrandir suivant le texte présent dedans... c'est quand même possible tu penses?
Sans le moindre morceau de code, difficile de savoir d'où le problème peut venir. Le mieux serait que tu nous donnes un lien vers le problème en question.

En essayant de jouer aux devinettes, je dirais que tu as un élément dont le padding ou le margin par défaut diffère sous IE et Firefox et que cette marge interne ou externe fait apparaître le bloc plus grand.
oups désolé, même pas pensé à mettre le code ! Smiley smile

pour le css du div qui contient les images :

#container #menu-left {
	width: 235px;
	float: left;
	background-image: url(../images/gifs/encart_gauche/1px_large.gif);
	background-repeat: repeat-y;


le div lui-même (les images sont pour séparer les menus affichés dans ce div, si vous avez une solution plus jolie niveau code, n'hésitez pas !) :

<div id="menu-left"><img src="../images/gifs/encart_gauche/bannierehaut.gif" width="235" height="45" hspace="0" vspace="0" border="0" align="middle"/>
    <p align="left" class="type1"><a href="../clients.php" class="type1">Nos Clients</a><img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
  <p align="left"><a href="../nos-conseils.php" class="type1">Nos Conseils</a><br />
        <img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
    <p align="left"><a href="../nos-engagements.php" class="type1">Nos Engagements</a><img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
    <p align="left"><a href="#" class="type1">Nous Contacter</a><img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
    <p align="left" class="type1"><a href="../votre-avis.php" class="type1">Votre avis nous int&eacute;resse</a><img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
    <p align="left"><a href="../travailler-en-suisse.php" class="type1">Travailler en Suisse</a><img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
    <p><img src="../images/gifs/encart_gauche/espace_clients.gif" width="203" height="33" /></p>
    <p align="left" class="type1"><a href="../qui-sommes-nous.php" class="type1">Qui sommes-nous ?</a><img src="../images/gifs/encart_gauche/barre.jpg" width="203" height="3" class="barre" /></p>
    <p align="left"><a href="../mandats-clients.php" class="type1">Confiez-nous vos Mandats</a><span class="type1"><img src="../images/gifs/encart_gauche/barre.jpg" alt="" width="203" height="3" class="barre" /></span></p>
    <p align="left"><a href="../nos-bureaux.php" class="type1">Nos Bureaux</a><span class="type1"><img src="../images/gifs/encart_gauche/barre.jpg" alt="" width="203" height="3" class="barre" /></span></p>
    <p align="left"><a href="../nos-prestations.php" class="type1">Nos Prestations</a><span class="type1"><img src="../images/gifs/encart_gauche/barre.jpg" alt="" width="203" height="3" class="barre" /></span></p>
    <p align="left"><a href="../notre-ethique.php" class="type1">Notre Ethique</a><span class="type1"><img src="../images/gifs/encart_gauche/barre.jpg" alt="" width="203" height="3" class="barre" /></span></p>
    <p align="left"><a href="../clients-votre-avis.php" class="type1">Votre Avis nous int&eacute;resse</a><span class="type1"><img src="../images/gifs/encart_gauche/barre.jpg" alt="" width="203" height="3" class="barre" /></span></p>
    <img src="../images/gifs/encart_gauche/banniere_bas.gif" width="235" height="34" align="bottom"/>  </div>
On ne risque pas d'aller très loin avec ça. On n'a aucune image, et on ne sait pas dans ton code à quoi correspondent les images dans ta maquette, donc impossible de t'aider.

Comme je te l'ai dit, un lien serait le mieux.
je peux pas vraiment mettre un lien...

je vais essayer d'expliquer le truc sans.

merci de ton aide en tout cas !
Bonjour toutes et tous
moi j'utilises ça comme cela,
http://www.fox-infographie.com/bord_rond.htm



<!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='en' lang='en'>
<body>
<style>

BODY {
background-color : #557bac; 
font-family : Verdana, Myranda,Arial, Helvetica, sans-serif; 
font-size : 100%; color : #ffffff; 
text-align:center;
}
a.xx { font-family : Verdana, Myranda,Arial, Helvetica, sans-serif;   font-size: 1.4em; color: #ffffff; text-decoration: none;}
a.xx:link { } 
a.xx:hover {color : #ff9999; }


.bordRond { width : 90%; }
.TD_bordRond span.CoinHaut, .TD_bordRond span.CoinBas { margin : 0 -10px; }
.TD_bordRond { background-color : #456b99; padding : 0 10px; } 
span.CoinHaut, span.CoinBas, span.CoinHaut span, span.CoinBas span {
 font-size : 0.01em; line-height : 1px; display : block; height : 5px; background-repeat : no-repeat; } 
span.CoinHaut {background-image : none;background-position : 0 0;margin : 0 -5px;} 
span.CoinHaut span { background-image : none; background-position : 100% 0; } 
span.CoinBas {background-image : none; background-position : 0 100%; margin : 0 -5px; clear : both; } 
span.CoinBas span { background-image : none; background-position :100% 100%;}



span.CoinHaut { background-image : url("zzz/coin_gauche.gif"); } 
span.CoinHaut span { background-image : url("zzz/coin_droite.gif"); } 
span.CoinBas { background-image : url("zzz/coin_gauche.gif"); } 
span.CoinBas span { background-image : url("zzz/coin_droite.gif"); } 

</style>

<br /><br /><br />



<table class="bordRond"><tr><td class='TD_bordRond'>
<span class="CoinHaut"><span></span></span>


XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX<br />


<span class='CoinBas'><span></span></span>
</td></tr></table>

</body></html>
Sujet clos
Aller à