tabelle e CSS: disperazione totale

**frodo_jedi** · 22-07-2005, 18:18

Help!!
Non riesco ad ottenere una tabella come voglio io, mi si creano bordi inattesi (nonostante abbia posto OVUNQUE padding, margin e border pari a 0px).
Quando poi inserisco delle immagini il guaio è ancora più rilevante perchè (come è noto) le colonne si adeguano alle immagini tralasciando di seguire le dimensioni prestabilite.

Vi invio il codice e in allegato una immagine (che si troverebbe in una cartella dal nome IMG).

Se potete datemi una mano perchè ormai sono a livello di disperazione...

Vi ringrazio.

A presto!

File stile_header.CSS (che si trova nella cartella CSS):

codice:

/*body*/
body{	margin: 0px;
	padding: 0px;
	/*font-size: 76%;*/
	background: url(../IMG/matt.gif);
	background-repeat: repeat;
	}
	
/*header*/
#header{
	margin: 0px 0px;
	padding: 0px 0px;
	border-bottom-style:solid;/*creo una linea orizzontale che 
	divide l'header dal content*/
	border-bottom-width:4px;
	border-bottom-color:#ccc;
	/*background-color : #66990F;*/
	/*background: url(../IMG/colore_header.jpg);
	background-repeat: repeat;*/
	
	/*height: 80px;NOTA: l'altezza la definisco nelle proprieta' 
	della tabella*/
	}

#header img{
	border: 0px;
	margin:0px;
	padding:0px;
	}


#header table.extern_table{
	margin: 0px;
	padding: 0px;
	border: 0px;
	/*height: 90px;NOTA:NON METTERLO QUI!!!*/
	}	
	
	
#table_menu{
	margin: 0px;
	padding: 0px;
	border: 10px;	
	/*background-color : #6699FF;
	color: gray;*/	
	}

	
/*menu dell'header*/
#table_menu td.menu_header{
	margin: 0px 0px 0px 0px;
	padding:0px 0px;
	border :0px;
	
	/*border-style:solid;
	border-width:10px;
	border-color:#ccc;	*/
	
	/*width: 50px;
	height: 30px;*/
	text-align: center;
 	font-family: Verdana, Arial, sans-serif,Helvetica,Geneva;
 	font-size: 15px; 
	background-color : #6699FF;
	color: black;
	}


/*	
#table_menu tr.tr_menu_header{
	margin: 0px 0px 0px 0px;
	padding:0px 0px;
	border:0px;
	width: 50px;
	height: 50px;
	text-align: center;
 	font-family: Verdana, Arial, sans-serif,Helvetica,Geneva;
 	font-size: 15px; 
	background-color : #6699FF;
	color: black;
	}*/
	
#table_menu td.menu_header:hover,
#table_menu td.over/*NOTA: fare controllo: se siamo gia' 
in una pagina allora non evidenzio nulla perche' il menu' 
deve avere un colore diverso dagli altri*/
{ background-color: #add8e6 }
	

/* a: del menu dell'header */
#table_menu td a:link {
	text-decoration: none; 
	font-weight: bold;
	color: black
	}
#table_menu td a:visited {
	text-decoration: none; 
	font-weight: bold;
	color: black
	}    
#table_menu td a:hover {
	margin: 0px 0px;
	padding: 0px 0px;
 	text-decoration: underline; 

	}
#table_menu td a:active {
	text-decoration: underline; 
	}
	
	

	
	
#bandiere {
	margin: 0px;
	padding: 0px;
	border: 0px;	
	float:right;
	}	
	
#bandiere td.td_bandiere{
	margin: 0px;
	padding: 8px 4px;/*determina l'altezza della colonna*/
	border: 0px;	
	}

File header.html (che si trova nella cartella HTML):

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Header</title>
<LINK href="../CSS/stile_header.css" rel="stylesheet" type="text/css">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
</head>

<body>

<div id="header" >	

	<table width="100%" cellspacing="0" cellpadding="0" class="extern_table">
		
		<tr > 
			
			<td  style="width:30%" rowspan="2">
				[img]../IMG/trinosofia3.jpg[/img]	
			</td>
			
			
			<td style="width:50%;background: url(../IMG/colore_header.jpg);
	background-repeat: repeat;">
			 
			</td>
			
			<td style="width:20%;background: url(../IMG/colore_header.jpg);
	background-repeat: repeat;" > 
				<table  cellspacing="0" cellpadding="0" id="bandiere" >
				<tr > 
					<td class="td_bandiere">
						[img]../IMG/it-flag.gif[/img]
					</td>
					<td class="td_bandiere">
						[img]../IMG/en-flag.gif[/img]
					</td>
					<td class="td_bandiere">
						[img]../IMG/de-flag.gif[/img]
					</td>
					<td class="td_bandiere">
						[img]../IMG/fr-flag.gif[/img]
					</td>
					<td class="td_bandiere">
						[img]../IMG/es-flag.gif[/img]
					</td>
				</tr>
				</table>							
			</td>
		</tr>
		
		<tr> 			
			<td style="width:50%;border:0px;margin:0px;padding:0px;">
					
				<table width="100%" id="table_menu">
				<tr >
					<td class="menu_header">
						L'associazione
					</td>
					<td class="menu_header">
						Attivit&agrave
					</td>
					<td class="menu_header">
						Repertorio
					</td>
					<td class="menu_header">
						Galleria
					</td>		
					<td class="menu_header">
						News
					</td>		
					<td class="menu_header">
						Contatti
					</td>			
					<td class="menu_header">
						Mappa sito
					</td>							
				</tr>
				</table>	
			</td>	
			
			<td style="width:20%;">
			</td>
		</tr>
	</table>
