box model

**giuseppe500** · 31-05-2005, 07:47

Ciao a tutti.Premetto che ho letto l'articolo sul box model.
Passiamo al problema:
sto' creando un layout fluido(ed è forse qui il problema)vorrei dividere il content in 3 aree come da allegato,solo e riporto il codice css della prima divisione strutturale in 2 parti destra e sinistra:

codice:

div#content
{
	
	margin-right: 0px;
	padding: 1em;
	background-color: #ff8;
	display:inline;
	width:100%;
}
div#macrosezione
{
	display:inline;
	background-color:Aqua;
	padding:1em;
	width:40%;
	}

div#microsezionealto
{
	display:inline;
	background-color:Blue;
	width:40%;	
	padding:1em;
}
div#microsezionebasso
{
.
.
.
mi fermo al primo "errore"

i box non si estendono in larghezza come vorrei:rimangono con una dimensione circa di 40px,anche se ho impostato il width dimacrosezione e microsezione a 40%.
ho notato che cambiando il padding cambia la dimensione dei box (solo non ho capito bene gli em e la loro grandezza)e poi, io non voglio aumentare il padding , voglio aumentare la grandezza effettiva del box ,magari in % perchè ho un layout fluido.
grazie.

**giuseppe500** · 31-05-2005, 07:59

mi sono scordato l'allegato

**Mich_** · 31-05-2005, 09:00

Non so come hai innestato i <div> e non so a quali blocchi si riferisce il tuo CSS.
Sicuramente dare display:inline; ad un <div> non e` una buona idea.

Comunque per fare una cosa come la tua io farei:

codice:

<div id="testata" class="largo"> ... </div>
<div id="menu" class="largo"> ... </div>
<div id="sez1" class="meta"> ... </div>
<div id="sez32" class="meta">
  <div id="sez3"> ... </div>
  <div id="sez2"> ... </div>
</div>
<div id="footer" class="largo"> ... </div>

con il CSS di questo tipo:

codice:

.largo {
  width: 98%;
  clear: both;
}
.meta {
  width: 45%;
  float:left;
  margin: 10px;
}

**giuseppe500** · 31-05-2005, 12:19

grazie mille mich_ è proprio quello che intendevo fare.
Solo che in ie6 va , mentre in ff il footer si posiziona dopo il menu' , dove sbaglio? ti posto il css e l'html se proprio ti va di aiutarmi.

css:

codice:

 
html,body
{
	margin: 0;
	padding:0
}
body
{
	font-family: arial,sans-serif;
	font-size: 76%;
	
}
div#container
{
	background: url(rightcol.jpg) repeat-y top right
}

/*stili generici, su header e footer*/
div#header
{
	background-color:#36C;
	color: #ff0
}
h1,h2{margin: 0;padding:0}
h1{padding-left:0.5em;font: bold 2.3em/80px arial,serif}
h2{color: #999;font-size: 1.5em}
div#footer a
{
	color: #fff;
	font-weight: bold;
	text-decoration: underline;
}

/*stili specifici per il layout*/
div#navigation
{
	float:left;
	width: 100%;
}
div#content
{
	
	margin-right: 0px;
	
	background-color: #ff8;
	width:100%;
}
div#contenitore
{
	
	background-color:Aqua;
	width:100%;
}
div#microsezione
{
	background-color:Blue;
	height:50%;
}

div#macrosezione
{
	background-color:Red;
	width:40%;
	height:100%;
	}
div#immaginimicro
{
	background-color:Fuchsia;
	width:40%;
	height:100%;
	}


div#footer
{
clear:right; 
text-align:center;
padding: 0.5em;
background-color: #69c;
color: #000
    
}

/*stili per la navigazione*/
div#navigation ul
{
	display:inline;
	margin: 1em 0 1em 1em;
	padding: 0; 
	list-style-type: none;
}
div#navigation li
{
	display:inline;
	margin: 0;
	padding: 0
}
div#navigation a
{
	display:inline;
	color:#369;
	font: normal bold 1.2em/1.6em arial,sans-serif;
	text-decoration:
	none
	
}
div#navigation a:hover
{
	display:inline;
	color: #033;
	text-decoration: underline
}
div#navigation a#activelink
{
	display:inline;
	color: #033;
	text-decoration: none
	
}
.largo {
  width: 98%;
  clear: both;
}
.meta {
  width: 45%;
  float:left;
  margin: 10px;
}

e l'html:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	
	
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
	<head>
		<title>Layout a due colonne con float</title>
		<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
		<meta name="generator" content="HAPedit 3.0">
		<style type="text/css">
@import url("dummy.css");
a#viewcss{color: #00f;font-weight: bold}
</style>
	</head>
	<body>
		<div id="container">
			<div id="header" class="largo">
				<h1>Html.it</h1>
			</div>
			<div id="navigation" class="largo">
				<ul>
					[*]
						Home
					[*]
						Pillole
					[*]
						Contenuti
					[*]
						Grafica
					[*]
						Linguaggi
					[*]
						Webdesign
					[*]
						Software
				[/list]
			</div>
			<div id="content" class="largo">
				<div id="macrosezione" class="meta">pippo</div>
				<div id="macrosezionedet" class="meta">
					<div id="Immaginimicro">

giugio1</p>
					
					</div>
					<div id="microsezione">giugio2
					</div>
				</div>
			</div>
		</div>
			<div id="footer" class="largo">gio</div>
		
		
	</body>
	
	<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
</html>

non capisco perchè mozzilla me la veda in quel modo!!
grazie mille ,ciao.

**Mich_** · 31-05-2005, 12:27

Ad occhio non ho visto errori

Hai un link da vedere direttamente nel browser?

**giuseppe500** · 31-05-2005, 12:31

si,questo:http://giuseppe500.altervista.org/dummy.html

grazie mille.

**Mich_** · 31-05-2005, 14:43

Ecco alcune cose che mi sono saltate all'occhio.

<div id="macrosezione" class="meta">pippo</div>
ci applichi due CSS:
div#macrosezione
{
background-color:Red;
width:40%;
height:100%;
}
.meta {
width: 45%;
float:left;
margin: 10px;
}
e c'e` una contraddizione: quanto dev'essere width?
===
<div id="macrosezionedet" class="meta">
In questo id ci metti dentro una serie di </p> senza corrispondenti

===
<div id="footer" class="largo">gio</div>
div#footer
{
clear:right;
text-align:center;
padding: 0.5em;
background-color: #69c;
color: #000
}
a che serve un clear:right se non ci metti un float:right da qualche parte?
Poi c'e` anche un clear:both; ma forse e` sovrascritto dalla direttiva piu` specifica (#footer).

Quindi dovresti mettrere a posto tutte queste incongruenze.
Ti potrebbe essere d'aiuto un validatore HTML e CSS:

**giuseppe500** · 11-06-2005, 12:50

ciao.
Ho cercato di mettere a posto il css ma non ci sono riuscito,mi puoi dare qualche altra dritta?
il sito stavolta è:http://giuseppe501.altervista.org/dummy.html
Grazie.

**Mich_** · 13-06-2005, 09:00

Per come la vedo io, i tuoi problemi stanno nel "position" che usi.

Dovresti provare ad eliminare completamente il position nei CSS: infatti tale attributo modifica la sequenza del posizionamento dei blocchi all'interno di altri.

PS: se usi CSS esterni, mettili esterni tutti; quegli style="..." dentro l'HTML stonano (e ti portano fuori strada).

Discussione: box model

Strumenti discussione

Ricerca discussione

Visualizza

box model

Permessi di invio