Varför blir rubrikens kolumn så hög?

2010-12-21 23:43

Medlem

Plats: Stockholm
Registrerad: Sep 2007

●

Varför blir rubrikens kolumn så hög?

Här ser ni en simpel tabell-layout (inget gnäll om CSS och tabeller tack).
Varför blir den svagt grå rubriks-kolumnen så hög? Jag vill att den ska vara nästa lika hög som själva texten.

Kod:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>


        <table width="520" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="520" valign="top" bgcolor="#F8F8F8"><div align="center">
              <h3><strong>hej Title</strong></h3>
            </div></td>
          </tr>
          <tr>
            <td valign="top"><div align="center">(BILD)<br />
              Här är en beskrivning</div></td>
          </tr>
          <tr>
            <td valign="top"><div align="center">Click Here For More Information!</div></td>
          </tr>
        </table>
        

</body>
</html>

Rapportera Redigera

Citera flera Citera

2010-12-22 01:24

Permalänk

Cloudburst

Medlem

Registrerad: Apr 2006

●

För h3 har margin och/eller padding?

Rapportera Redigera

Citera flera Citera

2010-12-22 18:31

Permalänk

save

Medlem

Plats: Stockholm
Registrerad: Feb 2005

●

Tyvärr måste vi gnälla lite om CSS. Det är där problemet sitter.
Blir lättare markup för dig om du strukturerar den så här istället:

<html>
<head>
<title>Untitled Document</title>
<style>
body {
	width: 520px; 
	margin: 0 auto; 
	text-align: center
}
#header {
	width: 100%;
	height: 30px; /*önskad höjd*/
	line-height: 30px; /*justera höjd för h3-elementet*/
	background: #F8F8F8
}
a, p, h3, img {
	margin: 3px 0; /*önskat mellanrum*/
	padding: 0
}
</style>
</head>

<body>
<div id="header"><h3>hej Title</h3></div>
<img src="" alt="" />
<p>Här är en beskrivning</p>
<a href="#">Click here for more information!</a>
</body>
</html>

Är det inte en hel sida så byt ut body mot en div. Även skönt att slippa sitta och pilla med tabellrader.
Om du är så illa tvungen att använda tabeller så kan du lägga till:

<style>
h3 {margin:0;padding:0}
</style>

Ska du göra fler sidor med samma layout så är en extern css-fil att rekommendera och divar (om det ens behövs) istället för tabeller. Så nu har jag gnällt färdigt.

Senast redigerat 2010-12-22 19:06

Visa signatur

Rapportera Redigera

Citera flera Citera

2010-12-22 18:54

Permalänk

You

Medlem