</div>
</body>
</html>

**Iena87** · 22-07-2005, 18:21

ma scusa perchè complicarti la vita a gestire tabelle immense coi css (che è difficile) e non usare i css appunto per il layout?

un paio di div e liste e risolvi....

**frodo_jedi** · 22-07-2005, 19:54

Semplicemente perchè non ho ancora capito una cosa del layout con il CSS: come cavolo si fanno le colonne?

So che posso impostare un div largo tot pixel, ma come faccio a mettere due div adiacenti sulla stessa riga?(e magari uno contiene un'immagine e l'altro dei menu'?).

Poi ho provato ad usare un menu' fatto con i tag ul e li, ma quando restringo la finestra ottengo che i menu' non restano su un'unica riga ma si dispongono su righe diverse. Come si fa ad evitare questo effetto?

Potresti mandarmi un'idea (almeno lo schema del codice)
di quello che volevo fare con le tabelle?

Ti ringrazio!

**Iena87** · 22-07-2005, 20:08

Innanzitutto ti posto un link utilissimo di questo stesso sito : http://www.html.it/layout_css/ dove troverai altri miliardi di link per capire come fare layout con i css....

Facciamo che vuoi una struttura con un header per il banner, un menù di navigazione orizzontale, un menù a sx, ilcontenuto a dx e il footer sotto per i copyright...

il codice (x)html sarebbe questo:

codice:

 <div id="contenitore">    
  <div id="header"> Qui ci va il mio header </div>
  

  <div id="orizzontale>    
      <ul>[*]Home[*]Galleria  [*]Contatti[/list]
  </div>

  <div id="contenuto"> Qui il contenuto </div>

  <div id="menu">
     <ul>[*]Home[*]Galleria[*]Contatti[/list]
  </div>

  <div id="footer"> Copyright </div>

</div>

Poi nel css, in base al tipo di layout che vuoi fare (fisso,fluido ecc) scegli se usare i float per spostare il menù a sinistra e il contenuto a destra ecc....
insomma è lungo come discorso, vedi il link e trovi le tue risposte

**frodo_jedi** · 23-07-2005, 12:39

Ti ringrazio per esser stato così gentile,
il link lo avevo studiato e anche molto bene!

Il fatto è che voglio inserire il menu' orizzontale NELL'HEADER a fianco del logo (e non sotto!!) .
In particolare voglio dividere l'header in 3 parti una per il logo, una per il menu' e una per la parte destra dove metto le bandiere per la scelta della lingua.

Per fare questo ho bisogno di suddividere l'header in colonne,
ma come si fa?
Con le liste? Cioè usare una lista esterna dove collocare i vari div (e mettere nel CSS li {display: inline})?

Oppure c'è un modo più furbo?E se sì quale? Tu come faresti?

A presto!

**Iena87** · 23-07-2005, 12:56

mmmmmm....dunque, nell'header crei altri tre div, ed ad ognuno di essi dai la proprietà float:left...prova e vedi se funziona

**frodo_jedi** · 23-07-2005, 13:04

No,
purtroppo non funziona. Ho provato a mettere sia display :inline sia float:left, ma nulla da fare.
Non sai proprio come si fa a posizionare un menu' sulla stessa linea di quella dove si trova un'immagine?

**Iena87** · 23-07-2005, 13:18

Originariamente inviato da frodo_jedi
No,
purtroppo non funziona. Ho provato a mettere sia display :inline sia float:left, ma nulla da fare.
Non sai proprio come si fa a posizionare un menu' sulla stessa linea di quella dove si trova un'immagine?

allora...l'header tuo dovrebbe essere il seguente:

codice:

<div id="header">

<div id="hlogo">[img]logo.gif[/img]</div>
<div id="hmenu">
   <ul>[*]home[*]Galleria[*]contatti[/list]
</div>
<div id="hbandiere"> Qua dipende da come lo vuoi strutturare tu</div>

</div>

Poi il .css dovrebbe essere:

codice:

#header {
padding : 0;
}

#hlogo {
width : 100px; /* le dimensioni le definisic tu */
float : left;
}

#hlogo img {
padding-left : 10px;
}

#hmenu {
width : 200px;
float : left;
}

#hmenu ul {
display : inline;
margin : 0;
padding :0;
}

#hmenu ul li {
display : inline;
list-style : none;
}

#hbandirere {
width : 150px;
float : left;
}

è importante che tu dichiari una dimensioni per i div a cui applichi un float

**frodo_jedi** · 23-07-2005, 13:40

Neanche cos' non funziona!
Però ho trovato la soluzione: basta usare position: absolute (o relative).

Così funziona tu cosa ne pensi?

**Iena87** · 23-07-2005, 14:24

Originariamente inviato da frodo_jedi
Neanche cos' non funziona!
Però ho trovato la soluzione: basta usare position: absolute (o relative).

Così funziona tu cosa ne pensi?

dando position:relative ai tre div dell'header???

mmm nn ci avevo pensato...quindi funziona così?

Discussione: tabelle e CSS: disperazione totale

Strumenti discussione

Ricerca discussione

Visualizza

tabelle e CSS: disperazione totale

Ciao Iena87 grazie per avermi risposto

Permessi di invio