CSS - Problemi di allineamento immagine

**Sandrocchio_0.1** · 29-06-2004, 21:42

Ciao a tutti ragazzi,
sono di nuovo quà con il mio layout.

Già una volta ero passato di qua per un suggerimento nella costruzione di un layout liquido per la mia homepage evitando di usare le tabelle e seguendo le direttive della W3C.
Adesso però ho un problema nell'allineare un'immagine all'interno del box verde sul lato destro, facendo flottare il testo sulla sinistra (vedi link). Beh insomma, se imposto l'attributo float: right allo stile dell'immagine, è come se non fosse più dentro al box verde.
Vi metto un po di codice, sperando che qualcuno mi possa aiutare.
Ciauz e fatemi sapere.

codice:

		<div id="box_green">
			[img]immagini/index_14.gif[/img]
				<div id="header_up" class="font">
				[img]immagini/marina01.jpg[/img]
				Finally it is arrived... Welcome to the SUMMER ’04.

				This is the time when dangerous senses wake up and push you to make forbidden things
 
				and the night replace the day, lighting up the sky with magic stars.

				Have a good summer all of you whatever you are.

				
				</div>

codice:

#box_yellow{
	position:absolute;
	top: 60px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffe100;
	height: auto;
}

#box_green{
	background-color: #99cc33;
	height: auto;
	margin: 17px 9px 17px 9px;
	background-image: url(immagini/index_16.gif);
	background-repeat: no-repeat;
	background-position: top right;
	position: relative;
}

#header_up{
	position: relative;
	margin: 5 px;
	height: auto;
}

.font{
	font-family:"Comic Sans MS", Arial, Verdana, sans-serif;
	font-size:14px;
}

#summer_pic{
	float: right;
}

**Marcolino's** · 29-06-2004, 21:53

Cioè vorresti che l'immagine si dentro al box verde e che il box verde sia alto quanto l'immagine, senza formare quello scalino sulla destra?
Se è così inizia a controllare ben di aver chiuso tutti i <div>.
Ti consiglio anche di eliminare l'elemtno
per impaginare del testo, ma di usare l'elemtno paragrafo

E anche di dare un'occhiata a questo tutorial: http://www.constile.org/tutorial/com...e_un_articolo/

Specie nel paragrafo di come posizionare un'immagine nel testo, che mi pare proprio il tuo caso.

**Sandrocchio_0.1** · 29-06-2004, 22:49

grazie per il suggerimento dei paragrafi, ma al momento sono preso da questo problema.
Tutti i tag "div" si chiudono come da regola, forse o perso qualche pezzo nel fare il taglia e incolla nel post.
ma sembra che quando imposto l'attributo float, l'immagine venga presa e tolta dal box verde. Mntre invece se la lascio senza nessun attributo CSS si comporta correttamente allungando il quadrato verde.
ho trovato qualcosa di simile al mio problema in giro, ma non mi è molto chiara la soluzione, link .

**floyd46** · 30-06-2004, 00:14

ciao
vista l'ora

a me è sembrato di capire che volessi una cosa come quella della foto allegata;

se è così, il codice è questo:
<style type="text/css">
body{
margin:0;
padding:0;
text-align:center;
}
div#box{
margin:10px auto 0 auto;
padding:5px;
background-color:#f60;
width:600px;
text-align:left;
}
div#foto{
float:right;
margin:0;
padding:0;
}
</style>

<body>
<div id="box">

<div id="foto">
[img]marina01.jpg[/img]
</div>
Finally it is arrived... Welcome to the SUMMER ’04.

This is the time when dangerous senses wake up and push you to make forbidden things

and the night replace the day, lighting up the sky with magic stars.

Have a good summer all of you whatever you are.

Finally it is arrived... Welcome to the SUMMER ’04.

This is the time when dangerous senses wake up and push you to make forbidden things

and the night replace the day, lighting up the sky with magic stars.

Have a good summer all of you whatever you are.

Finally it is arrived... Welcome to the SUMMER ’04.

This is the time when dangerous senses wake up and push you to make forbidden things

and the night replace the day, lighting up the sky with magic stars.

Have a good summer all of you whatever you are.

</div>
</body>

spero di aver capito bene.

**Sandrocchio_0.1** · 30-06-2004, 08:37

