Da tabella a css

**naruto_qazxsw** · 04-09-2011, 13:39

Allora, sto rifacendo da capo questo sito che avevo sviluppato usando le tabelle, adesso sto cercando di usare i css...
Qualcuno mi aiuta a migliorare questo pezzo di codice, togliendo tutte le tabelle e usando i css per favore?
Questo é il codice in stile tabellare:

codice:

<body id="body_bg"> 

<div id="page_bg">
  
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    	<td>[img]images/b_bg_full_top.png[/img]</td>
    </tr>
    <tr>
    	<td>
        	
      		<table width="100%" border="0" cellspacing="0" cellpadding="0">
  			<tr>
    			<td width="10" class="header_left"></td>
    			<td width="700" class="def_white" valign="middle">
                	<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="675" height="30">
      					<param name="movie" value="media/slogan.swf" />
      					<param name="quality" value="high" />
      					<param name="wmode" value="opaque" />
      					<param name="swfversion" value="6.0.65.0" />
      					
      					<object type="application/x-shockwave-flash" data="media/slogan.swf" width="675" height="30">
        				
        				<param name="quality" value="high" />
        				<param name="wmode" value="opaque" />
        				<param name="swfversion" value="6.0.65.0" />
        				
       					<div>
          					<h4>The contentn of this page requires a new version of Adobe Flash Player.</h4>
          					

 
                        	<a href="http://www.adobe.com/go/getflashplayer"> 
                        	</a>
                        	</p>
        				</div>
        				
      					</object>
      					
    				</object>
                </td>
    			<td width="508" class="def_white" align="right" valign="middle">
                
				<div id="search"> 
					<form action="http://www.deshiadda.com/content/search/results.php" id="cse-search-box"> 
                    	<div class="search"> 
							<input name="q" id="mod_search_searchword" maxlength="20" alt="Search" class="inputbox" type="text" size="20" 
								value="search..."  onblur="if(this.value=='') this.value='search...';" onfocus="if(this.value=='search...') this.value='';" />
                                <input name="sa" type="submit" class="button" id="sa" onclick="this.form.searchword.focus();" value="Search"/>
						</div>
						<input name="cx" type="hidden" id="cx"   value="partner-pub-1126131820265438:7651068947" />
						<input name="cof" type="hidden" id="cof" value="FORID:10" /> 
						<input name="ie" type="hidden" id="ie" value="UTF-8" />
					</form> 
					<div class="clr"> </div> 
		  		</div> 
    			
                </td>
    			<td width="10" class="header_right">[img]images/header_right.png[/img]</td>
  			</tr>
			</table>
            
      	</td>
    </tr>
  </table>
  
  
  
  <table width="100%%" border="0" cellspacing="0" cellpadding="0">
  <tr>
  	<th scope="col">
    	<table width="100%%" border="0" cellspacing="0" cellpadding="0">
    	<tr>
        	<th scope="col" class="header_left" width="10"></th>
            <th scope="col" class="def_white" height="166">[img]images/banner.png[/img]</th>
            <th scope="col" class="header_right" width="10"></th>
        </tr>
        </table>
    </th>
  </tr>
  <tr>
  	<td>[img]images/b_bg_full.png[/img]</td>
  </tr>
  <tr>
  	<td></td>
  </tr>
  <tr>
  	<td align="center" >[img]images/center_bg_up.png[/img]</td>
  </tr>
  </table>

Lo farei da solo, ma con i css proprio non ci sono abituato... almeno ditemi in che modo procedere magari scrivendomi solo come eliminare la prima tabella usando i css... grazie...

**ifts2004** · 04-09-2011, 15:08

potresti mandare almeno un print screen con l'immagine di com'è l'header?

**carlomarangoni** · 04-09-2011, 15:28

Prendilo solo come un esempio di come procedere!

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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
		<style type="text/css">.div-1 {
	border: none;
	height: 88px;
	position: relative;
	text-align: left;
	width: 981px;
}

.div-1-1 {
	border: none;
	height: 9px;
	left: 0px;
	line-height: 9px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 981px;
}

