Uppgift1 i CSS

This is an old revision of the document!

Ni skall utan att röra HTML koden nedan göra följande uppgifter.

En sida som blir så lik denna bild som möjligt
En sida efter egen smak med en egen css, ni får då ändra en rad i er html. kalla er nya css för css1_egen.css

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

HTML-kod

<!DOCTYPE HTML PUBLIC “-W3CDTD HTML 4.01 TransitionalEN” “http://www.w3.org/TR/html4/loose.dtd”> <html> <head> <title>Lorem ipsum dolor</title> <meta http-equiv=“content-type” content=“text/html;charset=utf-8”> <link rel=“stylesheet” type=“text/css” href=“css1.css”> </head> <body> <div id=“page”> <div id=“top”> <h1>Lorem ipsum dolor</h1> <div id=“menu”> <ul> <li><a href=“#” class=“selected”>Suspendisse</a></li> <li><a href=“#”>Suspendisse</a></li> <li><a href=“#”>Curabitur</a></li> <li><a href=“#”>Nullam</a></li> <li><a href=“#”>Aliquam</a></li> </ul> </div> </div> <div id=“content”> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquet, leo quis consectetur pulvinar, est diam fermentum ligula, eget viverra est felis vel dolor. Vivamus suscipit dui at risus molestie at interdum metus pharetra. Suspendisse pulvinar, lacus lacinia laoreet blandit, neque tortor molestie augue, et iaculis elit est sed risus. Suspendisse dui orci, placerat sit amet porttitor suscipit, aliquet eget massa. Integer id turpis nec libero fermentum tristique eu eget neque. Aenean et turpis justo. Suspendisse mi magna, aliquam et tristique eu, ultrices quis tellus. Vivamus mattis, nunc at accumsan gravida, ligula neque rutrum ligula, a porta felis nibh nec augue. Sed non libero mauris, a pharetra leo. Nullam ac mi eu eros porttitor scelerisque ut eu augue. Suspendisse ut aliquet orci. Quisque ac eros sem.</p> <p>Fusce vestibulum malesuada aliquet. Donec consequat, mauris ut fermentum dictum, leo orci viverra massa, sed vehicula nunc lorem sit amet eros. Proin tincidunt porttitor nulla, at sodales nisi consequat ac. Quisque mi turpis, vehicula ut ullamcorper ac, imperdiet vel odio. Curabitur sit amet magna nulla. Proin consequat tincidunt urna et ultricies. Sed id dolor nulla, a vehicula ipsum. Integer interdum tortor vel neque hendrerit ut pulvinar elit facilisis. Aliquam erat volutpat. Mauris nibh lorem, porttitor quis volutpat vel, tincidunt nec massa. Fusce sit amet justo imperdiet eros eleifend vehicula id feugiat mauris. Pellentesque congue gravida mi at placerat. Mauris eleifend semper sem, eu lobortis velit congue eget. Nulla facilisi. Donec ornare interdum porta. Duis mauris elit, vehicula a convallis nec, faucibus sit amet nulla.</p> <p>In dolor purus, ullamcorper at tristique id, mollis nec purus. Donec massa elit, luctus quis accumsan vel, ullamcorper quis arcu. Suspendisse metus sapien, aliquam a blandit non, viverra ut enim. Suspendisse dignissim risus vitae diam vehicula convallis. Cras quis mauris vitae lacus dictum convallis. Maecenas mattis sem in tellus pellentesque a rhoncus lectus venenatis. Duis ipsum metus, auctor sit amet aliquet vehicula, euismod consequat purus. Nunc in facilisis arcu. Aliquam erat volutpat. Pellentesque purus odio, mollis et aliquet quis, pharetra in purus. Integer placerat mattis tellus, sed vehicula dolor lobortis sed.</p> <p>Nullam ut felis eros. Phasellus in metus leo, vel fringilla purus. Phasellus faucibus sagittis ullamcorper. Etiam at dolor sem. Maecenas sit amet risus non mauris consequat sollicitudin. Etiam tincidunt suscipit venenatis. Nunc eget arcu sapien. Sed facilisis odio eu leo ultrices in laoreet mauris interdum. Donec eu purus a elit sollicitudin consequat. Vivamus egestas libero sit amet risus feugiat vitae mollis ante malesuada.</p> </div> </div> </body> </html> <code>