[css] problemi di layout

[blur]

buongiorno!

ho un layout a tre colonne, e nel <div id="principale"> avrei bisogno di usare vari box i cui ci devo inserire un'immagine a sx e un testo a dx.
Questi box li ho chiamati box1, box2, box3...etc
ad esempio: se io inserirsco all'interno di box1, l'immagine a sx e i testo a dx, ho questi problemi: se uso per il testo elenchi puntati, questi mi finiscono sotto l'img, e se il testo supera l'altezza dell'img stessa, va a capo ( cioè non rimane incolonnato).
allora ho pensato di creare una classe #box1.img per l'immagine e #box1.text per il testo, ma non cambia niente :master:

come potrei gestire la situation?

#principale .box { 
	border-style: none solid solid solid; 
	border-color: #ccc; 
	border-width: 1px; 
	padding:	10px;
}

#box1 {
            display:block;
border-style: none solid solid solid; 
	margin:3px;
	border-color: #ccc; 
	border-width: 1px; 
	background: #ffffcc; 
	padding:.5px;
}

#box1.img
{
          
border-style: none solid solid solid; 
	margin:0px;
	border-color: #ccc; 
	border-width: 1px; 
	background: #ff0000; 
	padding:.5px;
}

#box1.text
{
            
border-style: none solid solid solid; 
	margin:0px;
	border-color: #ccc; 
	border-width: 1px; 
	background: #ff0000; 
	padding:.5px;

}

html

<div id="principale"><div class="box">

<div id="box1"><div class="img">
[img]immagini/img.jpg[/img]
</div>
<div class="text">

<h3>TESTO</h3>

<h4>- Prova e riprova<ul TYPE=circle>[*]Pacchetto gestionale monoutente (applicazione desktop)[*]Pacchetto gestionale multiutente (client/server LAN)[/list]


<h4>

</P></div>
</div>

grazie
ciauz

[Starky]

Ho avuto lo stesso problema proprio ggi.
Ho creato un box che doveva contenere sia un'immagine che un testo ma impostando lo stile non riuscivo a fare in modo che il testo rimanesse affianco all'immagine senza andare sotto.

Alla fine ho dato un align="right" all'immagine e ho risolto ...

prova ... anche se forse c'è il modo per gestire il tutto tramite il css ... io non ci sono riuscita :quipy:

[flanza]

guarda che il text è un id e quindi per dargli il css devi:

#text
{

border-style: none solid solid solid;
margin-left:150px;
border-color: #ccc;
border-width: 1px;
background: #ff0000;
padding:.5px;

}

e poi puoi dare il margine sinistro per allineare il contenuto

[blur]

Originariamente inviato da flanza
guarda che il text è un id e quindi per dargli il css devi:

#text
{

border-style: none solid solid solid;
margin-left:150px;
border-color: #ccc;
border-width: 1px;
background: #ff0000;
padding:.5px;

}

e poi puoi dare il margine sinistro per allineare il contenuto

in pratica quello che vorrei fare è così, ma non funzia niente.


#text è un id? e cioè? se io lo richiamo tramite <div class="text"> non va bene?

[span]

no, gli id li puoi usare solo una volta per pagina e li richiami con id="nome_id"

poi ci sono le classi che le usi tutte le volte che vuoi, le dichiari con il punto

.nomeclasse

e li richiami con class="nomeclasse"

[flanza]

sei tu che hai scritto:

<div id="text">

<h3>TESTO</h3>

e quindi poi lo devi indicare con #test{...}

invece se lo vuoi class devi indicarlo con .text{...}

Hai provato a giocare con i margini?

[span]

per non far andare il testo sotto l'immagine devi dare a .text un margin-left: [width-immagine + eventuale padding e border]

vedi anche "Errata interpretazione del box model"

[blur]

Originariamente inviato da flanza
sei tu che hai scritto:

<div id="text">

<h3>TESTO</h3>

e quindi poi lo devi indicare con #test{...}

invece se lo vuoi class devi indicarlo con .text{...}

Hai provato a giocare con i margini?

:master:
fatemi capire una cosa...
se io prendo un layout a 3 colonne come quello di constile.org,
solo la parte centrale:

#principale { 
	float:			left; 
	width:			60%; 
	background:	#FFF; 
	color:			#000;
	margin: 		0 0 -1px 0;
}
#principale .box { 
	border-style:	none solid solid solid; 
	border-color:	#000; 
	border-width:	1px; 
	padding:			10px;
}

quel #principale.box non è una classe? se si come presumo perchè nel body html viene richiamato cosi?
<div class="box"> e non ".box" ?

cmq non funziona, mannaggia! ho provato con ".text" e a cambiare il background con un'altro colore per vedere come si comporta, ma niente non esiste proprio.
a questo punto posso utilizzare anzichè una classe un <div id=""> normale per annidare il tutto come da immagine?

[flanza]

no

quel
#principale .box {
dice che vale per #principale (id) e per la classe .box

Attento allo spazio!

[blur]

Originariamente inviato da flanza

Attento allo spazio!

dannazione!!! era proprio quello spazio mancante!!!!
non ci avevo fatto caso....

denkiù