winterblut
Neues Mitglied
Moin;
ich hatte mich nie mit Webdesign beschäftigt und muss jetzt für die schule eine kleine eigene site bauen (über mich privat...)
jedenfalls hab ich mich etwas eingelesen und einfach mal angefangen, soweit so gut - dachte ich - bis ich mir das teil mal im ie angeguckt habe...
problem: irgendwas muss in meinem css nicht stimmen, da der seitenaufbau kurzzeitigt beim "laden" total rumhüpft..
würd mich über lösungsansätze und tipps zu meinem "beginner getippsel freuen"
---
ich hatte mich nie mit Webdesign beschäftigt und muss jetzt für die schule eine kleine eigene site bauen (über mich privat...)
jedenfalls hab ich mich etwas eingelesen und einfach mal angefangen, soweit so gut - dachte ich - bis ich mir das teil mal im ie angeguckt habe...
problem: irgendwas muss in meinem css nicht stimmen, da der seitenaufbau kurzzeitigt beim "laden" total rumhüpft..
würd mich über lösungsansätze und tipps zu meinem "beginner getippsel freuen"
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Klassenweb - xxx</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="author-personal" content="xxx" />
<meta name="author-mail" content="mailto:xxx.de" />
<meta name="description" content="Erstellung einer Website für den
Schuluntericht (Einführung Webdesign) " />
<meta name="language" content="de" />
<meta name="robots" content="index, follow" />
</head>
<!-- Beginn Body/Content -->
<body>
<img class="kopf" src="Bilder/kopf.png" alt="kopf" width="850px" height="141px" usemap="#navi" border="0" </img> <!-- Bild Navigation / Banner -->
<map name="navi"> <!-- Imagemap -->
<area shape="rect" coords="589,50,626,90"
href="index.html" alt="Home" title="Home">
<area shape="rect" coords="655,50,692,90"
href="about.html" alt="About" title="About">
<area shape="rect" coords="721,50,759,90"
href="links.html" alt="Links" title="Links">
<area shape="rect" coords="786,50,825,90"
href="rating.html" alt="Rating" title="Rating">
</map>
<img class="banner" src="Bilder/home.png" alt="home" width="850px" height="250px" </img> <!-- Bild fuer Rubrik -->
<div id="head">
<p> Home</p>
</div>
<div id="subhead">
<p> Willkommen auf meiner Website </p>
</div>
<div id="fliesstext">
<p>Dies ist meine private Website für das "Klassenwebprojekt" der <b>Fisi09b. </b> </p>
<p>Auf den folgenden Seiten gibt es etwas über mich, eine Linkliste und ein kleines</p>
<p> Bewertungsformular. </p>
<br> <br> <br> <br>
<p> So long, xxx </p>
<br> <br> <br> <br>
</div>
<div id="foot">
<p> copyright 2009 - xxx | optimiert für 1280x1024 / Mozilla Firefox | <a href="impressum.html">Impressum</a> | </p>
</div>
</body>
</html>---
Code:
@charset "utf-8";
/* Zurücksetzen der Innen- und Außenabstände */
*
{
margin: 0;
padding: 0;
}
html
{
height: 101%; /**
* Scrollbar immer sichbar
*/
}
/**
* Hintergrund fuer Dokument
*
*/
html, body
{
background: white url(bilder/textur_kachelbar.png) repeat;
}
/**
* Bereich Banner / Kopf
*
*/
IMG.kopf
{
display: block;
margin-left: auto;
margin-right: auto;
}
/**
* Bereich Rubrikenbilder
*
*/
IMG.banner
{
display: block;
margin-left: auto;
margin-right: auto;
}
/**
* Bereich Linkbilder
*
*/
IMG.link
{
padding-right: 35px;
padding-top: 5px;
}
/**
* Bereich Text
*
*/
#head
{
width: 825px;
background: white;
margin-left: auto;
margin-right: auto;
color: orange;
font-family: verdana;
font-weight: bold;
font-size: 150%;
padding-top: 10px;
padding-left: 25px;
}
#subhead
{
width: 825px;
background: white;
margin-left: auto;
margin-right: auto;
color: grey;
font-family: arial;
font-weight: normal;
font-size: 120%;
padding-left: 25px;
padding-bottom: 15px;
}
#fliesstext
{
border: 1px;
border-color: #c0c0c0;
border-right-width: 0px;
border-left-width: 0px;
border-style: dashed;
width: 825px;
background: white;
margin-left: auto;
margin-right: auto;
color: black;
font-family: arial;
font-weight: normal;
font-size: 95%;
padding-top: 1px;
padding-left: 25px;
padding-bottom: -5px;
}
#linkkategorie
{
background: grey url(bilder/bg_link.jpg) repeat;
border: 0px;
width: 825px;
margin-left: auto;
margin-right: auto;
color: black;
font-family: arial;
font-weight: normal;
font-size: 95%;
padding-top: 1px;
padding-left: 25px;
padding-bottom: -5px;
}
#verlinkung
{
width: 825px;
background: white;
margin-left: auto;
margin-right: auto;
color: black;
padding-top: 0px;
padding-left: 25px;
}
#foot
{
width: 825px;
background: white;
margin-left: auto;
margin-right: auto;
color: grey;
font-family: arial;
font-weight: normal;
font-size: 75%;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 25px;
}
/** Links
*
*
*/
a:link { text-decoration:none; font-weight:regular; color:grey; }
a:visited { text-decoration:none; font-weight:bold; color:grey; }
a:hover { text-decoration:none; font-weight:bold; background-color:white; }
a:active { text-decoration:none; font-weight:bold; background-color:white; }
a:focus { text-decoration:none; font-weight:bold; background-color:white; }