18041 sujets

Questions générales et questions de débutants

[Résolu] Redimensionnement objet php

Bonjour!
Je suis sur la fin de la réalisation de mon calendrier de l'avent et j'ai un dernier petit détail à régler...
mon manque de pratique html/php/js me fait bloquer sur un truc
J'ai utilisé un redimensionnement js nommé superbg pour mon image de fond, rien à redire
http://www.alsacreations.com/astuce/lire/1216-arriere-plan-background-extensible.html
par contre je n'arrive pas à faire en sorte que ma class "date" se redimensionne selon la taille de l'écran et que mes objets sous code php rapetisse .... j'ai utilisé la largeur à 100%, rien n'y fait
de base mes images font 112px chacune (largeur et hauteur) je voudrais donc que cette taille diminue...

voici mon code
 <div class="date">
<div class="block1">
<?php
if (date("dm") == "1211")
{
    echo '<a href="#" data-featherlight="#mylightbox"><img src="elmts/jours/2.png"/></a>';
} else {
    echo '<img src="elmts/jours/2.png"/>';
}
?>  
 <?php
if (date("dm") == "0712")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/7.png"/></a>';
} else {
    echo '<img src="elmts/jours/7.png"/>';
}
?> 
 <?php
if (date("dm") == "2312")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/23.png"/></a>';
} else {
    echo '<img src="elmts/jours/23.png"/>';
}
?> 
  <?php
if (date("dm") == "1112")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/11.png"/></a>';
} else {
    echo '<img src="elmts/jours/11.png"/>';
}
?>     
 <?php
if (date("dm") == "1812")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/18.png"/></a>';
} else {
    echo '<img src="elmts/jours/18.png"/>';
}
?> 
   </div>


et mon css

img.superbg{ 
    position:fixed; 
    top:0; 
    left:0; 
	z-index:-1;
} 

.date{
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	position: absolute;
	bottom: 2%;
	text-align: center;
	max-width:100%;
height:auto;
}


est il donc possible de redimensionner ceci?
d'avance merci!
Modifié par Aurelie_VD (17 Nov 2015 - 11:40)
Hello,

je pense que le problème vient de " position: absolute; " sur tes éléments dates.
salut,
je pense surtout que l'article cité est un peu dépassé concernant l'aspect JS. Il était d'actualité lors de sa parution en raison des vieux navigateurs qui subsistaient encore ainsi que le manque de prise en charge de certaines fonctionnalités CSS3 (dont celle utilisée dans l'exemple de l'article, à savoir background-size: cover) mais je pense clairement qu'aujourd'hui tu peux utiliser la solution full-css qui consiste donc simplement à mettre un arrière plan sur tes éléments et d'utiliser la propriété adéquate :

.tes_elements {background-size: cover}

Ainsi, tu éviteras de faire de la mise en page avec du JS qui revient toujours à une sorte de rustine.
Re-bonjour!
bon ok j'ai changé un peu tout ça en utilisant 
background-size: cover;

mais le redimensionnement de mes dates me posent toujours problème
le block date doit être centrée et se redimensionner comme le body et donc les dates doivent changer de taille. Je pense avoir oublié une propriété dans mon code css, car au lieu de se redimensionner, les chiffres se chevauchent et gardent la même taille.
je voudrais arriver à un résultat comme ceci
upload/60373-avent.png

voici mon html
<div class="date">
<p>
<?php
if (date("dm") == "1211")
{
    echo '<a href="#" data-featherlight="#mylightbox"><img src="elmts/jours/2.png"/></a>';
} else {
    echo '<img src="elmts/jours/2.png"/>';
}
?>
</p>
<p>  
 <?php
if (date("dm") == "0712")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/7.png"/></a>';
} else {
    echo '<img src="elmts/jours/7.png"/>';
}
?> 
</p>
<p>
 <?php
if (date("dm") == "2312")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/23.png"/></a>';
} else {
    echo '<img src="elmts/jours/23.png"/>';
}
?>
</p>
<p> 
  <?php
if (date("dm") == "1112")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/11.png"/></a>';
} else {
    echo '<img src="elmts/jours/11.png"/>';
}
?> 
</p>
<p>    
 <?php
if (date("dm") == "1812")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/18.png"/></a>';
} else {
    echo '<img src="elmts/jours/18.png"/>';
}
?> 
</p>
</div>

je n'ai mis qu'une des 5 lignes car de toute manière la propriété sera la même...

et mon css


body { 
  margin:0;
  padding:0;
  background: url(elmts/back.jpg) no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

.date{
	text-align:center;
	width:50%;
	height:auto;
	
	}
.date p {
		display: inline-block;
		width:10%;
		height:auto;}
Salut, je comprend pas trop, tu veux redimensionner tes images ? mais faut pas leur mettre une taille aux images ? en %

exemple ici
Modifié par JENCAL (17 Nov 2015 - 10:08)
re-bonjour
je suis parti du principe que l'on ne pouvait pas donné une taille à des images appelées en .php, mais en mettant la propriété suivante et en adaptant le code ça à l'air d'aller mieux
<?php
if (date("dm") == "1812")
{
    echo '<a href="elmts/Penguins.jpg" data-featherlight="image"><img src="elmts/jours/18.png"/></a>';
} else {
    echo '<img src="elmts/jours/18.png" width="100%"/>';
}
?>


j'ai bidouiller un peu tout ça, et réussi à avoir ce que je veux!
merci encore et bonne journée à vous
Sujet clos
Aller à