.div-1-2 {
	border: none;
	height: 79px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 9px;
	width: 981px;
}

.div-2 {
	border: none;
	height: 79px;
	position: relative;
	text-align: left;
	width: 981px;
}

.div-2-1 {
	border: none;
	height: 79px;
	left: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 7px;
}

.div-2-2 {
	border: none;
	height: 79px;
	left: 7px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 548px;
}

.div-2-3 {
	border: none;
	height: 79px;
	left: 555px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 416px;
}

.div-2-4 {
	border: none;
	height: 79px;
	left: 971px;
	line-height: 79px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 10px;
}

.div-3 {
	border: none;
	height: 185px;
	position: relative;
	text-align: left;
	width: 981px;
}

.div-3-1 {
	border: none;
	height: 166px;
	left: 0px;
	padding: 0px;
	position: absolute;
	top: 0px;
	width: 981px;
}

.div-4 {
	border: none;
	height: 166px;
	position: relative;
	text-align: left;
	width: 981px;
}

.div-4-1 {
	border: none;
	height: 166px;
	left: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 10px;
}

.div-4-2 {
	border: none;
	height: 166px;
	left: 10px;
	line-height: 166px;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 961px;
}

.div-4-3 {
	border: none;
	height: 166px;
	left: 971px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 0px;
	width: 10px;
}

.div-3-2 {
	border: none;
	height: 9px;
	left: 0px;
	line-height: 9px;
	padding: 0px;
	position: absolute;
	top: 166px;
	width: 981px;
}

.div-3-3 {
	border: none;
	height: 1px;
	left: 0px;
	overflow: hidden;
	padding: 0px;
	position: absolute;
	top: 175px;
	width: 981px;
}

.div-3-4 {
	border: none;
	height: 9px;
	left: 0px;
	line-height: 9px;
	padding: 0px;
	position: absolute;
	text-align: center;
	top: 176px;
	width: 981px;
}
</style>
	</head>
	<body id="body_bg">
		
		
		<div id="page_bg">
			
			<div class="div-1">
				<div class="div-1-1">[img]b_bg_full_top.png[/img]</div>
				<div class="div-1-2">
					
					<div class="div-2">
						<div class="header_left div-2-1"></div>
						<div class="def_white div-2-2">
							<div>
								<h4>The contentn of this page requires a new version of Adobe Flash Player.</h4>
								

 </p>
							</div>
						</div>
						<div align="right" class="def_white div-2-3">
							
							<div id="search">
								<form id="cse-search-box" action="http://www.deshiadda.com/content/search/results.php">
									<div class="search"><input onblur="if(this.value=='') this.value='search...';" id="mod_search_searchword" onfocus="if(this.value=='search...') this.value='';" alt="Search" maxlength="20" name="q" value="search..." class="inputbox" /> <input id="sa" onclick="this.form.searchword.focus();" type="submit" name="sa" value="Search" class="button" /> </div>
									<input id="cx" type="hidden" name="cx" value="partner-pub-1126131820265438:7651068947" />
									
									<input id="cof" type="hidden" name="cof" value="FORID:10" />
									
									<input id="ie" type="hidden" name="ie" value="UTF-8" />
									
								</form>
								<div class="clr"></div>
							</div>
							
						</div>
						<div class="header_right div-2-4">[img]header_right.png[/img]</div>
					</div>
					
				</div>
			</div>
			
			
			<div class="div-3">
				<div class="div-3-1">
					<div class="div-4">
						<div class="header_left div-4-1"></div>
						<div class="def_white div-4-2">[img]banner.png[/img]</div>
						<div class="header_right div-4-3"></div>
					</div>
				</div>
				<div class="div-3-2">[img]b_bg_full.png[/img]</div>
				<div class="div-3-3"></div>
				<div align="center" class="div-3-4">[img]center_bg_up.png[/img]</div>
			</div>
			
			
		</div>
	</body>
</html>

Discussione: Da tabella a css

Strumenti discussione

Ricerca discussione

Visualizza

Da tabella a css

Permessi di invio