Ciao a tutti.
Ho iniziato da poco a usare l'html e i css. Non riesco a fare una cosa... e sto impazzendo :
Creo un div ci piazzo dentro un immagine, metto padding e margin a 0px. Nonostante ciò sotto l'immagine mi compare sempre un strisciolina bianca (ovviamente me ne accorgo mettendo il background al div.
Come faccio per fare in modo che l'immagine sia "attillata" al div????
posta il link alla pagina
Prova a mettere anche margin e padding = 0px anche per img e togli gli spazi tra i tag.
Qualcosa tipo:
<div>[img]...[/img]</div>
Ciao
Akito
W l'open source!!
Esempio:
<div id="prova">
[img]....[/img]
</div>
nel css:
#prova {margin:0 0 0 0; padding:0 0 0 0;}
#immagine {margin:0 0 0 0; padding:0 0 0 0;}
risultato...????
se do un background al div, o se gli metto un bordo che lo incornici, ai piedi della foto mi compare una strisciolina bianca.... come la elimino?
non dipende dalla foto, perchè ho provato con svariate foto...
Ho fatto questa prova:
<html>
<head>
<style>
#prova {margin:0 0 0 0; padding:0 0 0 0; background-color:#FF0000;}
#immagine {margin:0 0 0 0; padding:0 0 0 0;}
</style>
</head>
<body>
<div id="prova">
[img]....[/img]
</div>
<div id="prova">[img]....[/img]</div>
</body>
</html>
La causa della riga sotto l'immagine sono gli accapo. Nella immagine in basso, gli accapo non ci sono e la riga viene coperta interamente dall'immagine.
Spero di essere stato d'aiuto.
Ciao
Akito
W l'open source!!
sei un grande
grazie mille
ragazzi ho un problema simile anche io, ma non riesco a risolvere con questo metodo, rimane una minuscola strisciolina attorno alle immagini comunque e non va via purtroppo.
Questo è il codice della pagina html
..................
<div id="sezione_prodotti">
<p class="barra_prodotti">
<a href="porte.html">
[img]images/prodotti_1.jpg[/img]
</a>
<a href="infissi.html">
[img]images/prodotti_2.jpg[/img]
</a>
<a href="arredo.html">
[img]images/prodotti_4.jpg[/img]
</a>
<a href="cucine.html">
[img]images/prodotti_3.jpg[/img]
</a>
</p>
</div>
...............................
Nel css ho questi valori per il div, per il paragrafo e per le immagini:
.....................................
#sezione_prodotti {
background-image: url('images/sfondogenerico.jpg');
width: 740px;
height: 542px;
margin: 15px auto;
text-align: center;
padding: 0 0 0 0;
}
.barra_prodotti {
margin:0 0 0 0;
padding:0 0 0 0;
padding-top: 0.5cm; // mi serve per posizionamento su immagine sfondo del <div>
}
img {
margin:0 0 0 0;
padding:0 0 0 0;
}
................................
Ci sbatto la testa da qualche giorno ma non riesco a risolvere il problema, qualcuno mi può dare una mano, se ci capisce qualcosa, sempre per favore ovviamente. grazie e ciao.
Ciao, anche tu hai lo stesso problema di pj84.
Gli spazi e gli accapo causano quelle fastidiose righe bianche.
Ti posto il codice corretto:
<div id="sezione_prodotti">
<p class="barra_prodotti">
[img]images/prodotti_1.jpg[/img][img]images/prodotti_2.jpg[/img]
[img]images/prodotti_4.jpg[/img][img]images/prodotti_3.jpg[/img]
</p>
</div>
NB: Il contenuto del tag p deve stare tutto su una riga e tutto compatto (senza spazi o accapi). Gli attributi di img, title e name non servono, se usi name per qualche js, è meglio usare id (name è deprecato per tutti i tag tranne per <input>). L'attributo title è più utile nei tag a.
ed ecco qui il css:
#sezione_prodotti {
background-image: url('images/sfondogenerico.jpg');
width: 740px;
height: 542px;
margin: 15px auto;
text-align: center;
padding: 0px;
}
.barra_prodotti {
margin: 0px;
padding: 0px;
padding-top: 0.5cm; // mi serve per posizionamento su immagine sfondo del <div>
}
.barra_prodotti a {
margin: 0px;
padding: 0px;
}
.barra_prodotti img {
margin: 0px;
padding: 0px;
border: 0px none #000000;
}
NB: ho aggiunto .barra_prodotti prima di a e img cosi vengono ridefiniti solo i tag a e img della classe .barra_prodotti mentre gli altri non vengono toccati.
E' tutto
Ciao
Akito
W l'open source!!
Permessi di invio
Rispondi quotando