il risultato deve presentarsi proprio come nella tua foto, l'unica cosa è che sto cercando di elaborare un layout liquido privo di tabelle. Quindi dal codice che tu mi hai dato deve togliere un paio di cose che non servono:
dal body
text-align: center,
dal box
width: 600px,
perchè io voglio che il layout si adatti completamente alla finestra del browser. Magari dai un'occhiata al
link.
Ho comuqnue provato a fare che mi hai detto, ma quel float mi scombina tutto.
Provo a postare il codice un po più completo, forse rende più l'idea di cosa sto provando a fare.
Grazie

codice:

<body style="background-color:#FFFFFF; height:auto; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
[img]immagini/index_01.gif[/img]

	<div id="box_yellow">
		[img]immagini/index_03.gif[/img]
		[img]immagini/index_13.gif[/img]
		[img]immagini/index_23.gif[/img]
		[img]immagini/index_24.gif[/img]
		[img]immagini/index_04.gif[/img]
		[img]immagini/index_05.gif[/img]
		[img]immagini/index_06.gif[/img]
		[img]immagini/index_07.gif[/img]
		[img]immagini/index_08.gif[/img]
		[img]immagini/index_09.gif[/img]
		[img]immagini/index_10.gif[/img]
		
		<div id="box_green">
			[img]immagini/index_14.gif[/img]
				<div id="summer_pic">
				[img]immagini/marina01.jpg[/img]
				</div>
				Finally it is arrived... Welcome to the SUMMER ’04.

				This is the time when dangerous senses wake up and push you to make forbidden things
 
				and the night replace the day, lighting up the sky with magic stars.

				Have a good summer all of you whatever you are.

				<div id="corner_bottom_left_green">[img]immagini/index_21.gif[/img]</div>
	  </div>
</div>
</body>

codice:

/* Layout*/	
#box_yellow{
	position:absolute;
	top: 60px;
	left: 2%;
	right: 2%;
	width:95.6%;
	background-color: #ffe100;
	height: auto;
}

#box_green{
	background-color: #99cc33;
	height: auto;
	margin: 17px 9px 17px 9px;
	background-image: url(immagini/index_16.gif);
	background-repeat: no-repeat;
	background-position: top right;
	position: relative;
	text-align: left;
}

/* Body*/	

#summer_pic{
	float: right;
}

**floyd46** · 30-06-2004, 10:03

ciao
ieri sera ho provato a scrivere il codice per la parte che a te interessava; tutto il resto potresti lasciarlo come quello del link;
ho notato una cosa cmq: hai fatto molto uso di div con posizione assoluta;

credo si possa ottenere lo stesso risultato in maniera differente;
per esempio, se i link della parte superiore sono delle gif, trattale come un elenco normale, <ul>[*] ecc...

con i CSS si deve solo provare e riprovare, alla fine il risultato viene.

Prova a togliere la dimensione che ho dato io (600px); l'ho messa solo x prova.

ciao

**Sandrocchio_0.1** · 30-06-2004, 21:49

ok rega, o risolto parzialmente il problema inserendo il tutto in un div contenitore con questi attributi:

codice:

/* Body*/	
#floatcontainer:after { 
	content: ".";
	display: block;
	height: 0;
	overflow:hidden;
	clear:both;
	visibility:hidden; 
}

.font{
	font-family:"Comic Sans MS", Arial, Verdana, sans-serif;
	font-size:14px;
}

#summer_pic{
	float: right;
	top: 5px;
}

codice:

<div id="floatcontainer">
						<div id="summer_pic">[img]immagini/marina01.jpg[/img]</div>
					<p class="font">
					Finally it is arrived... Welcome to the SUMMER ’04.

					This is the time when dangerous senses wake up and push you to make forbidden things
 
					and the night replace the day, lighting up the sky with magic stars.

					Have a good summer all of you whatever you are.

					</p>
				</div>

Funziona perfettamente su Opera e Mozilla, ma non Explorer

, controlla il link
ho bisogno della vostra collaborazione per risolvere questo problema.
Qualche idea??

**Sandrocchio_0.1** · 01-07-2004, 08:17

Come già detto ho già risolto il problema in parte.
Sono riuscito a rendererlo compatibile con IE aggiungendo questo attributo al codice

codice:

/* holly Hack \*/
* html #floatcontainer{height:1%;}
/* end hack */

Adesso funziona :metallica

Discussione: CSS - Problemi di allineamento immagine

Strumenti discussione

Ricerca discussione

Visualizza

CSS - Problemi di allineamento immagine

Permessi di invio