Tom's Guide > Forum > Programmation > [demi-résolu][CSS]Problème de (max-)width et de border ...

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

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

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Mot :    Pseudo :           
 

: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 :(


Message édité par gryphus71 le 29-05-2007 à 16:36:24
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
- 0 +

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.

Répondre à OmaR

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


Message édité par gryphus71 le 29-05-2007 à 12:43:05
Répondre à gryphus71
- 0 +

en fait je vois pas trop...
Tu pourrais mettre un peu plus de code concret ? :)

Répondre à OmaR

Code :
  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 :
http://img510.imageshack.us/img510/2958/cvpv1.th.jpg
(bien entendu j'ai retiré mes informations personnelles ^^)

Répondre à gryphus71
- 0 +

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

Répondre à OmaR

ok bah merci pour cet aide, j'vais essayer de me débrouiller avec tout ca ;)
++

Répondre à gryphus71
- 0 +

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

Répondre à OmaR

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 !

Répondre à gryphus71
- 0 +

Comme tu veux, bah bon courage alors :)

Répondre à OmaR

merci mais les tableaux c'est "easy" lol

Répondre à gryphus71
Tom's Guide > Forum > Programmation > [demi-résolu][CSS]Problème de (max-)width et de border ...
Aller à :

Il y a 2799 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens