spaziare img

**indigoindigo** · 18-05-2006, 15:00

ciao..

codice:

<link rel="stilesheet" type="text/css" href="stilez.css" media="screen" />

stilesheet? --->stylesheet

codice:

<div id="container">								[*][img]imagez/photo1_thumb_99.jpg[/img]
<li style="margin-left:31px;">[img]imagez/photo2_thumb_61.jpg[/img]
<li style="margin-left:31px;">[img]imagez/photo3_thumb_44.jpg[/img]
<li style="margin-left:31px;">[img]imagez/photo4_thumb_110.jpg[/img]
<li style="margin-left:32px;">[img]imagez/photo5_thumb_61.jpg[/img][*][img]imagez/photo1_thumb_99.jpg[/img]
<li style="margin-left:139px;">[img]imagez/photo2_thumb_61.jpg[/img]
<li style="margin-left:140px;">[img]imagez/photo5_thumb_61.jpg[/img]


[*][img]imagez/photo1_thumb_99.jpg[/img]
<li style="margin-left:auto;">[img]imagez/photo2_thumb_61.jpg[/img]
<li style="margin-left:auto;">[img]imagez/photo3_thumb_44.jpg[/img]
<li style="margin-left:auto;">[img]imagez/photo4_thumb_110.jpg[/img]
<li style="margin-left:auto;">[img]imagez/photo5_thumb_61.jpg[/img][*][img]imagez/photo1_thumb_99.jpg[/img]

<li style="margin-left:auto;">[img]imagez/photo2_thumb_61.jpg[/img]
<li style="margin-left:auto;">[img]imagez/photo5_thumb_61.jpg[/img]
</div>

e il povero tag "ul"?

le liste si fanno così:

codice:

<ul>[*][*][*][/list]

io ti suggerisco di usare una lista (una coppia di "ul") per fila..

se non hai il markup adeguato è inutile impostare il CSS..

infine

codice:

li
{
display: inline;
list-style-type: none;
float:left;
}

delle due l'una.. o float o display, che utilità hanno tutte e due insiema?

**geepers** · 18-05-2006, 15:06

ok ho sistemato ma adesso perchè non mi stanno piu a filo anche avendo messo
margin:0;
padding:0;
alla classe ul????????

E come se i pixel foissero diventati di piu;
se fai caso alla larghezza del contenitore e a quella delle singole foto la somma è uguale

N.B. per comodita mi sono messo nei nomi file un numero che è la larghezza delle foto

Sei molto gentile cmq

**geepers** · 18-05-2006, 15:16

vedi se sommate la fila 1 che è ok fa 500px
anche la due fa 500px ma l ultima foto mi va a capo

**geepers** · 18-05-2006, 15:19

scusate ma lo fa solo con explorer l'errore con gli altri opera e firefox sta ok

cosa devo usare un hack per il max width?????

Aiuto!!!!!!!!!!!!!!!!!!!!!!!!!

**indigoindigo** · 18-05-2006, 15:31

aspetta..

io la prima fila l'ho risolta così:

CSS

codice:

ul{margin:0; padding:0;}

ul#prima li
{
list-style-type: none;
float: left;
margin-right: 31px;
}

ul#prima li.destra{margin-right: 0; margin-left: 1px;}

codice:

<div id="container">					
<ul id="prima">[*][img]imagez/photo1_thumb_99.jpg[/img][*][img]imagez/photo2_thumb_61.jpg[/img][*][img]imagez/photo3_thumb_44.jpg[/img][*][img]imagez/photo4_thumb_110.jpg[/img]
<li class="destra">[img]imagez/photo5_thumb_61.jpg[/img][/list]

ora mi concentro sulla seconda..solo tre foto, giusto? una a sx, una a dx e l'altra in mezzo?

**indigoindigo** · 18-05-2006, 15:35

Prova così:

codice:

ul{margin:0; padding:0;}

ul#prima li
{
list-style-type: none;
float: left;
margin-right: 31px;
}

ul#prima li.destra, ul#seconda li.destra{margin-right: 0; margin-left: 1px;}


ul#seconda{clear: left;}

ul#seconda li{list-style-type: none;
float: left;
margin-right: 139px;}


img{margin:0; padding:0; border:0;}

</style>
</head>

<body>
<div id="container">					
<ul id="prima">[*][img]imagez/photo1_thumb_99.jpg[/img][*][img]imagez/photo2_thumb_61.jpg[/img][*][img]imagez/photo3_thumb_44.jpg[/img][*][img]imagez/photo4_thumb_110.jpg[/img]
<li class="destra">[img]imagez/photo5_thumb_61.jpg[/img][/list]
<ul id="seconda">[*][img]imagez/photo1_thumb_99.jpg[/img][*][img]imagez/photo2_thumb_61.jpg[/img]
<li class="destra">[img]imagez/photo5_thumb_61.jpg[/img]
<ul/>

</div>

dimmi come va..

**geepers** · 18-05-2006, 15:44

si ma io sto pensando a come fare una cosa dinamica
ci faro una galleria con questa storia e mi sembra una follia andare a scriptare un foglio di stile;

potrei tranquillamente fargli fare dei conti delle larghezze e fargli scrivere il margin;

ma a quel punto mi conviene scriverlo nel codice non so neanche se si puo scrivere un css onthefly se tu gentilmente mi aiuti a risolvere il problema su tutti i browser sto un passo avanti grazie mille

**geepers** · 18-05-2006, 15:49

funziona anche su explorer
ma mi sapresti spiegare il xchè cosa è quel margin right???

Grazie bello sei gentilissimo

**geepers** · 18-05-2006, 15:49

PER TUTTI RIMETTO IL LINK

**indigoindigo** · 18-05-2006, 16:05

prego bello!!!

il fatto è che io sono più pratico che teorico, infatti ci sta che non sia tutto correttissimo dal punto di vista teorico.. e mi rendo conto che non è una soluzione generalizzata ma adattata al caso concreto..

il margin right fa sì che gli elementi "li" si distanzino dall'elemento ("li") alla loro destra del valore espresso in pixel.. per l'ultimo elemnto "li" ho annullato con la classe "destra" il margin-right perchè sennò col piffero che si accostava al lato dstro, e ho messo 1px di magin-left per farlo tornare..

forse per fare una galleria non è il metodo più immediato..dai un occhio qua se trovi roba interessante

http://www.cssplay.co.uk/menu/index.html

ciao

Discussione: spaziare img

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio