Se connecter / S'enregistrer
Votre question

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

Tags :
  • photo
  • Programmation
Dernière réponse : dans Programmation
28 Mai 2007 22:17:30

: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

a c 232 L Programmation
a b w Photo
29 Mai 2007 11:32:20

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.
29 Mai 2007 12:38:06

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
Contenus similaires
a c 232 L Programmation
a b w Photo
29 Mai 2007 12:45:57

en fait je vois pas trop...
Tu pourrais mettre un peu plus de code concret ? :) 
29 Mai 2007 13:04:13

  1. <body>
  2. <div id="firefoxperso"><a href="http://firefox.fr/" title="Get Firefox - The Browser, Reloaded."><img class="firefoxoffi" src="http://www.firefox.fr/boutons/firefox_80x15.png" alt="Get Firefox" />ce site est optimisé pour firefox<img class="firefoxoffi" src="http://www.firefox.fr/boutons/firefox_80x15.png" 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 ^^)
a c 232 L Programmation
a b w Photo
29 Mai 2007 13:42:11

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
29 Mai 2007 16:35:56

ok bah merci pour cet aide, j'vais essayer de me débrouiller avec tout ca ;) 
++
a c 232 L Programmation
a b w Photo
29 Mai 2007 16:46:01

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
30 Mai 2007 01:25:31

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 !
a c 232 L Programmation
a b w Photo
30 Mai 2007 07:15:00

Comme tu veux, bah bon courage alors :) 
30 Mai 2007 11:22:34

merci mais les tableaux c'est "easy" lol
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS