nicht angemeldet
Hallo!
Ich möchte auf einer Startseite gerne ein Bild haben, also links ein Navigationssystem und rechts davon ein Bild, welches den Rest des Bildschirmes ausfüllt (so dass man möglichst nicht scrollen muss)
Habe jetzt schon verschiedene Dinge probiert, bin aber nicht wirklich zufrieden. Wenn ich es mit width & height probiere, sieht es bei einen Rechner perfekt aus und auf den anderen ist es viel zu klein. So wie es jetzt eingestellt (siehe navi) ist, ist es auf einigen Rechner viel zu groß. Gibt es vielleicht eine Zwischengröße, die annehmbar ist??
Ich weiß man könnte es noch irgendwie flexibel einstellen, aber das ist hier nicht umsetzbar, da das Bild an verschiedenen Stellen verlinkt werden soll.
Danke für eure Hilfe!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Startseite</title>
<style type="text/css">
html,body
{
background-color:ivory;
}
#menu {
width: 13em;
float: left;
}
#menu a {
display:block;
width:150px;
margin: 1em 0; padding:7px 0 10px 20px;
font: bold 14px/1 sans-serif;
color:#c60;
background: url("button.gif") 0 0 no-repeat;
text-decoration: none;
}
#menu a:hover {
background: url("button1.gif") 0 0 no-repeat;
color: #E9BE75;
}
#menu a:active {
background: url("button2.gif") 0 0 no-repeat;
color:white;
}
a:hover
{
background: none;
color: #666;
}
img{
border:0px;
}
abbr, pre, code
{
cursor: help;
}
#h1 {
margin:0px;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
text-align: center;
}
}
h2
{
color: #B3655A;
margin: 0.5em 0;
font-size: 1.2em;
}
ul.NoBulletNoIndent
{
list-style-type: none;
margin-left: 0px;
padding-left: 0px
}
#navi{
position:absolute;
list-style:none;
width:1024px;
height:720px;
margin-top:10px;
left:170px;
border:0px;
background:url(fixundfertig.jpg);
background-repeat:no-repeat;
}
#navi li a{
position:absolute;
text-indent:-9999px;
display:block;
text-decoration:none;
width:70px;
height:70px;
background:none;
}
* html #navi li a{
width:74px; /* IE */
height:74px;
}
#navi li a:hover{
background:white;
opacity:0.5; /* CSS3 - FF, Opera und Safari */
-moz-opacity:0.5; /* für ältere Mozilla Versionen */
-khtml-opacity:0.5; /* für ältere Safari und Konqueror Versionen */
filter:alpha(opacity=50); /* IE */
}
#button1 a{
top:520px;
left:650px;
border:4px solid green;
}
#button2 a{
top:600px;
left:35px;
border:4px solid red;
}
#button3 a{
top:220px;
left:890px;
border:4px solid blue;
}
#button4 a{
top:140px;
left:200px;
border:4px solid yellow;
}
#button5 a{
top:100px;
left:400px;
border:4px solid black;
}
</style>
</head>
<body>
<div id="h1">
<h1>Kinder- und Jugendbücherei</h1>
</div>
<div id="menu">
<ul class="NoBulletNoIndent">
<li><a href="information.htm" title="Allgemeine Informationen über die Bücherei"><big>Information</big></a></li>
<li><a href="Anmeldung/Anmeldung_index.html" title="Wie funktioniert das Ausleihen"><big>Anmeldung</big></a></li>
<li><a href="Fuehrungen/Spiralcurriculum.pdf" title="Was bietet die Bibliothek für Kinder?"><big>Führung</big></a></li>
<li><a href="lesefoerderung.htm" title="Informationen zur Leseförderung"><big>Leseförderung</big></a></li>
<li><a href="katalog.htm" title="Hier finden Sie unseren Bestand, an Büchern, CD´s, DVD´s und vieles mehr."><big>Katalog</big></a></li>
<li><a href="Surfen/Linkliste_index.html" title="Spiel und Spaß im Internet"><big>Surfen</big></a></li>
<li><a href="Monatsrätsel/Raetsel_index.html" title="Monatsrätsel"><big>Monatsrätsel</big></a></li>
<li><a href="buchtipp.htm" title="Der monatliche Buchtipp"><big>Buchtipp</big></a></li>
<li><a href="impressum.htm" title="Rechtliche Aspekte"><big>Impressum</big></a></li>
</ul>
</div>
<ul id="navi">
<li id="button1"><a href="#" title="Allgemeine Informationen über die Bücherei">Button 1</a></li>
<li id="button2"><a href="#" title="Wie funktioniert das Ausleihen">Button 2</a></li>
<li id="button3"><a href="#" title="Was bietet die Bibliothek für Kinder?">Button 3</a></li>
<li id="button4"><a href="#" title="Der monatliche Lesetipp">Button 4</a></li>
<li id="button5"><a href="#" title="Informationen zur Leseförderung">Button 5</a></li>
</ul>
</body>
</html>