Hallo,
ich wusste nicht, ob ich weitere Fragen wegen meiner Homepage besser in den anderen Thread von mir posten solle oder es besser ist einen neuen aufzumachen. Aber da es eine komplett andere Fragestellung ist, dachte ich mir, mache ich einen neuen auf.
Nun denn bei der Website bin ich auf ein Problem gestoßen, was glaube ich daraus resultiert, dass ich die Website nahezu nur in prozentualen Werten beschrieben habe.
Zum Problem:
Mein Bild im Header bleibt immer gleich groß, egal welche Auflösung ich benutze. Ich habe nun verschiedenste Möglichkeiten probiert, dass der Header bei zu kleiner Auflösung sich über den Rest des Layouts schiebt.
Mein Versuch war einerseits über max-height/width, die größe des Bildes zu beschränken (allerdings nur prozentual). Das hat gar nicht geklappt.
Dann habe ich versucht über den Befehl overflow: hidden bzw. auto versucht, dass das Bild eine Scrollbar bekommt bzw. hinter dem restlichen Layout verschwindet.
Das hat jeweils nur Teilweise geklappt, denn nur in horizontaler Ebene. Vertikal hat sich das Bild dann immer über die Navigation geschoben.
Im Prinzip würde es mir reichen wenn sich das Bild kleiner skaliert falls es andere Teile der Website überdecken würde. Die große Frage ist jetzt wie bekomme ich das hin, möglichst mit prozentualen Werten?
Und dann kam ich zur Frage, was ist eigentlich die bessere Methode?
Die ganze Website in prozentualen Werten oder absoluten Werten zu beschreiben?
Also welche Methode ist am besten für viele verschiedene AUflösungen und am benutzerfreundlichsten?
Im Anschluss noch mein Quellcode:
CSS Teil:
Code:
html, body {
height: 98%;
padding: 0;
margin: 0;
}
#bar {
background-color: #99FF66;
width: 100%;
margin: 0;
padding: 0;
height: 1em;
}
#top {
text-align: center;
height:32.5%;
}
#header {
text-align: center;
margin: 0 11em ;
padding-top: 1.5%;
overflow: auto;
}
#color1 {
float: right;
width: 10em;
background: #009900 ;
height: 100%;
}
#body {
color: black;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em;
height: 100%;
text-align: center;
}
#navigation {
font-size: 0.91em;
font-weight: bold;
padding: 0.5% 0;
background-color: #99FF66;
margin: 0;
text-align: center;
}
#navigation li {
display: inline;
list-style-type: none;
}
#navigation a {
text-decoration: none;
padding: 0.5% 5%;
}
#navigation a:link {
color: black;
}
#navigation a:hover,
#home #nav01 a,
#article #nav02 a,
#debates #nav03 a,
#links #nav04 a,
#contact #nav05 a {
background-color: #009900;
background-image: url(navi2.jpeg);
background-repeat: repeat-x;
background-position: top left;
}
#box {
text-align: center;
border-style: dotted;
margin: 2em 11em ;
overflow: auto;
}
#color2 {
float: right;
width: 10em;
background: #009900 ;
height: 100%;
}
#footer {
background-color: #99FF66 ;
font-size: 0.91em;
padding: 0.5% 0;
margin: 0;
clear: both;
}
#footer li {
display: inline;
list-style-type: none;
}
#footer a {
text-decoration: none;
padding: 0.5% 1%;
}
#footer a:link {
color: black;
}
#footer a:hover {
background-color: #009900;
}
#soft {
margin-right: 20%;
margin-left: 1%;
}
#geasphere {
margin-right: 1%;
margin-left: 20%
}
Und der HTML Teil:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Dieser Beschreibungstext soll einem
Anwender im Suchdienst bei Auffinden dieser Datei erscheinen.">
<meta name="keywords" content="HTML, Meta-Informationen,
Suchprogramme, HTTP-Protokoll">
<title>South African Water Crisis</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
</style>
</head>
<body id="home">
<div id="body">
<div id="bar"></div>
<div id="top">
<div id="color1">
</div>
<div id="header">
<img src="top_banner.jpg" alt="SAWAC Logo" >
</div>
</div>
<ul id="navigation">
<li id="nav01"><a href="index.html">Home</a></li>
<li id="nav02"><a href="articles.html">Articles</a></li>
<li id="nav03"><a href="debates.html">Debates</a></li>
<li id="nav04"><a href="links.html">Links</a></li>
<li id="nav05"><a href="contact.html">Contact</a></li>
</ul>
<div id="color2">
</div>
<div id="box">
<p> Hier steht ein Text zum testen test lalalalalalalalalallalalalalalalalalalalalalalalalalalalalalalalalal</p>
</div>
<ul id="footer">
<li id="soft"><a href="softnet">sponsored by SoftNet</a></li>
<a href="index.html">Home</a>
<a href="index.html">To the top!</a>
<li id="geasphere"> <a href="http://www.geasphere.co.za">also check GeaSphere</a></li>
</ul>
</div>
</body>
</html>
Vielen Dank im vor raus!
World of Players
Website erstellen - Header automatisch skalieren und prozentuale oder absolute Werte?
