Partage
  • Partager sur Facebook
  • Partager sur Twitter

portfolio : afficher des images avec un tableau

css html

    17 août 2017 à 16:35:14

    Bonjour, voila ce que j'aimerai faire et comme une croquis vaut mieux qu'un long discours :

    J'ai bien sur réussi à coder le portfolio avec un <table> mais ce n'est plus aux normes actuelles :

    <table id="tab_portfolio">
    	<tr>
    		<td><a href="1.php"><img width="100%" src="img/1.jpg"></a></td>
    		<td><a href="2.php"><img width="100%" src="img/2.jpg"></a></td>
    		<td rowspan=2 class="cells"><a href="3.php"><img width="100%" src="img/3.jpg"></a></td>
    	</tr>
    	<tr>
    		<td><a href="4.php"><img width="100%" src="img/4.jpg"></a></td>
    		<td><a href="5.php"><img width="100%" src="img/5.jpg"></a></td>
    	</tr>
    </table>
    

    puis je me suis donc attaqué au css avec :

    <div id="box_portfolio" >
    	<div class="tablewrapper">
    		 <div class="table">
    			<div class="row">
    			  <div class="cell">
    				<a href="1.php"><img width="100%" src="img/1.jpg"></a>
    			  </div>
    			  <div class="cell">
    				<a href="2.php"><img width="100%" src="img/2.jpg"></a>
    			  </div>
    			  <div class="rowspanned cell">
    				<a href="3.php"><img width="100%" src="img/3.jpg"></a>
    			  </div>
    			</div>
    			<div class="row">
    			  <div class="cell">
    				<a href="4.php"><img width="100%" src="img/4.jpg"></a>
    			  </div>
    			  <div class="cell">
    				<a href="5.php"><img width="100%" src="img/5.jpg"></a>
    			  </div>	
    			  <div class="empty cell"></div>		  
    			</div>
    		 </div>
    	</div><!-- tablewrapper -->
    </div><!-- box_portfolio -->
    

    avec :

    #box_portfolio {
    	position: absolute;
    	bottom: 0; 
    	width: 100%; 
    
    }
    .tablewrapper {
    	position: relative;
    	margin-left:50px;
    	margin-bottom:50px;
    	width: 100%;
    }
    .table {
    	display: table;
    	width: 100%;
    	width: 50%;
    	margin:10%;
    }
    .row {
      display: table-row;
    }
    .cell {  
    	display: table-cell;
    	padding: 5px;
    	width: 150px;
    	width: 30%;
    }
    .cell.empty {
    	border: none;
    	width: 150px;
    	width: 30%;
    }
    .cell.rowspanned {
    	position: absolute;
    	top: 0;
    	bottom: 0;
    	width: 310px;
    
    }
    
    



    Seulement j'aimerai que mon portfolio sous flexible que les 5 images gardent cette disposition et que leur dimension et espacement soit modifié en fonction de la dimension de la page du navigateur.

    Je suis preneur de conseils et critiques constructives.

    Merci d'avance

    • Partager sur Facebook
    • Partager sur Twitter

    portfolio : afficher des images avec un tableau

    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
    • Editeur
    • Markdown