Ciao ..
Sul manuale css layout si scrive che l'uso delle '2 colonne a valore assoluto' è limitato ai soli casi in cui la colonna navigazione (a dx) sia più corta della colonna dei contenuti, salvo problemi con il 'piede' della pagina ..
Facendo delle prove ho però visto che il problema sarebbe superabile se sulla colonna dei contenuti viene indicato (in 'em' .. per eventuali cambi di font del browser) la lunghezza (height).
Che problemi potrebbe procurare questa tecnica ?
Grazie mille
ah .. ne approfitto per chiedere un'altra cosetta .. :-)
c'è per piacere qualcuno che mi spiega per benino la differenza tra le 2 proprietà "position:relative" e "position:absolute;" ??
Nell'esempio del Layout a 2 colonne 'fisse' vengono usate in questo modo:
box contenitore:
#container{position:relative;
....}
box navigazione (a dx):
#navigation{position:absolute;
top: 80px;
right: 0;
.....}
Grazie mille
Vedi se questi link fanno al caso tuo. Ma se non li capisci, devi approfondire le basi del posizioanmento (in un tutorial CSS):
I posizionamenti assoluti
Capire i posizionamenti relativi
Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
No domande tecniche in messaggi privati
grazie mille ..
dando una letta veloce non ho capito molto ..(sopratutto per l'assoluto)
cecherò di rileggere il tutto con più calma.
Avrei un'altro problemino riguardo alle 2 colonne (però fluide) ..
dato che una prerogativa è quella che le stampe siano già corrette .. ho fatto una provetta .. e ho notato che la stampa non mi funziona correttamente se pongo il testo del corpo 'giustificato' ..
#content p{text-align: justify;}
qualcuno mi sa dire come rimediare ??
Grazie
esempio:
----------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Selettore semplice</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="sel_type.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<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">
/*stili per il layout fisso*/
html,body{margin: 0;padding:0}
body{font-family: arial,sans-serif;font-size: 76%;text-align: center; }
#container{
margin: 0 auto;
text-align: left;
border-left: 2px solid #36c;
border-right: 2px solid #36c;
background: url(rightcol.jpg) repeat-y top right}
#container h1{padding-left:0.5em;
font: bold 2.3em/80px arial,serif;
margin: 0;padding:0;}
/*stili generici, su header*/
#header{background-color:#36C;color: #ff0}
/*stili specifici per il layout*/
#content{margin-right: 200px;padding: 1em;
background-color: #fff}
#content h2{color: #999;
font-size: 1.5em;
margin: 0;
padding:0; }
#content p{text-align: justify;}
#navigation{float:right;width: 180px;
margin-top: 5px;
margin-left: 7px;
overflow: auto; }
#navigation ul{margin: 1em;padding: 0; list-style-type: none;}
#navigation li{margin: 0;padding: 0}
#navigation a{color:#369;font: normal bold 1.2em/1.6em arial,sans-serif;text-decoration: none}
#navigation a:hover{color: #033;text-decoration: underline}
#navigation a#activelink{color: #033;text-decoration: none}
/*stili generici, su footer*/
#footer{clear:right; text-align:center; padding: 0.5em;
background-color: #69c; color: #000}
#footer a{color: #fff;font-weight: bold;text-decoration: underline}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Html.it</h1>
</div>
<div id="navigation">
<ul>[*]Home[*]Pillole[*]Contenuti[*]Grafica[*]Linguaggi[*]Webdesign[*]Software[/list]
</div>
<div id="content">
<h2>Layout a due colonne con posizionamenti assoluti</h2>
Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni
rispetto all' analogo con i float. Questi sono l' accessibilità e delle migliori chanche di
indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio insuperabile: non consente di
avere la colonna di navigazione più lunga della colonna dei contenuti. Se siamo disposti a questa
condizione, a parer mio il layout con posizionamenti assoluti è da preferire.</p>
Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni
rispetto all' analogo con i float. Questi sono l' accessibilità e delle migliori chanche di
indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio insuperabile: non consente di
avere la colonna di navigazione più lunga della colonna dei contenuti. Se siamo disposti a questa
condizione, a parer mio il layout con posizionamenti assoluti è da preferire.</p>
Il layout a due colonne con posizionamenti assoluti presenta dei significati vantaggi esterni
rispetto all' analogo con i float. Questi sono l' accessibilità e delle migliori chanche di
indicizzazione e posizionamento sui motori di ricerca. Ha però uno svantaggio insuperabile: non consente di
avere la colonna di navigazione più lunga della colonna dei contenuti. Se siamo disposti a questa
condizione, a parer mio il layout con posizionamenti assoluti è da preferire.
</p>
</div>
<div id="footer">© 1997-2004 - Grafica, layout e guide sono di esclusiva proprietà di HTML.it s.r.l.
Note e informazioni legali</div>
</body>
</html>
Permessi di invio
Rispondi quotando