webForumDet fria alternativet
Logga in / Bli medlem

Funderna på hur man gör tabeller.

HTML & CSS

16 svar · 477 visningar · startad av Dwarfen

DwarfenMedlem sedan jan. 2002241 inlägg
Frågan#1

Hej.

Sitter här och försöker tillverka en liten hemsida, men jag får inte det att fungera med tabellerna.
Hur ska jag gå tillväga för att ha 3 stycken (1 uppe, vänster, och "mitten")?
Nu får jag dem bara att hamna ovanpå varandra, samt att texten i dem blir centrerad i mitten av tabellerna.

Så jag undrar om någon har lust att hjälpa mig med lite kodning?

Tack på förhand

m_soderlunds avatarm_soderlundMedlem sedan sep. 20026 425 inlägg
#2

Hur menar du med "uppe, vänster och mitten"? Jag tolkar det som en uppe och två nedanför, en vänstertabell och en högertabell. Kan du inte skissa lite och visa oss hur du vill ha det?

Web-Tors avatarWeb-TorMedlem sedan nov. 200013 890 inlägg
#3

Det enklaste är om du gör en skiss över hur du vill att tabellerna ska se ut. Du kan bifoga skissen i ett inlägg.

/r Vilket m_soderlund redan föreslagit. :e

DwarfenMedlem sedan jan. 2002241 inlägg
#4

Så här hade jag tänkt mig (och nej, nu behöver inte påpeka hur fin den är =) )

untitled-1 copy.gif
LBCMedlem sedan jan. 2003146 inlägg
#5

Ett exempel på hur du kan göra om du bestämt dig för att lösa det med tabeller (har skippat finliret). Personligen tycker jag nästlade tabeller är en jobbig lösning, har du tid över så ta en titt på http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html där man istället löser ett liknande problemn med css.

<-- Uppe -->
<table style="width: 500px">
<tr><td>innehåll</td></tr>
</table>

<table style="width: 500px">
<tr>

<td>
<-- Vänster, nere -->
<table style="width: 100px">
<tr><td>Innehåll</td></tr>
</table>
</td>

<td>
<-- Mitten, nere -->
<table style="width: 400px">
<tr><td>Innehåll</td></tr>
</table>
</td>

</tr>
</table>
DwarfenMedlem sedan jan. 2002241 inlägg
#6

Tackar LBC för länken, helt plötsligt blev det mycket lättare =)
Du får 5pluspoäng! =)

DwarfenMedlem sedan jan. 2002241 inlägg
#7

Men en sak förstår jag fortfarande inte?
Hur gör jag för att koden ska fungera? Måste jag lägga in något i en css (och vad är det?) innan eller hur gör man?

DwarfenMedlem sedan jan. 2002241 inlägg
#8

Använder mig av koden neda, men jag får bara upp koden i textformat på sidan.
Någon som orkar hjälpa mig?
[
#top {
margin: 20px 20px 0px 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
height: 100px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
height: 70px;
}
html>body #top {
height: 70px; /* ie5win fudge ends */
}
#left {
position: absolute;
top: 120px;
left: 0px;
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #left {
width: 120px; /* ie5win fudge ends */
}
#middle {
margin: 20px 190px 20px 190px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
}
#right {
position: absolute;
top: 120px;
right: 0px; /* Opera5.02 will show a space
at right when there is no scroll bar */
margin: 20px;
padding: 10px;
border: 5px solid #ccc;
background: #666;
width: 150px; /* ie5win fudge begins */
voice-family: "\"}\"";
voice-family:inherit;
width: 120px;
}
html>body #right {
width: 120px; /* ie5win fudge ends */
}
]

frankofs avatarfrankofMedlem sedan jan. 20016 874 inlägg
#9

läggs mellan <head></head>

<style type="text/css">
#top {
	margin: 20px 20px 0px 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	height: 100px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	height: 70px;
	}
#top {
	height: 70px; /* ie5win fudge ends */
	}
#left {
	position: absolute;
	top: 120px;
	left: 0px;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 120px;
	}
#left {
	width: 120px; /* ie5win fudge ends */
	}
#middle {
	margin: 20px 190px 20px 190px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	}
#right {
	position: absolute;
	top: 120px;
	right: 0px; /* Opera5.02 will show a space 
	at right when there is no scroll bar */
	margin: 20px;
	padding: 10px;
	border: 5px solid #ccc;
	background: #666;
	width: 150px; /* ie5win fudge begins */
	voice-family: "\"}\"";
	voice-family:inherit;
	width: 120px;
	}
#right {
	width: 120px; /* ie5win fudge ends */
	}
</style>
DwarfenMedlem sedan jan. 2002241 inlägg
#10

Ah, okey, har gjort som du sa, lagt det mellan <HEAD> </HEAD>.
Men fortfarande ser jag inget resultat, nu har visserligen texten försvunnit, men jag ser inga boxar?
Har provat med att slänga in lite bokstäver för att se om jag ser dem, men inget händer.
Något är kaj?

DwarfenMedlem sedan jan. 2002241 inlägg
#11

Varför är top och right med två gånger för?

jarvkloMedlem sedan juli 20013 378 inlägg
#12

Hmm...

Det där är bara CSS (Cascading Style Sheets för att svara på din fråga) - och utan att se hur den HTML som CSS-koden hör till ser ut går det inte att svara på vad som är fel...

Men om du aldrig har klurat med CSS så tycker iaf jag att det där med "Noodle Incident":s Box lessons rätt mycket överkurs!

Här kommer ett exempel på hur din sida skulle kunna byggas med en tabell i "ren" HTML (fast det är lite kompletterande utseende ditpetat med CSS här och var i style="..."-attributen på taggarna också förståss ;) )
Tabellen har tre "celler" och liknar din skiss såvitt jag förstår den.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ett exempel</title>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" >
</head>
<body style="margin:0;padding:0">
<table cellspacing="0" cellpadding="10" border="1" width="100%" style="height:100%">
<tr style="height:100px;">
  <td colspan="2">Uppe</td>
</tr>
<tr>
  <td width="100">Vänster Nere</td>
  <td>Höger Nere</td>
</tr>
</table>
</body>
</html>
jarvkloMedlem sedan juli 20013 378 inlägg
#13

Dwarfen skrev:

Varför är top och right med två gånger för?

I CSS kan man specificera utseende sådär om man vill.

I just det här fallet går författaren av CSS-stilmallen förbi några kända webbläsarbuggar genom att fnula med dubbla #top-deklarationer (det är det han menar med "MSIE5 fudge" i kommentaren... )

Mer precist får han height: satt till 100px i MSIE5 och 70px i "övriga" webbläsare för att gå förbi en bugg i hur MSIE5 placerar ut marginaler, paddings och höjder i "box-modellen"

Hur och varför denna stilmall fungerar som den gör är IMHO extrem Ö V E R K U R S för de flesta - iallafall om man bara snabbt vill ha upp en sidstruktur !!!

jarvkloMedlem sedan juli 20013 378 inlägg
#14

Dwarfen skrev:

Ah, okey, har gjort som du sa, lagt det mellan <HEAD> </HEAD>.
Men fortfarande ser jag inget resultat, nu har visserligen texten försvunnit, men jag ser inga boxar?
Har provat med att slänga in lite bokstäver för att se om jag ser dem, men inget händer.
Något är kaj?

Hmm...

Har du lagt in HTML-koden som hör till stilmallen också ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head><title>Ett exempel till</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
<style type="text/css">
<!--
#top {

[  ... klippt lite i stilmallsgeggan för att spara plats ...]

  html>body #right {
	width: 120px; /* ie5win fudge ends */
	}

-->
</style>

</head>
<body>
<div id="top">
Top
</div>

<div id="left">
Left
</div>

<div id="middle">
Middle
</div>

<div id="right">
Right
</div>
</body>
</html>
DwarfenMedlem sedan jan. 2002241 inlägg
#15

Får lov att tacka ännu en gång, nu ser jag vad som sker på bilden. Tackar!

Sen om någon har tid skulle jag gärna vilja ha lite mer inblick i det hära med Css?

jarvkloMedlem sedan juli 20013 378 inlägg
#16

Det är ett *stort* ämne - men testa t.ex. någon av dessa två "skolor":
http://www.idg.se/webstudio/pub/object.asp?id=7
http://www.w3schools.com/css/default.asp

LBCMedlem sedan jan. 2003146 inlägg
#17

Mycket möjligt att den stilmallen är överkurs. Speciellt om Dwarfen inte jobbat med CSS tidigare, vilket jag inte visste. Sorry Dwarfen, passar istället på att länka till http://www.w3schools.com/css/default.asp, (RED: jarvklo hann före...) som har en bra CSS-guide. Personligen föredrar jag att arbeta med divs istället för tables där det inte är uppenbart vettigare med tabeller, t ex som i ditt fall där du (om jag förstått det hela rätt) vill ha tre bakgrundsfält utplacerade på sidan.

Spar länken jag rekommenderade tidigare, när du väl satt dig in i CSS och känner att du behärskar det lovar jag dig att du kommer upptäcka hur mycket man kan göra med divs tillsammans med CSS.

265 ms totalt · 4 externa anrop · v20260731065814-full.6fe65c25
125 ms — deklarationer (db)
0 ms — hämta statistik (cache)
137 ms — hämta tråd, inlägg och bilagor (db)
122 ms — ändringar (db)