Da Tabella a Div

**naruto_qazxsw** · 12-05-2013, 13:24

Salve, ho fatto questa cosa con le tabelle e vorrei rifarla coi div+css ma non so come fare, qualcuno riuscirebbe a darmi una mano per favore?

codice:

<div id="maincolumn" style="float:left"> <div id="latest">  <table width="100%%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col" >[img]images/main_column_up.png[/img]</th> </tr> <tr> <th align="center" class="main_column_center_title"> <p class="main_menu_title">Deshiadda Voice Chat</p> </th> </tr> <tr> <td align="center" class="main_column_center" > <table width="100%%" border="0" cellspacing="0" cellpadding="0"> <tr> <th width="30" scope="col"></th> <th scope="col">

[img]images/deshiadda_flashchat.jpg[/img]</p></th> <th width="22" scope="col"></th> </tr> </table> </td> </tr> <tr> <td align="center" >[img]images/main_column_down.png[/img]</td> </tr> </table>  
  <table width="100%%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col" >[img]images/main_column_up.png[/img]</th> </tr> <tr> <th align="center" class="main_column_center_title"><p class="main_menu_title">Ads by Google</p></th> </tr> <tr> <td align="center" class="main_column_center" > <table width="100%%" border="0" cellspacing="0" cellpadding="0"> <tr> <th width="30" scope="col"></th> <th scope="col"> 

 <script type="text/javascript">  </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script> </p> </th> <th width="22" scope="col"></th> </tr> </table> </td> </tr> <tr> <td align="center" >[img]images/main_column_down.png[/img]</td> </tr> </table>  
  <table width="100%%" border="0" cellspacing="0" cellpadding="0"> <tr> <th scope="col" >[img]images/main_column_up.png[/img]</th> </tr> <tr> <th align="center" class="main_column_center_title"><p class="main_menu_title">Deshiadda Natok!</p></th> </tr> <tr> <td align="center" class="main_column_center" > <table width="100%%" border="0" cellspacing="0" cellpadding="0"> <tr> <th width="30" scope="col"></th> <th scope="col">

[img]images/natok_logo.jpg[/img]</p></th> <th width="22" scope="col"></th> </tr> </table> </td> </tr> <tr> <td align="center" >[img]images/main_column_down.png[/img]</td> </tr> </table>  
 </div> </div>

In allegato metto graficamente a cosa dovrebbe corrispondere questo codice:

**ac_socmel** · 12-05-2013, 14:44

aspettando che qualcuno ti faccia il piacere

al tuo posto mi porterei avanti col lavoro e comincerei a studiare http://www.html.it/css/guide/

**naruto_qazxsw** · 12-05-2013, 15:15

Il fatto é che questa guida l'ho gia vista... le cose scritte nella guida le capisco okey, ma non riesco comunque a produrre un css da 0... boh, non so perché...

Comunque grazie mille per la risposta...

**carlomarangoni** · 12-05-2013, 16:20

Prova così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Documento senza titolo</title>
		<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style type="text/css">.div-1 {
	border: none;
	height: 11.31em;
	text-align: left;
	width: 61.31em;
}

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

.div-1-2 {
	border: none;
	clear: both;
	float: left;
	height: 1.19em;
	padding: 0px;
	width: 61.31em;
}

.div-1-3 {
	border: none;
	clear: both;
	float: left;
	height: 9.00em;
	padding: 0px;
	width: 61.31em;
}

.div-2 {
	border: none;
	height: 9.00em;
	text-align: left;
	width: 61.31em;
}

.div-2-1 {
	border: none;
	clear: both;
	float: left;
	height: 9.00em;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width: 1.88em;
}

.div-2-2 {
	border: none;
	float: left;
	height: 9.00em;
	padding: 0px;
	width: 58.06em;
}

.div-2-3 {
	border: none;
	float: left;
	height: 9.00em;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width: 1.38em;
}

.div-3 {
	border: none;
	height: 2.38em;
	text-align: left;
	width: 61.31em;
}

.div-3-3 {
	border: none;
	clear: both;
	float: left;
	height: 0.06em;
	padding: 0px;
	width: 61.31em;
}

.div-4 {
	border: none;
	height: 0.06em;
	text-align: left;
	width: 61.31em;
}

