webForumDet fria alternativet
Logga in / Bli medlem

xhtml/css och div:ar

HTML & CSS

3 svar · 509 visningar · startad av Patrik81

Patrik81s avatarPatrik81Medlem sedan okt. 2001538 inlägg
Frågan#1

Hejsan, nu sitter jag här med ett problem.

Jag vill skapa en sida, användandes xhtml och css, och det har visat sig vara en svårare nöt att knäcka, än jag först trodde.

Jag har kodat ihop den, med xhtml och css, men naturligtvis så såg den inte alls lika bra ut i andra upplösningar, och är ytterst samarbetsovillig ;)

Så jag kodade lite snabbt ihop hur jag skulle önska att sidan såg ut i klart skick, fast med tabeller. Så jag kommer bifoga både tabell (ful) kod, för att visa hur jag vill ha det, och sedan xhtml/css koden jag sitter med, som inte är riktigt lika fungerande.

Design:

<html style="width: 100%; height: 100%; padding: 0px; margin: 0px;">
<head>
<title>table2div</title>
</head>

<body style="width: 100%; height: 100%; padding: 0px; margin: 0px;">

<table border="1" style="width: 100%; height: 100%;">
<tr>
<td rowspan="5" style="width: 70%; height: 90%;" valign="top">
<p style="text-align: center">Innehåll</p>
</td>

<td style="height: 6%;">
&nbsp;
</td>

</tr>
<tr>
<td style="width: 30%; height: 36%;" valign="top">
<p style="text-align: center">Länkar</p>
</td>
</tr>

<tr>
<td style="height: 6%;">
&nbsp;
</td>
</tr>

<tr>
<td style="width: 30%; height: 36%;" valign="top">
<p style="text-align: center">Lite andra länkar</p>
</td>
</tr>

<tr>
<td style="height: 6%;">
&nbsp;
</td>
</tr>

<tr>
<td colspan="2">
<p style="text-align: center">Sidfot</p>
</td>
</tr>
</table>

</body>
</html>

(x)html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>xhtml</title>

<link rel="stylesheet" href="style.css" />

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>

<body>

<div id="content">
innehåll
</div>

<div id="navbar">
länkar
</div>

<div id="inavbar">
lite fler länkar
</div>

<div id="foot">
Sidfot
</div>

</body>
</html>

css

html, body {
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	color: #000000;
	background-color: #ffffff;
	}

#content {
	position: absolute;
	bottom: 5%;
	left: 20px;
	height: 92%;
	width: 71%;
	border: 2px #000000 solid;
	padding-left: 10px;
	padding-right: 10px;
	overflow: auto;
	}

#foot {
	position: absolute;
	bottom: 2%;
	left: 0px;
	width: 100%;
	text-align: center;
	}

#navbar {
	position: absolute;
	bottom: 57%;
	right: 20px;
	height: 40%;
	width: 20%;
	padding-left: 10px;
	padding-right: 10px;
	}

#inavbar {
	position: absolute;
	bottom: 5%;
	right: 20px;
	height: 40%;
	width: 20%;
	border: 2px #000000 solid;
	padding-left: 10px;
	padding-right: 10px;
	}

Det skulle vara ypperligt, om det gick att få sidfoten att alltid ligga utmed webbläsarens kant, så om det nu finns mer text i innehållsutrymmet, än vad som finns plats i fönstret, så expanderar innehålls delen nedåt, och pressar ned sidfoten också.

Och när jag nu tänker på det, så kanske det skulle vara bra om länkytorna på något sätt var fixerade, och alltid var i bild, hur mycket man än scrollar nedåt. Går det ens att göra?

Med iframe hade det ju varit plättlätt, men ville lära mig något nytt den här gången. Tog mig kanske lite för mycket vatten över huvudet ;)

MVH Patrik

joel_sundkvists avatarjoel_sundkvistMedlem sedan feb. 2003240 inlägg
#2

Du kanske borde kolla på "float-modellen". http://css.maxdesign.com.au/floatutorial/index.htm

Något åt detta hållet kanske?

<!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>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title></title>
<style type="text/css">

html, body {
font-size: 0.9em;
font-family: Verdana, Helvetcia, Sans-Serif;
line-height: 1.5em;
}

#container {
width:100%;
}
#content {
float:left;
width:60%;
background: #ccc;
}
#right{
float:right;
width:40%;
}

#navbar {
background: #eee;
}
#inavbar {
background: #e8e8e8;
}

#foot {
text-align: center;
}

p, h1, h2, h3 {
margin:0 20px;
}

