<!--html-->
<?xml version="1.0" encoding="utf-8" ?>
<!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" xml:lang="no" lang="no">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Testside XHTML/CSS
</title>
<link rel="stylesheet" type="text/css" href="css2.css" media="screen" />
</head>
<body>
<h1> Heading </h1>
<!--<div id="venstreramma">-->
<div id="lframe">
test
<br/>
sideframes
</div>
<div id="rframe">
<p class="right">
testing floating frame to see if text stays within frames or ands up outside the box
</p>
</div>
<div id="boks">
<p class="large"> some text </p>
<img class="float" alt="solar flare" src ="flare.jpg"/>
<p class="bilde"> I'd like this to stay withing a given length.
so it fits under a image by itself if possible </p>
<!-- hvordan få denne på en makslengde så den passer til bildestr?-->
<p class="left">
left foating text here to test
</p>
<p>
everything is moving around if I make windows smaller
</p>
</div>
<div id="rammer">
<img class="test" alt="flare" src ="flare.jpg"/>
<img class="test" alt="giraffe" src ="gir.jpg"/>
<!-- annen type bildeskalering-->
</div>
<!-- COPYPASTE-->
<table cellspacing="0" class="table_ex">
<!-- Rad 1 -->
<tr>
<th>
Overskrift 1
</th>
<th>
Overskrift 2
</th>
</tr>
<!-- // SLUTT Rad 1 -->
<!-- Rad 2 -->
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
</tr>
<!-- // SLUTT Rad 1 -->
<tr>
<td rowspan="2"> <!-- ett felt går over to rader-->
mer 1
</td>
<td>
mer 2
</td>
</tr>
<!-- // SLUTT Rad 2 -->
<tr>
<td>
mer mer
</td>
</tr>
</table>
<!--
Tabell med 2 horisontale celler slått sammen
-->
<table cellspacing="0" class="table_ex">
<!-- Rad 1 -->
<tr>
<th>
Overskrift 1
</th>
<th colspan="2"> <!--overskriften strekkes over to kolonner-->
Overskrift 2
</th>
</tr>
<!-- // SLUTT Rad 1 -->
<!-- Rad 2 -->
<tr>
<td>
Data 1
</td>
<td>
Data 2
</td>
<td>
Data 3
</td>
</tr>
<!-- // SLUTT Rad 2 -->
</table>
<p>
Tabell med to overskriftceller <br/>
slått sammen horisontalt (<b>colspan="2"</b>).
</p>
</div>
<div id="cc">
this thing is not working the way I want it to,
it should cover the whole left side
</div>
<!-- COPYPASTE-->
</body>
</html>
/*CSS*/
body
{
font-family: "Arial";
font-size: 100%;
}
h1
{
color: red;
font-family: "Courier New";
font-style: Italic;
font-weight: lighter;
text-align: center;
}
div#boks
{
margin-left: auto;
margin-right: auto;
margin-top: auto;
/*float: center;*/
background-color: blue;
text-align: center;
border: 1px solid #000000;
}
img
{
width: 50%;
height: 50%;
float: center;
}
p
{
color: black;
font-size: 12px;
font-family: Arial;
}
p.large
{
color: green;
font-size: 20px;
font-family: Impact;
}
p.bilde
{
margin: .2em;
font-size: 15px;
color: white;
font-weight: Lighter;
}
p.clear {
fl: left;
margin-left: 280px;
}
p.left { /* div.boks er satt til text align center, så må bruke denne for å venstrestille tekst i boksen*/
text-align: left;
font-size: 10px;
color: yellow;
}
p.right /* for å plassere teksten i forhold til rammen*/
{
width: 100px;
color: green;
margin-left: .5em;
margin-right: .5em;
}
div.rammer
{
float: left;
margin: .5em;
}
img.test /* undergruppe av bilder, disse er mindre enn standard*/
{width: 30%;
height: 45%;
margin: .5em;
}
img.float
{
float: center;
}
/*copypaste*/
/*plassering og linjestil */
table.table_ex {
clear: left;
float:center;
/*border-top: 1px solid #000; /*topplinje*/
/*border-right: 1px solid #000; /*høyre linjer*/
margin: 0em 1em 2em 1em; /* gir mellomrom ....topp høyre bunn venstre */
border-style:double; /*venstre og nede*/
}
/*rammer*/
table.table_ex th, table.table_ex td {
border-left: 1px solid #000; /* venstre linjer*/
border-bottom: 1px solid #000; /*nedre linjer*/
border-top: 1px solid #000;
border-right: 1px solid #000;
}
/*padding*/
table.table_ex th { /*header*/
background-color: #FF0000;
padding: .2em 1em; /* fyll ... bredde lengde */
}
/*align tekst*/
table.table_ex * {
text-align: center;
}
div#lframe
{
float:left;
width: 100px;
height: 200px;
padding: 10px;
margin-top: 1em; /*gjør at floaten inni diven ikke forkyves når det er tekst over diven*/
}
div#rframe
{
float:right;
width: 100px;
height: auto;
padding: 10px;
margin-top: 1em;
background-color: red;
margin-right: .5em;
}
div#venstreramma{ /* FAILS*/
margin: 0 auto 0 auto;
width: 200px;
height: 600px;
float: left;
padding: 5px;
background-color: #ababab;
border-top: 1px solid #000;
position: relative;
margin-left:auto;
margin-right: auto;
}
div#cc /* overlaps other divs*/
{
width: 200px;
height: auto;
margin-right: auto;
position: relative;
margin-bottom: 0px;
margin-top: 10px;
text-align: center;
background-color: Olive;
font-family: Verdana;
}
