[CSS] disposizione div

**ALonE** · 11-03-2005, 16:25

Una domanda forse per alcuni semplice ma per me un pò complicata...
ho questo tipo d'impaginazione

codice:

|-----------------------------------|
|           div sup                 |
|-----------------------------------|
|              |                    |
|              |                    |
|   div left   |    div centrale    |
|              |                    |
|              |                    |
|              |                    |
|              |                    |
|              |                    |
|              |                    |
|-----------------------------------|

Come faccio a impostare l'altezza del "div left" e del "div centrale" alla stessa dimensione?
E che questa corrisponda alla differenza tra [altezza "div sup"] e la dimensione della finestra?

muchas gracias

**GunraY** · 11-03-2005, 16:34

per la prima domanda guarda
http://www.html.it/layout_css/layout_css_1.htm
i layout a due colonne sono quelli che ti interessano.
Per la seconda non c'è verso, l'unica cosa che puoi fare è avere un container al 100%, ma le altre colonne, se le metti al 100%, avranno come altezza quella del browser, quindi faranno apparire lo scroll (a causa di div_sup).Il tutto con comportamenti diversi tra ie e mozilla, a causa del box model differentemente interpretato. non ti sbattere con padding e margin, non c'è verso...

**avatar** · 11-03-2005, 19:43

Codice PHP:


<div style="border:1px solid red;width:200px;">Div superiore</div>

<div style="border:0px solid black;width:200px;">

    <span style="border:0px solid bleu;width:48px;">left</span>

    <span style="border:1px solid green;width:148px;">center</span>

</div>

**andrea.paiola** · 11-03-2005, 20:07

Originariamente inviato da avatar

Codice PHP:


<div style="border:1px solid red;width:200px;">Div superiore</div>

<div style="border:0px solid black;width:200px;">

    <span style="border:0px solid bleu;width:48px;">left</span>

    <span style="border:1px solid green;width:148px;">center</span>

</div>

separa il contenuto dalla presentazione
contenuto -> html
layout/grafica -> CSS

**avatar** · 14-03-2005, 11:13

Originariamente inviato da andrea.paiola

separa il contenuto dalla presentazione
contenuto -> html
layout/grafica -> CSS

Lo style e' un css inline

**andrea.paiola** · 14-03-2005, 11:38

ti consiglio di metterlo in un file esterno

**avatar** · 14-03-2005, 11:48

Una soluzione e' quella,
Se lo si vuole mettere in un file esterno come suggerisce andrea.paiola o metterlo inline come ho fatto io o metterlo tra i tag <style></style> nell'intestazione della pagina (interno) e' una scelta di chi sviluppa.
Personalmente sono d'accordo sul mettere i css esterni, io l'ho messo inline per rendere immediata la soluzione a chi ha posto il quesito nulla di + nulla di -.

**ALonE** · 14-03-2005, 12:27

si però il <div centrale> e il <div left> devono esser lunghi quanto tutta la pagina...

ho provato con height = 100% ma "sborda"

**avatar** · 14-03-2005, 12:38

Originariamente inviato da ALonE
si però il <div centrale> e il <div left> devono esser lunghi quanto tutta la pagina...

ho provato con height = 100% ma "sborda"

posta il tuo sorgente

**ALonE** · 14-03-2005, 12:40

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!--[if lt IE 7]>
 <script src="ie7-standard.js" type="text/javascript">
