Frage stellen
Habe sie mal probehalber nur das Layout hochgestellt.
http://www.gwebspace.de/marsonline/index.htm
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="css/test.css" rel="stylesheet" type="text/css" >
<title>Menutest</title>
</head>
<body oncontextmenu="return false">
<div id="index"> <!-- Hauptcontainer-->
<img src="bilder/header.jpg" id="header"> <!-- Header-->
<!--
<div id="sidehead">
Shoutbox
</div>
-->
<div id="headermenue"> <!-- Menüleiste-->
<ul>
<li><a href="../mars-online/home.htm" target="home"><b>Home</b></a></li>
<li><a href="../mars-online/news/news.htm" target="home"><b>NEU</b></a></li>
<li><a href="http://marsonline.byto.de/bilder/bilder.htm" target="home"><b>Bilder</b></a></li>
<li> <a href="../mars-online/fun/fun1.htm" target="home"><b>Fun</b></a></li>
<li> <a href="../mars-online/fun/sprueche.htm" target="home"><b>Sprüche</b></a></li>
<li> <a href="../mars-online/works/works1.htm" target="home"><b>Workz</b></a></li>
<li> <a href="../mars-online/service/service.htm" target="home"><b>Service</b></a></li>
<li> <a href="../mars-online/service/links.htm" target="home"><b>Links</b></a></li>
<li> <b><a href="sb.htm" target="shoutbox">Shoutbox +</a><a href="aus.htm" target="shoutbox">-</a> </b></li>
</ul>
</div>
<!-- Home-->
<iframe id="home" name="home"src="frame.htm" width="100%" height="45%" frameborder="1" allowTransparency="true" scrolling="auto"/></iframe>
<!-- Shoutbox-->
<iframe src="aus.htm" name="shoutbox" frameborder="0" allowTransparency="true" scrolling="no" id="shoutboxframe"></iframe>
<!-- Counter-->
<img src="http://Cool-Counter.de/statistik_digits.php?user=mars-online&c_id=2151" border="0" alt="Statistik by http://Cool-Counter.de" class="counter">
</div>
</body>
</html>
-------
- Code: Alles auswählen
CSS:
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100.01%;
color:white;
background-color: black;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
text-align:center;
}
#index{
position:relative;
text-align:center;
margin:auto;
padding: 0px ;
}
#header{
position:absolute;
top:0px;
left:190px;
font-size: 80%;
background-color: black;
width: 598px;
height:60px;
padding: 0;
border: 1px solid white;
border-bottom: 0px;
}
#home {
position:absolute;
top:78px;
left:190;
width: 598px;
height:533px;
padding: 0px ;
border: 1px solid white;
}
#shoutboxframe{
position:absolute;
float:left;
left:0px;
top:78px;
border:1;
border-color:white;
width:190;
height:700;
}
.counter{
position:absolute;
float:left;
left:193px;
top:614px;
border:1;
border-color:white;
}
.shoutbox2{
position:absolute;
float:left;
left:0px;
top:18px;
border:1;
border-color:white;
width:190;
height:499;
}
#shouthead1 {
position:absolute;
float:left;
left:0px;
top:0px;
font-size: 80%;
background-color: black;
width: 189px;
padding: 0px;
border: 1px solid;
border-color: white;
margin: 0 auto;
}
#shouthead2 {
position:absolute;
top:517px;
left:0px;
font-size: 80%;
background-color: black;
width: 189px;
padding: 0px;
border: 1px solid;
border-color: white;
margin: 0 auto;
}
#headermenue {
position:absolute;
top:61px;
left:190px;
font-size: 80%;
background-color: black;
width: 598px;
padding: 0px;
border: 1px solid;
border-color: white;
margin: 0 auto;
}
#headermenue ul {
list-style-type: none;
margin:0px;
padding: 0px;
}
#headermenue li {
display: inline;
margin-top: 0px;
padding-top: 0px;
}
#headermenue li a, #headermenue li a:link {
text-decoration: none;
padding-left:1px;
padding-right:10px;
padding-top:0px;
color: white;
}
#headermenue li a:visited {
color: white;
}
#headermenue li a:hover, #headermenue li a:focus, #headermenue li a:active {
color: black;
background-color:white;
}
----
Im Firefox sieht alles fast aus wie es soll, nur im IE klebt mir das Layout an der rechten Bildschirmhälfte.
1. Frage: Woran liegt das.
Nun möchte ich noch gerne, dass die drei Elemente Kopfgrafik, Menüzeile und Hauptframe auf der Horizontalen zentriert werden und die einblendbare Shoutbox dann links neben dem Hauptscreen steht. Außerdem soll das Layout nicht verrutschen. Ich habe sehr, sehr viele Seiten gelesen und viel übe die Zentrierung gelesen, komme aber nicht weiter. Könnt ihr mir helfen?
2. Frage: wie kann ich also den Hauptteil zentrieren und die Shoutbox links daneben lassen?
Am Technischen Grundprinzip mit der Shoutbox möchte ich nichts ändern, da der Frame später noch anderweitig verwendet werden soll.
Dankeschön für eure Hilfe