28172 sujets

CSS et mise en forme, CSS3

Bonjour, je suis en train de faire un design qu'on ma demander mais j'ai deux petits problèmes :s .

1er problème.

Comme vous pouvez le voir sur l'image il y a un décalage.
http://img705.imageshack.us/img705/9781/probs.jpg

Je souhaiterai que le texte qui est à moitié en dehors soit dans le cadre arrondis du haut.
J'y arrive mais le problème c'est que après le haut ne touche pu au bas après.
Auriez vous une idée de comment résoudre le problème ?

body
{
width: 100%;
margin: 0 auto;/*pour ne pas avoir de marges par défaut en haut et en bas*/
background-image: url("../images/motif_fond.png");
background-repeat: repeat;
}

#en_tete
{ 
background-image: url("../style/noel/bordure.png");
background-repeat: repeat:x;   
}

#bordure
{
height: 200px;
background-image: url("../style/noel/headerradiogamer.png");
background-repeat: no-repeat;
}

#menu
{  
height: 30px;
background-image: url("../style/noel/menu.png"); 
margin-bottom: 10px;
}

#menu p{
margin-top: 0; 
}

#sous_menu a:hover
{
background-image:url("../style/noel/survol.png"); 
color:#bababa; 
}

#sous_menu a
{
display: block;
float: left;
height: 32px;
line-height: 32px;
padding: 0 5px;
color: #595959;
text-decoration: none; /* Les liens ne seront plus soulignés */
}


#sous_menu
{
font-family:tahoma;
}

.sous_menu
{
color:#595959;
}

#lecteur
{
padding-top: 9%;
height: 300px;
background-image:url("../style/noel/lecteur.png"); 
background-repeat: no-repeat;
margin-left: 10%;
width: 700px;
}

#auto
{
text-align: center;
}

#manuel
{
text-align: center;
margin-top: 4%;
}

#cadre1
{
width: 200px;
background-repeat: no-repeat; 
padding-top: 1%;
text-decoration: none; /* Les liens ne seront plus soulignés */
padding-left:2%;
float: left
}

#hautpartenaire
{
background-image:url("../style/noel/hautpartenaire.png"); 
background-repeat: no-repeat;
width: 200px;
height: 50px;
}

#partenaire
{
background-image:url("../style/noel/partenaire.png"); 
background-repeat: repeat-y;
width: 200px;
padding-left: 5%;
}

#baspartenaire
{
background-image:url("../style/noel/baspartenaire.png"); 
background-repeat: no-repeat;
width: 200px;
height: 50px;
}

#hautcorps
{
background-image:url("../style/noel/titre.png"); 
background-repeat: no-repeat;
width: 580px;
height: 80px;
margin-left: 17%;
text-align: center;
padding-top: 5px;
margin-bottom:0px;
color: #A0A0A0;
}

#corps
{
padding-left: 1%; 
width: 580px;
background-image:url("../style/noel/corps.png"); 
background-repeat: repeat-y;
margin-left: 17%;
margin-top:0px;
margin-bottom:0px;
color: #A0A0A0;
}

#bascorps
{
margin-top:0px;
background-image:url("../style/noel/bascorps.png"); 
background-repeat: no-repeat;
width: 580px;
height: 80px;
margin-left: 17%;
color: #A0A0A0;
}

/**********************************************************************************/
a
{
   color: black;
   text-decoration: none; /* Les liens ne seront plus soulignés */
   
}
/**********************************************************************************/


2e problème
Quand je prend une résolution plus petite que la mienne le corps passe en dessous du cadres partenaire.
Comment je peut faire pour résoudre ce problème ?

Merci de vos réponse bonne journée Smiley smile .
Bonjour,

height + padding-top et ou bottom , s'ajoutent .

Si tu n'as qu'une ligne de texte a repositionner , alors fait usage de line-height sans padding , un text-indent peut aussi etre utile pour degager a gauche .

Pour le deuxieme probleme , il faut imposer une largeur fixe ou minimale .(pour IE6 voir vers width:expression(); )

Sans la structure html ou un exemple en ligne , difficile de faire autre chose que des suppositions Smiley smile .

GC
Bonjour, le premier problème est résolu.
Pour le deuxième comment je peut imposer une largeur fixe ?
margin-left ?
Il te faut imposer une largeur fixe ou minimal au conteneur parent des éléments que tu souhaite garder cote a cote .

A priori selon ta feuille de style , le conteneur parent serait body .

GC