webForumDet fria alternativet

Tabell

14 svar · 404 visningar · startad av Alpha II

Alpha IIMedlem sedan maj 20002 993 inlägg
#1

Börjar misstänka att jag hat glömt HTML, första gången jag göra en sida på 1 år!

Har tyvärr inte installerat Dreamweaver, misstänker att jag inte har tillräckligt med plats på datorn... :l

Så här vill jag att den ska se ut:

____________________________________
|                            |      |
|                            |______|
|____________________________|______|
|                                   |
|                                   |
|                                   |
|                                   |
|___________________________________|
DinoMedlem sedan sep. 20011 914 inlägg
#2

Här är ett sätt, andra vill nog att du skall göra det med DIVar.

<table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
   <tr>
      <td>1</td>
      <td style="height: 150px; width: 25%;">
      <table cellpadding="0" cellspacing="0" style="height: 100%; width: 100%;">
         <tr>
            <td>2</td>
         </tr>
         <tr>
            <td>3</td>
         </tr>
      </table>
      </td>
   </tr>
   <tr>
      <td colspan="2">4</td>
   </tr>
</table>
Alpha IIMedlem sedan maj 20002 993 inlägg
#3

Så jag måste göra en tabell innuti? Kan jag inte göra en enda tabell för det? Spelar det roll hur många tabeller man har på sidan? Jag har en hel del tabeller inuti andra nu......

andreas_lindhMedlem sedan jan. 20011 140 inlägg
#4

Här har du det i tabell form med en tabell

<table width="400" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="70%" rowspan="2">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr> 
    <td colspan="2">&nbsp;</td>
  </tr>
</table>
Peter SMedlem sedan dec. 20025 483 inlägg
#5

...och CSS:

<head>

<style type="text/css">
<!--

html, body {
	margin : 0;
	padding : 0;
}

#top {
	position : absolute;
	width : 100%;
	height : 120px;
	background : #eee;
	border-bottom : 1px solid #666;
	z-index : 2;
}

#right {
	position : relative;
	width : 20%;
	height : 100%;
	float : right;
	border-left : 1px solid #666;
}

#rightTop {
	height : 70px;
	border-bottom : 1px solid #666;
	padding : 2px;
}

#rightBottom {
	height : 50px;
	padding : 2px;
}

#main {
	position : absolute;
	top : 120px;
	margin-top : 5px;
	padding-left : 5px;
	z-index : 1;
}

h1 {
	font : bold 20px tahoma, arial, sans-serif;
}

-->
</style>

</head>

<body>

<div id="top">
	<div id="right">
		<div id="rightTop"></div>
		<div id="rightBottom"></div>
	</div>
</div>
<div id="main"><h1>Lite text kanske...</h1></div>

</body>

:)

Alpha IIMedlem sedan maj 20002 993 inlägg
#6

Varför skulle man villa göra det med div taggar/css? Vad är det för bättre med det? Krånglar det inte bara till det?

FlashesMedlem sedan jan. 2003282 inlägg
#7

Enligt standarden så skall bara tabeller användas för att visa data, är det layout så skall CSS användas.
För att följa standard alltså.

Mvh
Jan-Olov

Web-TorMedlem sedan nov. 200013 890 inlägg
#8

Enligt HTML-standarden får du använda tabeller till vad du vill.
Om du däremot vill följa WAI-riktlinjerna så ska du bara använda tabeller för "tabbulär data". ;)

DarrenMedlem sedan dec. 2002789 inlägg
#9

Den dagen då DIV-ar visas likadant i alla läsare (så som tabellerna gör idag) kan man säga att de är fullt användbara för layout jobbet.

Tyvärr är det så att även om man följer W3C standard i sin kodning så blir inte resultatet likadant i alla läsare.

Web-TorMedlem sedan nov. 200013 890 inlägg
#10

Du kan aldrig få din sida att se likadan ut i alla webbläsare.
Därför är det bättre att följa standarden så att man har nåt att gå efter.

DarrenMedlem sedan dec. 2002789 inlägg
#11

Åja... Det kan jag visst om jag använder tabeller med bra skrivet css-specifikation. Det kan jag inte med DIV-ar. Största boven här är inte standarden utan webbläsarna. Internet Explorer mer än andra.

Kolla denna layouten t ex: http://www.webforum.nu/attachment.php?s=&postid=551797

Den fungerar likadant i alla webbläsare om jag använder tabeller. Om jag går över till DIV-ar så är det IE och Opera 7 som spökar. Och ja, jag följde standarden i exemplet ovan.

Med andra ord, du har ingen nytta utav en standard om inte webbläsarna följer den.

Web-TorMedlem sedan nov. 200013 890 inlägg
#12

Jag tvivlar start på att du har någonsin har testat någon sida i alla webbläsare.
Det skulle vara spännande att se hur du har fått tabellerna att bli snygga i Lynx.

DarrenMedlem sedan dec. 2002789 inlägg
#13

Ja, ja... :) Nu tänkte jag mer på NS, IE, Mozilla och Opera... De mest använda webbläsarna. Det är de som jag vill skall följa standarden, det är i de jag vill kunna använda DIV-ar och få samma resultat osv.

Även om du följer standarden till 100% kan du inte få bilderna att visas i Lynx... Eller har jag fel?

Web-TorMedlem sedan nov. 200013 890 inlägg
#14

Även om du följer standarden till 100% kan du inte få bilderna att visas i Lynx... Eller har jag fel?

Nä, då visas alt-text så klart. Det är det som är poängen.

Utan att veta exakt hur sidan du länkade skulle se ut... funkar inte detta:

<head>

<style type="text/css">
<!--

html, body {
	margin : 0;
	padding : 0;
}

#top {
	width : 100%;
	height : 50px;
	background : #eee;
	border-bottom : 1px solid #999;
}

#main {
	width : 100%;
}

#bot {
	width : 100%;
	height : 50px;
	background : #eee;
	border-top : 1px solid #999;
}

#mainLeft {
	width : 70%;
	float: left;
}

#mainRight {
	width : 100%;
	height : 100%;
	background : #eee;
	margin: 3px,0,3px,0;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	border-bottom: 1px solid #999;
}

-->
</style>

</head>

<body>

<div id="top"></div>

<div id="main">

 <div id="mainLeft">mainLeft<br/><br/><br/><br/>mainLeft<br/><br/><br/><br/>mainLeft</div>
 <div id="mainRight">mainRight</div>

</div>
<div id="bot"></div>

</body>
DarrenMedlem sedan dec. 2002789 inlägg
#15

Din tankegång är rätt. Men tyvärr så fungerar det inte.

Main DIV-en innehåller två stycken 'child' DIV-ar. mainLeft skall få sin höjd av innehållet som finns i den. mainRight skall alltid vara 100% av main höjden och det är det som är kruxet här.

NS och Mozilla tyder standarden rätt och visar sidan rätt. IE däremot tar inte 100% av main DIV-en utan av hela sidan. Opera 7 bryr sig inte alls om höjden du anger utan anpassar höjden efter innehållet.

Klurigt ser du...

140 ms totalt · 3 externa anrop · v20260731065814-full.30151723
0 ms — hämta forumlista (cache)
0 ms — hämta statistik (cache)
138 ms — hämta tråd, inlägg och bilagor (db)