h1 {
padding: 20px 0 10px;
}

h2 {
padding: 10px 0;
}

h3 {
padding: 10px 0 5px;
}

p {
padding: 0 0 10px;
}

</style>
	</head>
	<body>
<div id="container">

<div id="content"><h1>Inneh&aring;ll...</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod. Curabitur placerat. In hac habitasse platea dictumst. Integer ornare, mi sed porttitor elementum, ligula purus volutpat massa, sed elementum ante purus sit amet wisi. Praesent a enim. Morbi in ligula ac augue tristique hendrerit. Nam at elit non justo dignissim lobortis. Suspendisse in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum lacus. Nullam vitae purus ultricies augue dignissim volutpat. Donec ornare, lacus at eleifend faucibus, erat leo dapibus sem, eget vestibulum felis diam quis felis. Duis elit nulla, vehicula et, facilisis eu, scelerisque sit amet, lectus. Curabitur posuere. Cras nibh.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod. Curabitur placerat. In hac habitasse platea dictumst. Integer ornare, mi sed porttitor elementum, ligula purus volutpat massa, sed elementum ante purus sit amet wisi. Praesent a enim. Morbi in ligula ac augue tristique hendrerit. Nam at elit non justo dignissim lobortis. Suspendisse in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum lacus. Nullam vitae purus ultricies augue dignissim volutpat. Donec ornare, lacus at eleifend faucibus, erat leo dapibus sem, eget vestibulum felis diam quis felis. Duis elit nulla, vehicula et, facilisis eu, scelerisque sit amet, lectus. Curabitur posuere. Cras nibh.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod. Curabitur placerat. In hac habitasse platea dictumst. Integer ornare, mi sed porttitor elementum, ligula purus volutpat massa, sed elementum ante purus sit amet wisi. Praesent a enim. Morbi in ligula ac augue tristique hendrerit. Nam at elit non justo dignissim lobortis. Suspendisse in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum lacus. Nullam vitae purus ultricies augue dignissim volutpat. Donec ornare, lacus at eleifend faucibus, erat leo dapibus sem, eget vestibulum felis diam quis felis. Duis elit nulla, vehicula et, facilisis eu, scelerisque sit amet, lectus. Curabitur posuere. Cras nibh.</p><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce euismod. Curabitur placerat. In hac habitasse platea dictumst. Integer ornare, mi sed porttitor elementum, ligula purus volutpat massa, sed elementum ante purus sit amet wisi. Praesent a enim. Morbi in ligula ac augue tristique hendrerit. Nam at elit non justo dignissim lobortis. Suspendisse in neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Vestibulum lacus. Nullam vitae purus ultricies augue dignissim volutpat. Donec ornare, lacus at eleifend faucibus, erat leo dapibus sem, eget vestibulum felis diam quis felis. Duis elit nulla, vehicula et, facilisis eu, scelerisque sit amet, lectus. Curabitur posuere. Cras nibh.</p></div>

<div id="right">
<div id="navbar"><h2>Navbar</h2>
<ul>
	<li><a href="#">L&auml;nken</a></li>
	<li><a href="#">L&auml;nken</a></li>
	<li><a href="#">L&auml;nken</a></li>
	<li><a href="#">L&auml;nken</a></li>
</ul>
</div>
<div id="inavbar"><h3>Inavbar</h3>
<ul>
	<li><a href="#">L&auml;nken</a></li>
	<li><a href="#">L&auml;nken</a></li>
	<li><a href="#">L&auml;nken</a></li>
	<li><a href="#">L&auml;nken</a></li>
</ul>
</div>

</div>
<br style="clear:both;" />
<div id="foot">footer</div>

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

Jag föredrar denna metod före "absolut-positionerings" metoden.
OBS! Slängde ihop denna kod i en hast. Den är funkar felfritt på Mac OSX Safari, FF, MSIE 5.2.3

Lycka till!

Patrik81s avatarPatrik81Medlem sedan okt. 2001538 inlägg
#3

Hejsan :)

Det var ju helt suveränt, nu skall jag bara försöka luska ut varför mina tidigare tester med float inte fungerade lika bra som denna koden här. =)

Tack så mycket :)

MVH Patrik

joel_sundkvists avatarjoel_sundkvistMedlem sedan feb. 2003240 inlägg
#4

Övning ger träning ;)

Lycka till!

267 ms totalt · 4 externa anrop · v20260731065814-full.1dc6f849
123 ms — deklarationer (db)
0 ms — hämta statistik (cache)
141 ms — hämta tråd, inlägg och bilagor (db)
124 ms — ändringar (db)