.div-4-1 {
	border: none;
	clear: both;
	float: left;
	height: 0.06em;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width: 35.38em;
}

.div-4-2 {
	border: none;
	float: left;
	height: 0.00em;
	padding: 0px;
	width: 0.00em;
}

.div-4-3 {
	border: none;
	float: left;
	height: 0.06em;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width: 25.94em;
}

.div-5 {
	border: none;
	height: 9.25em;
	text-align: left;
	width: 61.31em;
}

.div-5-3 {
	border: none;
	clear: both;
	float: left;
	height: 6.94em;
	padding: 0px;
	width: 61.31em;
}

.div-6 {
	border: none;
	height: 6.94em;
	text-align: left;
	width: 61.31em;
}

.div-6-1 {
	border: none;
	clear: both;
	float: left;
	height: 6.94em;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width: 1.88em;
}

.div-6-2 {
	border: none;
	float: left;
	height: 6.94em;
	padding: 0px;
	width: 58.06em;
}

.div-6-3 {
	border: none;
	float: left;
	height: 6.94em;
	overflow: hidden;
	padding: 0px;
	text-align: center;
	width: 1.38em;
}
</style>
	</head>
	<body>
		<div id="maincolumn" style="float: left;">
			<div id="latest">
				
				<div class="div-1">
					<div class="div-1-1">[img]file:///C:/Users/Max/Desktop/images/main_column_up.png[/img]</div>
					<div align="center" class="main_column_center_title div-1-2">
						<p class="main_menu_title">Deshiadda Voice Chat</p>
					</div>
					<div align="center" class="main_column_center div-1-3">
						<div class="div-2">
							<div class="div-2-1"></div>
							<div class="div-2-2">
								

[img]file:///C:/Users/Max/Desktop/images/deshiadda_flashchat.jpg[/img]</p>
							</div>
							<div class="div-2-3"></div>
							<div style="clear: both;"></div>
						</div>
					</div>
					<div align="center" class="div-1-1">[img]file:///C:/Users/Max/Desktop/images/main_column_down.png[/img]</div>
					<div style="clear: both;"></div>
				</div>
				
				

				
				<div class="div-3">
					<div class="div-1-1">[img]file:///C:/Users/Max/Desktop/images/main_column_up.png[/img]</div>
					<div align="center" class="main_column_center_title div-1-2">
						<p class="main_menu_title">Ads by Google</p>
					</div>
					<div align="center" class="main_column_center div-3-3">
						<div class="div-4">
							<div class="div-4-1"></div>
							<div class="div-4-2">
								

<script type="text/javascript">
  </script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
 </script></p>
							</div>
							<div class="div-4-3"></div>
							<div style="clear: both;"></div>
						</div>
					</div>
					<div align="center" class="div-1-1">[img]file:///C:/Users/Max/Desktop/images/main_column_down.png[/img]</div>
					<div style="clear: both;"></div>
				</div>
				
				

				
				<div class="div-5">
					<div class="div-1-1">[img]file:///C:/Users/Max/Desktop/images/main_column_up.png[/img]</div>
					<div align="center" class="main_column_center_title div-1-2">
						<p class="main_menu_title">Deshiadda Natok!</p>
					</div>
					<div align="center" class="main_column_center div-5-3">
						<div class="div-6">
							<div class="div-6-1"></div>
							<div class="div-6-2">
								

[img]file:///C:/Users/Max/Desktop/images/natok_logo.jpg[/img]</p>
							</div>
							<div class="div-6-3"></div>
							<div style="clear: both;"></div>
						</div>
					</div>
					<div align="center" class="div-1-1">[img]file:///C:/Users/Max/Desktop/images/main_column_down.png[/img]</div>
					<div style="clear: both;"></div>
				</div>
				
				

			</div>
		</div>
	</body>
</html>

Però se la prossima volta non posti il codice indentato in modo che non si diventi scemo a leggerlo io non prenderò più in considerazione la tua richiesta

**naruto_qazxsw** · 12-05-2013, 17:01

Mi dispiace moltissimo per il codice non indentato, sono veramente dispiaciuto... E grazie 1000 per l'aiuto...

Discussione: Da Tabella a Div

Strumenti discussione

Ricerca discussione

Visualizza

Da Tabella a Div

Boh

Permessi di invio