</script>
<![endif]-->
<style type="text/css">
<!--
body{margin: 0;padding:0; font-family: arial,sans-serif;font-size: 76%; text-align: center; background-color:#FFFFFF;}
div#container{position: relative; width: 737px; height:100%; margin: 0 auto; text-align: left;}
/*HEADER*/
div#header{height:162px; width:737px;}
div#logoleft{height:162px; width:218px; position:absolute; left:0px; top:0px;}
div#logotop{height:98px;width:519px;position:absolute;left:218px; top:0px;}
div#menutop{height:22px; width:519px; position:absolute; left:218px; top:98px; background-color:#C3C3C2;
	border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid;
	border-top-color: #ADACAC; border-bottom-color: #ADACAC;}
div#headerempty{height:40px; width:517px; position:absolute; left:218px; top:122px;
	border-right-width: 1px; border-left-width: 1px; border-right-style:dotted; border-left-style: solid;
	border-right-color: #CCCCCC; border-left-color: #CCCCCC;}
div#headerempty2{height:40px; width:506px; position:absolute; left:2px; top:0px;
	border-right-width: 1px; border-left-width: 5px; border-right-style: solid; border-left-style: solid;
	border-right-color: #CCCCCC; border-left-color: #CCCCCC;}
/* Titolo */
div#spacer{width:737px; height:7px; border-top:1px; border-top-style:solid; border-top-color:#ADACAC;}
div#titolo{ width:737px; height:30px; font-size: 11px; color: #F0C2C2; background-color:#CC3333;}
div#titolo table{width:737px; height:100%; margin:0px; padding:0px;}
/* Smart Menu e Testo */
div#main{width:737px; margin:0px; padding:0px;}
div#main table{width:737px; height:100%; margin:0px; padding:0px;}
div#main td#left{background-color:#F3F3F3; width:218px; padding:0px;}
div#main td#spacerR{width:2px; border-left-width: 1px; border-left-style: solid; border-left-color: #CCCCCC;}
div#main td#testo{width:503px; padding:2px 2px 20px;
	border-left-width: 5px;	border-left-style: solid; border-left-color: #CCCCCC;
	border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC;}
div#main td#spacerL{ width:3px; border-right-width: 1px; border-right-style: dotted; border-right-color: #CCCCCC;}
/*Box News*/
div#main table#boxNews{width:210px;	height:220px; margin:15px 0px 15px 0px; padding:0px; border: 1px solid #ADACAC;}
div#main table#boxNews td#titolo{height:17px; text-align:center; color:#FFFFFF; font-size:11px; font-weight:bolder; background-color:#CC3333;}
div#main table#boxNews td#spacer{height:3px; 
	background-color:#ADACAC; border-top-width: 1px; border-top-style: solid; border-top-color: #FFFFFF;}
div#main table#boxNews td#elenco{text-align:center; height:162px; background-color:#FFFFFF;}
div#main table#boxNews td#footer{text-align:left; height:35px; padding:0px 5px; background-color:##DFDFDE;}
div#news{ width:210px; height:162px; overflow: auto;}
/* Elementi di default */
img#spacer{width:1px; height:1px; border:0px;}
-->
</style>
</head>
<body> </body>
<div id="container">
  <div id="header">
    <div id="logoleft">logoleft</div>
    <div id="logotop">logotop</div>
    <div id="menutop">menutop</div>
    <div id="headerempty">
      <div id="headerempty2"></div>
    </div>
  </div>
  <div id="titlespace">
    <div id="spacer">[img]../immagini/spacer_tab.gif[/img]</div>
    <div id="titolo">
      <table cellpadding="0" cellspacing="0">
        <tr>
          <td width="218" valign="bottom" align="center">SmartMenu</td>
          <td bgcolor="#A32929" width="8">[img]../immagini/spacer.gif[/img]</td>
          <td width="506">Titolo</td>
          <td bgcolor="#A32929" width="5">[img]../immagini/spacer.gif[/img]</td>
        </tr>
      </table>
    </div>
  </div>
  <div id="main">
    <table cellpadding="0" cellspacing="0">
      <tr>
        <td id="left" valign="top" align="center">SmartMenu e Box
			<div id="smartMenu">smartMenu</div>
			<table id="boxNews" cellpadding="0" cellspacing="0">
				<tr><td id="titolo">News</td></tr>
				<tr><td id="spacer">[img]../immagini/spacer.gif[/img]</td></tr>
				<tr><td id="elenco"><div id="news">
				asdfasdfasdfa
kjjkjkjk

















				</div></td></tr>
				<tr><td id="footer">
				>Registrati alla Newsletter

				>Cancellati	dalla Newsletter
				</td></tr>
			</table>
		</td>
        <td id="spacerR">[img]../immagini/spacer.gif[/img]</td>
        <td id="testo" valign="top">

Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo</p></td>
        <td id="spacerL">[img]../immagini/spacer.gif[/img]</td>
      </tr>
    </table>
  </div>
</div>
</body>
</html>

Discussione: [CSS] disposizione div

Strumenti discussione

Ricerca discussione

Visualizza

[CSS] disposizione div

Permessi di invio