Se connecter avec
S'enregistrer | Connectez-vous

[demi-résolu][CSS]Problème de (max-)width et de border ...

Dernière réponse : dans Programmation

:hello:  Hello ! :hello: 

Bon je vais essayer d'être simple :
(je vous ai mis le code en dessous)
j'ai une photo qui se cale à droite avec le texte à gauche ...

1° prob : le <div id="valign"> ne centre pas la photo sur la hauteur

2° prob : le <p id="entete"> possède une bordure ... mais celle ci ne se stop pas "à la fin" du texte ... elle continu jusqu'au bord qui est complètement à droite du document ... la bordure passe sur la photo si vous préfrez ... j'ai pourtant essayé width et max-width ...


<div id="valign">
<img id="photo" ...etc... />
<p id="entete"> bloc 1 </p>
</div>

******************************
#valign{
vertical-align:middle}

#photo{
float:right;
border:3px solid black;
border-radius:15px;
-moz-border-radius:15px;
padding:10px;}

#entete{
position:relative;
width:auto;
border:3px solid black;
border-radius:15px;
-moz-border-radius:15px;
padding:10px;}

*****************************

help me !!! ca fait 2 jours que je passe là dessus :( 

Autres pages sur : demi resolu css probleme max width border

Lassé par la pub ? Créez un compte
Expert Programmation

Salut,

1) Tu n'as pas mis de valeur pour l'attribut vertical-align, c'est normal ?

2) Si ta bordure prend tout, c'est parce que tu es dans un paragraphe (p), essaie de mettre un span à la place.

Déjà merci de m'avoir répondu ;) 

1) c'était un oublie dans le poste mais dans mon code j'ai bien mis vertical-align:middle ;)  (1°post édité)

2)j'ai essayé les 2 solutions suivante, la résolution de mon problème avance :)  mais maintenant c'est trop lol l'encadrement se fais sur toutes les lignes de mon entête...j'explique juste après...

j'ai donc essayé ces 2 solutions :
<div id="valign">
<img id="photo" ...etc... />
<span id="entete"> bloc 1 </span>
</div>
***********************
<p id="valign">
<img id="photo" ...etc... />
<span id="entete"> bloc 1 </span>
</p>

mon bloc 1 est en fait de ce style :
Nom Prénom
Adresse
Numéro de tél
***********
en code j'ai donc fais :
...>nom prénom<br />adresse<br />numéro de tél<...

et avec ces 2 codes le résultat est le même : l'encadrement se fait ligne par ligne : j'ai un encadrement par ligne :( 
alors que je voudrais un seul encadrement : autour du "bloc" entete 

  1. <body>
    

  2. 		<div id="firefoxperso"><a href="<a href="http://firefox.fr/" target="_blank">http://firefox.fr/</a>" title="Get Firefox - The Browser, Reloaded."><img class="firefoxoffi" src="<a href="http://www.firefox.fr/boutons/firefox_80x15.png" target="_blank">http://www.firefox.fr/boutons/firefox_80x15.png</a>" alt="Get Firefox" />ce site est optimisé pour firefox<img class="firefoxoffi" src="<a href="http://www.firefox.fr/boutons/firefox_80x15.png" target="_blank">http://www.firefox.fr/boutons/firefox_80x15.png</a>" alt="Get Firefox" /></a></div>
    

  3. <p id="valign">
    

  4. 		<img id="photo" src="img/photo_id.jpg" alt="photo d'identitée" />
    

  5. 		<span id="entete">
    

  6. 			<b>Garros Roland</b><br />
    

  7. 			<br />
    

  8. 			69 rue du paradis<br />
    

  9. 			59000 CH'TI MI<br />
    

  10. 			<br />
    

  11. 			e-mail : <a href="mailto:roland.garros@gmail.com">roland.garros@gmail.com</a><br />
    

  12. 			Portable : 06.12.34.56.78<br />
    

  13. 			Né le : 30/02/85 dans un hopital<br />
    

  14. 			Célibataire<br />
    

  15. 			Permis B obtenu le 10/03/04, A en cours</span>
    

  16. </p>
    

  17. 	<H1>Technicien supérieur en GEII</H1>
    

  18. ...etc.


ca donne ca :

(bien entendu j'ai retiré mes informations personnelles ^^)
Expert Programmation

Ouais, j'oubliais. Tu ne dois pas pouvoir sauter de lignes dans un span...

Alors, une solution serait de repasser avec un paragraphe, mais de mettre une margin-left égale à la largeur de ton image. Ca devrait régler le soucis
Expert Programmation

j'avais pas beaucoup de temps pour expliquer.
Mais en clair ça donnerait :
<div id="valign">
<img />
<p id="entete">(...)</p>
</div>

et pour le CSS :
#entete {
position:relative;
width:auto;
border:3px solid black;
border-radius:15px;
-moz-border-radius:15px;
padding:10px
margin-right:100px; /* ou 100px = la largeur de ton image */
}


Désolé dans mon précédent message, je t'ai dit margin-left, mais c'est margin-right

pas de problème t'inquiètes pas j'avais tout compris :D 
mais au final j'vais simplement faire avec un table lol pas taper ^^
nan mais ce cv va me servir pour postuler en temps que webmaster donc je veux un code parfait et je voulais éviter un table pour du texte+image ...
mais en fait ca se défend car dans ce cas j'utilise l'entête + l'image avec une présentation comme un tableau puisque je ne veux pas que ca soit mélangé au texte dessous + un table me permettra de gérer facilement le positionnement à gauche de l'entete et le positionnement à droite + le centrage en hauteur de la photo ;) 

merci quand même car ca m'a permis de savoir exactement la différence d'utilisation entre div et span !
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde