Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di blekm
    Registrato dal
    Jun 2004
    Messaggi
    8,310

    centrare immagine contenuta dentro un elemento <li>

    html

    codice:
    <ul class='galleria-fotografica'>
    [*]<a href="immagini-strutture/2_1.jpg" rel="thumbnail">
    [img]immagini-strutture/2_1thumb.jpg[/img]</a>
    
    [*]<a href="immagini-strutture/2_2.jpg" rel="thumbnail">
    [img]immagini-strutture/2_2thumb.jpg[/img]</a>
    
    [*]<a href="immagini-strutture/2_3.jpg" rel="thumbnail">
    [img]immagini-strutture/2_3thumb.jpg[/img]</a>
    
    [*]<a href="immagini-strutture/2_4.jpg" rel="thumbnail">
    [img]immagini-strutture/2_4thumb.jpg[/img]</a>
    
    [/list]
    css
    codice:
    .galleria-fotografica
    {
    	width: 230px;
    	height: 420px;
    	float: left;
    	margin: 0;
    	padding-top: 60px;
    	padding-left: 10px;
    }
    
    .galleria-fotografica a
    {
    	cursor: pointer;
    }
    
    .galleria-fotografica img
    {
    	background-color: white;
    	border-color: #aaa #ccc #ddd #bbb;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	padding: 2px;
    	vertical-align: top;
    	width: 80px;
    	height: 60px;
    }
    
    .galleria-fotografica li
    {
    	background-color: white;
    	border-color: #ddd #bbb #aaa #ccc;
    	border-style: solid;
    	border-width: 1px;
            color: inherit;
    	display: inline;
    	float: left;
    	margin: 10px;
    	position: relative;
    	cursor:  pointer;
    }
    come centrare l'immagine dentro l'elemento[*]? Il mio box li è di 80x60, e le immagini dentro sono più piccole, ma non sempre 80x60. Possono essere 80x40 o 45*60. Come centrarle sempre, indipendentemente dalle dimensioni? Col codice di sopra mi riempiono tutto il contenuto, sgranando l'immagine.

    Forse dovrei usare i div invece della galleria con <ul> e[*]?
    Il portale sul turismo a Lucca

    Siti web Lucca

    Vendo Tex a colori di Repubblica (primi 100 numeri) - info in pvt.

  2. #2
    Frontend samurai L'avatar di fcaldera
    Registrato dal
    Feb 2003
    Messaggi
    12,924
    la soluzione più semplice può essere quella di mettere le immagini come sfondi delgli elementi <a> all'interno delle tue liste, in questo modo potrai centrarle con la proprietà background-position
    Vuoi aiutare la riforestazione responsabile?

    Iscriviti a Ecologi e inizia a rimuovere la tua impronta ecologica (30 alberi extra usando il referral)

  3. #3
    Utente di HTML.it L'avatar di blekm
    Registrato dal
    Jun 2004
    Messaggi
    8,310
    Originariamente inviato da fcaldera
    la soluzione più semplice può essere quella di mettere le immagini come sfondi delgli elementi <a> all'interno delle tue liste, in questo modo potrai centrarle con la proprietà background-position
    un esempio col mio codice?

    ho il problema che deve essere un codice universale, forse dovrei scrivere codice css dentro la pagina html, le foto vengono pescate da una cartella
    Il portale sul turismo a Lucca

    Siti web Lucca

    Vendo Tex a colori di Repubblica (primi 100 numeri) - info in pvt.

  4. #4
    Utente di HTML.it L'avatar di blekm
    Registrato dal
    Jun 2004
    Messaggi
    8,310
    per ora ho risolto cosi, centrando verticalmente. Ma non riesco a centrare orizontalmente.

    codice:
    <ul class='galleria-fotografica'>
    <div class="f">[*]<a href="immagini-strutture/2_1.jpg" rel="thumbnail">
    [img]immagini-strutture/2_1thumb.jpg[/img]</a>
    </div>
    
    
    <div class="f">[*]<a href="immagini-strutture/2_2.jpg" rel="thumbnail">
    [img]immagini-strutture/2_2thumb.jpg[/img]</a>
    </div>
    
    
    <div class="f">[*]<a href="immagini-strutture/2_3.jpg" rel="thumbnail">
    [img]immagini-strutture/2_3thumb.jpg[/img]</a>
    </div>
    
    
    <div class="f">[*]<a href="immagini-strutture/2_4.jpg" rel="thumbnail">
    [img]immagini-strutture/2_4thumb.jpg[/img]</a>
    </div>
    
    [/list]
    
    
    .f
    {
    	width:  80px;
    	height: 60px;
    }
    
    .f img
    {
    	margin: 0 auto;
    	text-align:  center;
    	display:  block;
    }
    mi farebbe comodo una soluzione senza bisogno di impostare background tramite css. E ovviamente che funzioni su IE. Io ora sto provando su FF per mac.
    Il portale sul turismo a Lucca

    Siti web Lucca

    Vendo Tex a colori di Repubblica (primi 100 numeri) - info in pvt.

  5. #5
    Utente di HTML.it L'avatar di blekm
    Registrato dal
    Jun 2004
    Messaggi
    8,310
    up

    edit: ho risolto cosi, usando un'altra discussione dove H5N1_Aviaria mi ha risolto il problema

    http://forum.html.it/forum/showthrea...readid=1195640

    codice:
    <ul class='galleria-fotografica'>[*]
    
    [*]
    
    
    ...
    ...
    ...[/list]
    dove style=... me lo costruisco in maniera interattiva con php.

    codice:
    a.gallery
    {
    	text-decoration: none;
    	border: 1px solid red;
    	width: 80px;
    	height: 60px;
    	float: left;
    	cursor: pointer;
    }
    
    .galleria-fotografica
    {
    	width: 230px;
    	height: 420px;
    	float: left;
    	margin: 0;
    	padding-top: 60px;
    	padding-left: 10px;
    }
    
    .galleria-fotografica a
    {
    	cursor: pointer;
    }
    
    .galleria-fotografica img
    {
    	background-color: white;
    	border: 1px solid silver;
    	padding: 2px;
    }
    
    .galleria-fotografica li
    {
    	background-color: white;
    	border-color: #ddd #bbb #aaa #ccc;
    	border-style: solid;
    	border-width: 1px;
    	color: inherit;
    	display: inline;
    	float: left;
    	margin: 10px;
    	position: relative;
    	cursor:  pointer;
    }
    
    .galleria-fotografica li img
    {
    	margin: 0 auto;
    	text-align: center;
    }
    Il portale sul turismo a Lucca

    Siti web Lucca

    Vendo Tex a colori di Repubblica (primi 100 numeri) - info in pvt.

  6. #6
    Utente di HTML.it L'avatar di blekm
    Registrato dal
    Jun 2004
    Messaggi
    8,310
    l'allegato per farvi vedere che funziona praticamente in qualsiasi caso. Speriamo solo che IE non faccia come gli pare, sennò uccido qualcuno.
    Immagini allegate Immagini allegate
    Il portale sul turismo a Lucca

    Siti web Lucca

    Vendo Tex a colori di Repubblica (primi 100 numeri) - info in pvt.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2024 vBulletin Solutions, Inc. All rights reserved.