salut à tous,
J'aurais aimé avoir quelques explications ou conseils concernant le developpement d'une partie spécifique de mon site. Le contexte de mon problème est que je cherche à obtenir un design quasiment identique pour un ensemble de valeur de police variable allant du 12 au 34(taille firefox) afin que mon site soit lisible et adaptable suivant la config de police du navigateur.
Ainsi mon code avec une police de 12 (taille firefox) est exactement ce que je recherche et j'obtiens le design voulu. Mais dès lors que j'augmente la taille de la police (firefox) j'ai 2 comportement bizarre dont j'ai du mal à trouver explications.
1/ lorsque la police grossi, mon DIV resumeActu grandi automatiquement car j'ai mis une valeur min-height. Ok mais le problème c'est que après lorsque je réduit la taille de la police le DIV lui ne reduit pas width.
2/ en police 12 (taille firefox) mon image ainsi que mon paragraphe tagResumeActu sont bien centré mais dès lors que j'agrandi la police ce centrage n'est pas valable et reste au top au milieu d'être en middle.
Ainsi je ne comprends surement pas certainement chose basique peut-être mais l'aspect variable de mon design doit y joué quand même car pour une taille de police spécifique j'ai réussi à obtenir ce que je désirais.
Voici mon code :
HTML
CSS
En vous remerciant pour votre éclairage précieux
J'aurais aimé avoir quelques explications ou conseils concernant le developpement d'une partie spécifique de mon site. Le contexte de mon problème est que je cherche à obtenir un design quasiment identique pour un ensemble de valeur de police variable allant du 12 au 34(taille firefox) afin que mon site soit lisible et adaptable suivant la config de police du navigateur.
Ainsi mon code avec une police de 12 (taille firefox) est exactement ce que je recherche et j'obtiens le design voulu. Mais dès lors que j'augmente la taille de la police (firefox) j'ai 2 comportement bizarre dont j'ai du mal à trouver explications.
1/ lorsque la police grossi, mon DIV resumeActu grandi automatiquement car j'ai mis une valeur min-height. Ok mais le problème c'est que après lorsque je réduit la taille de la police le DIV lui ne reduit pas width.
2/ en police 12 (taille firefox) mon image ainsi que mon paragraphe tagResumeActu sont bien centré mais dès lors que j'agrandi la police ce centrage n'est pas valable et reste au top au milieu d'être en middle.
Ainsi je ne comprends surement pas certainement chose basique peut-être mais l'aspect variable de mon design doit y joué quand même car pour une taille de police spécifique j'ai réussi à obtenir ce que je désirais.
Voici mon code :
HTML
<body id="body_actu">
<h2 id="titre_actualite">Actualités tournant autour de l'actualité</h2>
<div class="resumeActu" data-resumeid="10">
<div class="mainResumeActu">
<span class="titreResumeActu">Ceci est le titre de l'actualite</span><span class="dateResumeActu">le 25 / 10 / 2013</span>
<p class="texteResumeActu">le premier ministre à declaré vouloir augmenté son salaire de 200% pour le bien des francais</p>
</div>
<div class="logoResumeActu">
<img src="resources/communityLogo75x75.png" alt="actu communauté">
</div>
<p class="tagResumeActu">Actu<br>Communauté</p>
</div>
</body>CSS
.resumeActu
{
min-width: 930px;
max-width: 990px;
min-height: 77px;
margin: 15px 15px 15px 120px;
background-color: black;
}
.mainResumeActu
{
width: 700px;
min-width: 77px;
background-color: #000000;
display: inline-block;
vertical-align: top;
}
.titreResumeActu
{
display: inline-block;
width: 550px;
margin: 0px;
padding: 2px;
vertical-align: top;
color: #ff0000;
font-family:sans-serif;
background-color: #000000;
}
.dateResumeActu
{
display: inline-block;
width: 142px;
min-height: 20px;
margin: 0px;
padding: 2px;
font-size: 1em;
vertical-align: top;
text-align: right;
color: #ffffff;
background-color: #000000;
}
.texteResumeActu
{
display: inline-block;
padding: 7px;
margin: 0px;
width: 686px;
min-height: 38px;
vertical-align: top;
color: #ffffff;
background-color: #000000;
}
.logoResumeActu
{
display: inline-block;
width: 75px;
height: 75px;
margin: auto auto;
vertical-align: middle;
}
.tagResumeActu
{
display: inline-block;
margin: 0px 0px 0px 10px;
vertical-align: middle;
background-color: #000000;
font-size: 1.1em;
text-align: center;
min-width: 120px;
color: blue;
}En vous remerciant pour votre éclairage précieux