Proprietà posizionamento div

[Sonikag]

Secondo me la risposta me la sono data da sola nel titolo, vediamo se ci ho preso :P

Sto creando una rubrica telefonica, nel primo div ho messo un menù, nel secondo ci andranno i numeri di telefono della rubrica.
Vorrei che questi div stessero attaccati, ho risolto in questo modo, ma non mi piace, avete idee migliori?
/*menu*/
div#menu{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
margin: 0px;
color: #000000;
font-weight: bolder;
vertical-align: middle;
text-align: center;
padding: 0px;
clear: both;}

div#menu ul{
list-style-type: none;
margin: 0;
padding: 0;}

div#menu li{
margin: 0;
padding:0;
float: left;}

div#menu a{
display: block;
width: 100px;
text-decoration: none;
color: #000000;
text-align: center;
padding: 3px;
background-color: #F0F0FF;}

div#menu a:hover{
color: #B9661B;
padding: 3px;
background-color: #FFFFFF;
border: #FFFFFF;
margin: 0px;}

div#menu li#activelink a,div#menu li#activelink a:hover{
color: #B9661B;
padding: 3px;
background-color: #FFE6E6;
margin: 0px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFC1C1;
border-right-color: #FFC1C1;
border-left-color: #FFC1C1;}
/*contenuto*/
.contenuto {
font-size: 0.9em;
background-color: #FFE6E6;
border-right: 1px solid #FFC1C1;
border-bottom: 1px solid #FFC1C1;
border-left: 1px solid #FFC1C1;
margin: 0px;
padding: 6px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFC1C1;}

---

<div id="menu">
<ul>
<li id="activelink"><a href="default.asp">CERCA
NUMERO</a>[*]AGGIUNGI NUMERO[*]MODIFICA NUMERO[/list]
</div>




<div class="contenuto">


RUBRICA</p>
Scegli lettera:
</div>

C'è un modo (sicuramente) per evitare i due br?

[Francis87]

Originariamente inviato da Sonikag

div#menu{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	margin: 0px 0px 20px 0px;
	color: #000000;
	font-weight: bolder;
	vertical-align: middle;
	text-align: center;
	padding: 0px;
	clear: both;}

div#menu ul{
	list-style-type: none;
	margin: 0;
	padding: 0;}

div#menu li{
	margin: 0;
	padding:0;
	float: left;}

div#menu a{
	display: block;
	width: 100px;
	text-decoration: none;
	color: #000000;
	text-align: center;
	padding: 3px;
	background-color: #F0F0FF;}

div#menu a:hover{
	color: #B9661B;
	padding: 3px;
	background-color: #FFFFFF;
	border: #FFFFFF;
	margin: 0px;}

div#menu li#activelink a,div#menu li#activelink a:hover{
	color: #B9661B;
	padding: 3px;
	background-color: #FFE6E6;
	margin: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #FFC1C1;
	border-right-color: #FFC1C1;
	border-left-color: #FFC1C1;} 
/*contenuto*/
.contenuto {
	font-size: 0.9em;
	background-color: #FFE6E6;
	border-right: 1px solid #FFC1C1;
	border-bottom: 1px solid #FFC1C1;
	border-left: 1px solid #FFC1C1;
	margin: 0px;
	padding: 6px;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #FFC1C1;}

---

<div id="menu"> 
  <ul>
    <li id="activelink"><a href="default.asp">CERCA 
 NUMERO</a>[*]AGGIUNGI NUMERO[*]MODIFICA NUMERO[/list]
</div>


<div class="contenuto"> 


RUBRICA</p>
Scegli lettera:
</div>

[Sonikag]

Ok, grazie fra e anche questo è risolto

Adesso c'è il problema 2...
Nel <div class="contenuto"> ho inserito un altro menu:

div#alfabeto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
font-weight: bolder;
margin: 6px;
text-align: center;
clear: both;}
div#alfabeto ul {
list-style-type: none;
margin: 0;
padding: 0;}
div#alfabeto li {
margin: 0;
padding:0;
float: left;}
div#alfabeto a {
display: block;
width: 30px;
text-decoration: none;
color: #000000;
text-align: center;
padding: 3px;
background-color: #FFF4F4;
margin: 3px;}
div#alfabeto a:hover{
color: #990000;
padding: 3px;
background-color: #FFFFFF;
border: #FFFFFF;
margin: 3px;}
div#alfabeto li#activelink2 a,div#alfabeto li#activelink2 a:hover{
color: #B9661B;
padding: 3px;
background-color: #00FF00;
margin: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFC1C1;
border-right-color: #FFC1C1;
border-left-color: #FFC1C1;

