Liebe Community,
ich komme nicht mehr weiter...
Ich habe vor kurzem angefangen mir selber das erstellen von Websites mit html/css und js beizubringen. Und bin nun an meier ersten Blockade angelangt.
Alle meine kreierten Websites sind sobald ich sie auf einem Bildschirm ausgebe, der eine größere Auflösung hat als mein Bildschirm, an dem ich die Site erstellt habe, ist alles verzogen und passt sich nicht automatisch an, so wie es jedoch bei jeder anderen website im www der fall ist.
Bestes Beispiel:
(Hier wollte ich eine Website für ein Webradio-Projekt erstellen)
Auf meinem Bildschirm ist alles perfekt.
Sobald ich die Datei auf dem auf meinem TV bei 1980x1080 (oder so ähnlich) im Browser ausgebe, ist
alles zu klein, unten und rechts ist weiß.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>radioESSEFF - Home</title>
<link rel="shortcut icon" href="images/icon.png" />
<link href="css/bildschirm.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body id="startseite">
<div id="wrapper">
<div id="kopfbereich">
<div class="skiplink"><a href="#textbereich">Zum Inhalt sprengen</a></div> <!-- Skiplink für Barrierefreiheit -->
</div> <!-- Ende Kopfbereich -->
<div id="navibereich">
<ul>
<li id="navi01"><span>Home</span></li>
<li><a href="2ndstep/programm.html" title="Zur Programmübersicht">onAIR</a></li>
<li><a href="2ndstep/stream.html" title="Zum Stream">Stream</a></li>
<li><a href="2ndstep/aboutus.html" title="Ein paar Infos über Uns">About Us</a></li>
<li><a href="2ndstep/forum.html" title="Zum Forum">Forum</a></li>
<li><a href="2ndstep/contact.html" title="Zur Kontaktseite">Kontakt</a></li>
</ul>
</div> <!-- Ende Navibereich -->
<div id="textbereich">
<h2>Radio EssEff - Kiel's Finest WebStream !!</h2>
<p>Das Warten lohnt. Hier ensteht derweil eine neue Webpräsenz.</p>
<div id="main_logo"></div>
<p><a href="http://www.google.de" title="Hauptseite von Google">EXIT</a></p>
</div> <!-- Ende Textbereich -->
<div id="fussbereich">
<address>Radio Essef Int., Corp., LTD. · Kästchenweg 12 · 01234 Boxberg
<br>
Tel.: 01234 567890 · [email protected]
</address>
</div> <!-- Ende Fußbereich -->
</div> <!-- Ende Wrapper -->
</body>
</html>
und hier das dazugehörige Stylesheet:
/* =====================================
Stylesheet - Radio ESSEFF
Stand: BAUARBEITEN - PROVISORISCHE LÖSUNG
Datei: bildschirm.css
Datum: 18. März 2010
Autor: MowDawg
Aufbau: 1. Kalibrierung
2. Allgemeine Styles
2.1. Hyperlinks
2.2. Klassen & IDs
3. Styles für Layoutbereiche
4. Sonstige Styles
4.1. Kontaktformular
===================================== */
/* ================================
1.Kalibrierung
================================ */
* { padding: 0; margin: 0; }
h2, p, ul, ol { margin-bottom: 0; }
ol ul { margin-bottom: 0; }
li { margin-left: 2em; }
/* ================================
2. Allgemeine Styles
================================ */
html { height: 101%; }
body {
background: white url(../images/esseff_back.jpg) no-repeat fixed;
color: white;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
h1 { font-size: 150%; color: white; }
h2 { font-size: 130%; color: white;}
address {
text-align: center;
font-size: 80%;
font-style: normal;
letter-spacing: 2px;
line-height: 1.5;
}
/*=====================
2.1 Hyperlinks */
a {
text-decoration: none;
outline: none;
}
a:link {
color: orange;
} /* nicht-besuchte Links */
a:visited {
color: red;
} /* besuchte Links */
/*=====================
2.2 Klassen & IDs */
.skiplink{
position:absolute;
top: -5000px;
left: -5000px;
width: 0;
height: 0;
overflow: hidden;
display: inline;
}
#logo {
background-color: white;
color: black;
padding: 5px;
border: 5px solid #d9d9d9;
}
/* ================================
3. Styles für Layoutbereiche
================================ */
#wrapper {
background-color: #353535;
background-position: -360px;
color: black;
width: 720px;
height: 900px;
margin: 0 auto;
}
#kopfbereich {
background: #353535 url(../images/main_logo_sized.jpg) no-repeat;
color: white;
padding: 10px 20px 0 20px; /* Oben - Rechts - Unten - Links */
margin-bottom: 0;
width: 680px;
height: 290px;
}
#navibereich {
text-align: center;
padding: 4px 8px;
background-color: #431F5D;
margin-top: 0;
border-bottom: 1px solid black;
}
#navibereich ul {
margin-bottom: 0;
}
#navibereich li {
display: inline;
list-style-type: none;
margin-right: 10px;
margin-left: 0;
}
#navibereich a,
#navibereich span {
background-color: #431F5D;
color: black;
padding: 4px 8px;
border-bottom: 1px solid black;
}
#navibereich a:hover,
#navibereich a:focus {
background-color: #353535;
color: white;
border-bottom-color: #353535;
}
#startseite #navi01 span,
#programmseite #navi02 span,
#streamseite #navi03 span,
#infoseite #navi04 span,
#forumseite #navi05 span,
#kontaktseite navi06 span {
background-color: #353535;
color: white;
border-bottom-color: #353535;
}
#textbereich {
color: white;
}
#main_logo {
width: 720px;
height: 700px;
margin: 10px auto;
background-image: url(../images/header.jpg);
background-repeat: no-repeat;
background-color: black;
}
#textbereich ul li {
list-style-type: square;
color: black;
}
#fussbereich {
padding: 10px auto;
background-color: #431f5d;
color: white;
}
/* ===================================================
ENDE DES STYLESHEETS
=================================================== */
Ich weiß nicht was ich falsch gemacht habe !!
ich muss irgendwas kleines vergessen haben..
Meine Frage habe ich bisher auch noch in keinem FAQ gesehen, deswegen poste ich hier einfach mal
mit der Hoffnung jemand kann mein Problem identifizieren und mir helfen !!
Vielen Dank schonmal im Vorraus
