[css] problemi di layout

**kaze** · 26-04-2004, 15:49

L'effetto che ti serve è espresso dal seguente codice:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML LANG="IT">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<style>
.tuaclasse{ 
width:80%;
height:30%;
padding:5px;
background-color:#c0c0c0;
}
.box1{
width:48%;
height:100%;
margin:5px;
background:url(tua_imagine.jpg);
float:left;
}
.box2{
width:48%;
height:100%;
margin:5px;
background-color:#6633CC;
float:right;
}
</style>

</HEAD>

<BODY>
<div class="tuaclasse">
<div class="box1"></div>
<div class="box2">testo testo testo</div>
</div>
</BODY>
</HTML>

Aggiusta e prova

**blur** · 26-04-2004, 16:33

così singolarmente come me l'hai scritto, funziona perfettamente, ma addattandolo al mio css ci sono problemi.

questo è quello che mi appare

la parte del mio css implicato:

codice:

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

.box1 {
width:80%;
height:30%;
padding:5px;
background-color:#ffffcc;
}

.img
{

width:48%;
height:100%;
margin:5px;
background:url(../immagini/soft.jpg);
float:left;
}

.text
{

width:48%;
height:100%;
margin:5px;
background-color:#6633CC;
float:right;

}

html:

codice:

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

<div class="box1">
<div class="img"></div>
<div class="text">

<h3>SOFTWARE GESTIONALE</h3>

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


<h4>
</P></div>

**kaze** · 26-04-2004, 16:37

Gioca sulle width dei due div immagine e testo... o in alternativa aumenta la width del box contenitore.

**ilduca69** · 28-04-2004, 13:07

Il problema più grande da risolvere è che se tu dai un DIV in percentuale
quello all'interno è la percentuale della percentuale.

Esempio: #div1 {width:80%;} .miotext {width:40%;}

la classe .miotext all'interno dell' id #div1 sarà il 40% dell'80% dello spazio assegnato dal BODY

Si veda anche la guida su PROHTML.IT sul BOX-MODEL

**Shores** · 28-04-2004, 14:26

Allora, questo è il solito annoso problema, che deriva dal non aver capito cosa è un float.

Lo scrivo in maiuscolo così forse si capisce.

IL FLOAT NON E' UNA COLONNA DI TABELLA E NON C'E' NESSUN MODO DI OTTENERE COLONNE DI TABELLA ALTE TUTTE UGUALI AL CRESCERE DI UNA QUALSIASI DELLE COLONNE TRAMITE I CSS; se questo è ciò che si vuole, BISOGNA usare una tabella.

Se si rinuncia all'altezza uguale di tutte le colonne, allora è facilissimo: basta dare float:left a TUTTE le div "colonne" e ricordare di aggiungere , prima della chiususra della div che le contiene, un <br style="clear:left;">.

Altrimenti, se si ha bisogno di avere le colonne alte tutte uguali e SI SA A PRIORI quale sarà la colonna più alta, basterà inserire questa in un float, inserito a sua volta in una div che contenga solo questo float e del testo che sarà la seconda colonna, e ripetere questo meccanismo come in un set di scatole cinesi per aggiungere altre colonne.

Spero che ora sia più chiaro.

Discussione: [css] problemi di layout

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio