Tabelle e background

**Zlatan94** · 11-07-2009, 17:13

Salve a tutti.
Ho il seguente codice nella pagina index.php

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>You Affiliate</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
body {
	text-align: center;
	margin: 0 auto;
	background-color:#0099FF
}
-->
</style></head>

<body>
<div id="header">
<div id="logo"></div>
</div>
<div id="menu">
 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <td width="20%" height="40" style="background-image: url(img/pulsante.jpg)">Homepage</td>
 </table>
</div>
</body>
</html>

e questo nello style.css

codice:

#header {
	background-color: #0269d1;
	width: 100%;
	height: 95px;
}
#logo {
	background-image: url(img/logo.png);
	background-repeat: no-repeat;
	float:left;
	height: 95px;
	width: 300px;
}
#menu {
	height: 40px;
	width: 100%;
	color:#FFFFFF;
	font-weight:bold;
	float:left;
}

Il mio problema è il menu. Perchè con solo questo td:

codice:

<td width="20%" height="40" style="background-image: url(img/pulsante.jpg)">Homepage</td>

Si riempie la pagina? E la scritta homepage, che dovrebbe essere sul primo è al centro.

La pagina è QUESTA

COme faccio a poter inserire una voce per ogni td senza che si rovini tutto?

**grandeorco** · 11-07-2009, 17:20

intanto ti do un consiglio, sforzati ad usare solo i div e poi per il tuo codice mi pare che manchi <tr>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="20%" height="40" style="background-image: url(img/pulsante.jpg)">Homepage</td>
</tr>
</table>

**Zlatan94** · 11-07-2009, 17:21

Con i div come si tradurrebbe? CIoe in termini di codice

**loop** · 11-07-2009, 17:59

Originariamente inviato da Zlatan94
Con i div come si tradurrebbe? CIoe in termini di codice

Ecco come!

codice:

<!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>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">

<!--
.sfondo {
	background-image: url(pulsante.jpg);
}
--></style>
		<style type="text/css">.div-1 {
	border: none;
	text-align: left;
	width: 961px;
}

.div-1-1 {
	border: none;
	clear: both;
	float: left;
	line-height: 19px;
	padding: 0px;
	width: 138px;
}

.div-1-2 {
	border: none;
	float: left;
	line-height: 19px;
	padding: 0px;
	width: 138px;
}

.div-1-3 {
	border: none;
	float: left;
	line-height: 19px;
	padding: 0px;
	width: 137px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div class="sfondo div-1-1">Menu1</div>
			<div class="sfondo div-1-2">Menu2</div>
			<div class="sfondo div-1-3">Menu3</div>
			<div class="sfondo div-1-3">Menu4</div>
			<div class="sfondo div-1-3">Menu5</div>
			<div class="sfondo div-1-3">Menu6</div>
			<div class="sfondo div-1-3">Menu7</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

Per i menu però sarebbe meglio usare le liste

**Zlatan94** · 11-07-2009, 18:04

Grazie
Ecco il risultato
GUARDA

Vorrei che fosse largo al 100% pero...

**Zlatan94** · 11-07-2009, 18:15

Ecco, ora sarebbe perfetto per la 1024x768, ma se uno ha la 1280x1024 il menu diventa cortissimo. Dovrei usare le percentuali?

**loop** · 11-07-2009, 18:24

codice:

<!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>Documento senza titolo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<style type="text/css">

<!--
.sfondo {
	background-image: url(pulsante.jpg);
}
--></style>
		<style type="text/css">.div-1 {
	border: none;
	text-align: left;
	width: 981px;
}

.div-1-1 {
	border: none;
	clear: both;
	float: left;
	line-height: 19px;
	padding: 0px;
	text-align: center;
	width: 148px;
}

.div-1-2 {
	border: none;
	float: left;
	line-height: 19px;
	padding: 0px;
	text-align: center;
	width: 147px;
}

.div-1-7 {
	border: none;
	float: left;
	line-height: 19px;
	padding: 0px;
	text-align: center;
	width: 98px;
}
</style>
	</head>
	<body>
		<div class="div-1">
			<div align="center" class="sfondo div-1-1">menu1</div>
			<div align="center" class="sfondo div-1-2">menu2</div>
			<div align="center" class="sfondo div-1-2">menu3</div>
			<div align="center" class="sfondo div-1-2">menu4</div>
			<div align="center" class="sfondo div-1-2">menu5</div>
			<div align="center" class="sfondo div-1-2">menu6</div>
			<div align="center" class="sfondo div-1-7">menu7</div>
			<div style="clear: both;"></div>
		</div>
	</body>
</html>

Ecco così è 100% per 1024
se vuoi altre risoluzioni devi usare le percentuali, ma attenzione che se uno non ha dimestichezza viene fuori solo delle porcherie

**Zlatan94** · 11-07-2009, 18:25

Con le percentuali come verrebbe il codice?

**loop** · 11-07-2009, 18:28

Non te lo propongo perchè rischiamo di impantanarci, prova tu a togliere le misure fisse e sostituirle con le percentuali

**Zlatan94** · 11-07-2009, 18:30

Tu mi consigli di usare una grandezza fissa?

Discussione: Tabelle e background

Strumenti discussione

Ricerca discussione

Visualizza

Tabelle e background

Permessi di invio