---

<div class="contenuto">

<div id="alfabeto">
<ul>
[*]A
[*]B
...
[*]Y
[*]Z
[/list]
</div></div>

---

Vorrei che contenuto prendesse l'altezza di alfabeto, ma non lo fa

[Jerry Masslo]

inserisci questo prima della chiusura di contenuto:

<div style="clear:both" ></div>


non vorrei allarmarti ma con altri browser il tuo menù non sembra a postissimo.

[Sonikag]

effettivamente si vede correttamente solo su explorer, per ora mi va bene, l'importante è che si vedano i contenuti, sarà una rubrica ad uso interno, anche se i miei titolari lavorano su linux e quindi utilizzano mozilla o firefox per ora va bene lo stesso!

Ho provato a mettere clear both sia in div#alfabeto che in contenuto ma nulla

Sonia

[Jerry Masslo]

Originariamente inviato da Sonikag
effettivamente si vede correttamente solo su explorer, per ora mi va bene, l'importante è che si vedano i contenuti, sarà una rubrica ad uso interno, anche se i miei titolari lavorano su linux e quindi utilizzano mozilla o firefox per ora va bene lo stesso!

Ho provato a mettere clear both sia in div#alfabeto che in contenuto ma nulla

Sonia

che ti devo dire a me funzionava, l'hai messo, tutto il div non dare il clear both a un elemento che già hai, prima del tag di chiusura di #contenuto?

[Sonikag]

Funziona grazie mille
Quando ho gli elementi per proseguire il lavoro mi sa che avrò altri problemi... Voglio provare a mettere gli output di ASP tra div anzichè intabellarli, prevedo ingarbugliamenti

Sonia

[Jerry Masslo]

Originariamente inviato da Sonikag
Funziona grazie mille
Quando ho gli elementi per proseguire il lavoro mi sa che avrò altri problemi... Voglio provare a mettere gli output di ASP tra div anzichè intabellarli, prevedo ingarbugliamenti

Sonia

Capita anche che sia più semplice invece perché strutturando i div in modo appropriato coi float se ne vanno a capo buoni buoni senza dover organizzare tabelle righe e ammennicoli vari.

[Sonikag]

Imparerò a dialogare con i css???

Il problema che ora mi si pone è questo!

<body>
<div class="box">
<div id="menu">
<ul>
<li id="activelink"><a href="default.asp">CERCA
NUMERO</a>[*]AGGIUNGI NUMERO[*]MODIFICA NUMERO[/list]
</div><div style="clear:both"></div>
<div class="contenuto">
<div id="alfabeto">
<ul>
[*]A
[*]B
[*]C
[*]D
[*]E
[*]F
[*]G
[*]H
[*]I
[*]J
[*]K
[*]L
[*]M
[*]N
[*]O
[*]P
[*]Q
[*]R
[*]S
[*]T
[*]U
[*]V
[*]W
[*]X
[*]Y
[*]Z
[/list]
</div> <div style="clear:both"></div>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
</div>
</div>
</body>

---

body{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
height: 100%;
margin: 0px;
padding: 0px;
background-color: #FFFFE8;
text-align: center;
}

.box {
font-size: 0.9em;
margin: 1.5em;
}

.contenuto {
font-size: 0.9em;
background-color: #FFE6E6;
border-right: 1px solid #FFC1C1;
border-bottom: 1px solid #FFC1C1;
border-left: 1px solid #FFC1C1;
margin: 0px;
padding: 6px;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #FFC1C1;}
div#alfabeto {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
color: #000000;
font-weight: bolder;
margin: 6px;
text-align: center;}
div#alfabeto ul {
list-style-type: none;
margin: 0;
padding: 0;}
div#alfabeto li {
margin: 0;
padding:0;
float: left;}
div#alfabeto a {
display: block;
width: 30px;
text-decoration: none;
color: #000000;
text-align: center;
padding: 3px;
background-color: #FFF4F4;
margin: 3px;}
div#alfabeto a:hover{
color: #990000;
padding: 3px;
background-color: #FFFFFF;
border: #FFFFFF;
margin: 3px;}
div#alfabeto li#activelink2 a,div#alfabeto li#activelink2 a:hover{
color: #B9661B;
padding: 3px;
background-color: #00FF00;
margin: 3px;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-color: #FFC1C1;
border-right-color: #FFC1C1;
border-left-color: #FFC1C1;
}

---

Allora alfabeto eredita le proprietà di box ma non di contenuto, why?
Se ridimensiono la pagina mi ritrovo le caselline con le lettere che sbordano da "contenuto" why?

[Sonikag]

Up!!!