Volendo realizzare un sito per fotografia, ho impostato un css a 3 colonne e la foto e' visualizzata nella
colonna centrale. Riducendo la finestra del browser la foto invade la colonna di destra infilandosi sotto
allo scritto contenuto in quella colonna. Ho pochissima esperienza di software e l'ambiente operativo che
utilizzo e' un portatile con Windows 7 Home e IE 11.
Grazie per le indicazioni che gentilmente il forum vorra' inviarmi.
Prova ad applicare width:100%; su quell'elemento img.
Se non risolvi, sarebbe utile vedere la tua pagina pubblica. Nel caso posta il link.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Salve, grazie per l'indicazione ma avevo gia' provato e non va. Il sito e' solo in preparazione, non e' online, e non essendo mio non posso divulgarlo. Comunque le definizioni css sono (colonna sinistra, centrale, destra):
colsx{position:absolute; width:260px; overflow:auto; margin-left:auto; margin-right:auto; padding:1em 0 0;}
colcentr{width:auto; padding:1em 0 0; max-width:auto;}
coldx{position:absolute; right:5px; top:75px; width:auto; max-width: auto; padding:1em 0 0;}
Sullo statement html img ho provato sia width:auto sia width:100%, ma il risultato non cambia.
Grazie per ulteriori suggerimenti.
Ciao, con quel solo css non capisco quale risultato vorresti ottenere.
Ci sono diverse cose che non suonano bene.
Il position:absolute sulle colonne laterali slegherà queste dal normale flusso del documento. Da ciò ne deriva che la colonna centrale è libera di estendersi sia a destra, sia a sinistra, a meno che non ci siano altri elementi contenitori che influiscono diversamente.
Nel caso, prova a postare la struttura html del tuo layout.
Il width:auto su colcentr e coldx non ha molto senso. Come ti aspetti che si comportino questi due elementi?
La colonna destra non vuoi che abbia una larghezza fissa?
Deve essere variabile? In questo caso, secondo quale logica?
PS: il valore auto non è valido per la proprietà max-width.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Salve, riesco a rispondere solo ora. Come detto inizialmente ho scarsa conoscenza generale del css (anche perché a mio parere non sono riuscito a trovare un libro che lo spiega in modo decente) per cui non capisco bene quanto mi dici.
Aldila di cosa ho scritto nel css e html, io cerco questo comportamento del layout css:
a schermo intero mi va bene cosi come si comporta ora;
restringendo la finestra del browser la colonna centrale, il cui scopo e' visualizzare una immagine, deve ridursi per non finire sotto allo scritto contenuto nella colonna destra (cosa che purtroppo accade ora).
Quindi quali possono essere le definizioni per questo layout css?
Grazie ancora e saluti cordiali.
Ciao.
Non vedendo quale html è associato a quel css, non so come si comporta ora.a schermo intero mi va bene cosi come si comporta ora;
Ad ogni modo io farei una cosa del genere: layout3colonne.txt
PS: il forum è guasto, da problemi quando si posta codice
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Salve, il file indicato non si apre.
<!DOCTYPE HTML>
<html>
<head>
<title>Esempio</title>
<meta charset="utf-8"/>
<style type="text/css" >
html, body{
margin: 0;
padding: 0;
}
#colsx{
width: 260px;
position: absolute;
top: 0;
bottom: 0;
background: Tan;
}
#coldx{
width: 260px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: Tan;
}
#colcentr{
margin: 0 260px;
background: Cornsilk;
}
#colcentr img{
max-width: 100%;
}
</style>
</head>
<body>
<div id="colsx" class="col">colsx</div>
<div id="colcentr">colcentr<br><img src="image.jpg" alt=""></div>
<div id="coldx" class="col">coldx</div>
</body>
</html>
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Salve, grazie per l'esempio, ho risolto, scoprendo che dipendeva dalle definizioni html dello scritto contenuto nella colonna di destra.
Comunque le indicazioni qui ricevute mi hanno fatto capire alcune cose in piu' sui css e rivedere meglio il codice gia' scritto.
Grazie mille e cordiali saluti.
Ciao, non c'è di che, buon proseguimento.
Installa Forum HTML.it Toolset per una fruizione ottimale del Forum
Permessi di invio
Rispondi quotando
