• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Verschobenes DIV-Layout in IE, in Safari is alles ok

M

Mondedelsteine

Neues Mitglied
Guten Tag liebe User,

ich bin am erstellen meiner Homepage.
Ich habe auch schon einige Homepage´s für mich erstellt und geübt.
Wie viele habe ich den Typische weg durchlaufen…
Von einer Frameset-Homepage bin ich jetzt zu Div´s gekommen…
Aber das klappt noch nicht so ganz…in meinem Safari zuhause dieht die Homepage 1a aus…
Schau ich mir dann die Homepage im IE an kriegt man fast Augenkrebs.
Das ganze Design ist verschoben, meine Newszeile funktioniert nicht(war mir aber vorher auch klar) in älteren Versionen…ich weiß aber einfach nicht wie ich es besser hinkriege…
Ich will nicht zurück zum Frameset…aber…das hat funktionier L
Könnt ihr mir bitte! Helfen das auch meine Div-Homepage funktioniert…
Achja, ich habe mal meine ganzen Seiten etwas „zensiert“,
ich möchte ungerne das einer meiner „Kunden“ irgendwo im Netz sieht das ich hier so „leihenhaft“ nachhacke. Wie ich meine Homepage in gang kriege…

Vielen Dank für eure Hilfe

HTML: 
<!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">
<meta name="description" content="">
<meta name="keywords" lang="de" content="">
<meta name="keywords" lang="en-us" content="">
<meta name="keywords" lang="en" content="">
<link rel="stylesheet" type="text/css" href="Style.css">
<title>TITLE</title>
</head>
<body>
<div style="padding: 0px; margin-top: 20px; margin-bottom: 0px; position: absolute; left:50%; margin-left: -512px; background-image:url('http://www.domain.de/Header.png'); background-repeat:no-repeat; height: 128px; width: 1024px;">
 
<div class="News">
<a href="http://www.domain.de/News.html" style="height:19px; width:55px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="65px" alt=""></a>
</div>
 
<div class="UeberUns">
<a href="http://www.domain.de/Ueber_Uns.html" style="height:19px; width:55px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="65px" alt=""></a>
</div>
 
<div class="Seite1">
<a href="http://www.domain.de/Seite1.html" style="height:19px; width:70px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="70px" alt=""></a>
</div>
 
<div class="Seite 2">
<a href="http://www.domain.de/Seite2.html" style="height:19px; width:65px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="65px" alt=""></a>
</div>
 
<div class="Seite3">
<a href="http://www.domain.de/Seite3.html" style="height:19px; width:95px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="95px" alt=""></a>
</div>
 
<div class="Info">
<a href="http://www.domain.de/Info.html" style="height:19px; width:45px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="45px" alt=""></a>
</div>
 
<div class="Gaestebuch">
<a href="http://www.domain.de/Gaestebuch.html" style="height:19px; width:100px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="100px" alt=""></a>
</div>
 
<div class="Links">
<a href="http://www.domain.de/Links.html" style="height:19px; width:55px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="65px" alt=""></a>
</div>
 
<div class="Impressum">
<a href="http://www.domain.de/Impressum.html" style="height:19px; width:115px;"><img src="http://www.domain.de/Transparent.png" height="19px" width="115px" alt=""></a>
</div><iframe src="http://domain.de/Newszeile.html" frameborder="0">
</iframe>
<div class="mainframe">
<div class="Navibar">
</div>
<div class="Title">
<p style="font-size:18pt; margin: 0px;">Seitentitle</p>
<p style="margin:0px; margin-top:10px; font-size:14pt;">Hier steht eine genauere Beschreibung des Inhalts</p>
</div>
<div class="Maintext">
Hier steht der Text!
</div></div></div>
</body>
</html>
 
body{font-family:arial; color:white; background-color:#fffff0; margin:0px; padding:0px; height:1000px; text-align:center;}
a:link{text-decoration:none; color:#ffffff; font-family:arial}
a:link {text-decoration:none; color:#ffffff}
a:visited {text-decoration:none; color:#FFFFFF}
a:hover {text-decoration:none; color:#ffffff}
a:active {text-decoration:none;color:#FFFFFF}
div{font-family: arial; color:white;}
table{font-family:arial; color:white; margin:0px; padding:0px; border-collapse:collapse;}
td{ border-style:solid; border-width:2px; border-color:#ffffff; border-spacing:0px; text-align: center;}
td.left{ border-style:none;text-align: left;}
img{ border-style:none;}
img.pictures{border-width:2px; border-style:solid; border-color:#ffffff;}
iframe{frameborder:0; background-color:#6495ed; height:22px; padding: 0px; margin-top: 168px;  margin-bottom: 0px; left:50%; position: absolute; margin-left: -512px; width: 1024px; border: none; overflow-x: hidden; overflow-y: hidden;}
div.Newsdate{margin-top:6px; margin-bottom:6px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:white; width:150px; height:40px;float: left; text-align:left; padding-bottom:3px;}
div.Newstext{margin-top:6px; margin-bottom:6px; padding-left:20px; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:white; width:600px; height:40px; float:left; text-align:left; padding-bottom:3px;}
div.Home{position: absolute; margin-top:103px; left:50%; margin-left:-490px; margin-bottom:0px; height:19px; width:65px;}
div.News{position: absolute; margin-top:103px; left:50%; margin-left:-410px; margin-bottom:0px; height:19px; width:65px; float: left;}
div.UeberUns{position: absolute; margin-top:103px; left:50%; margin-left:-327px; margin-bottom:0px; height:19px; width:90px; float: left;}
div.Seite1{position: absolute; margin-top:103px; left:50%; margin-left:-220px; margin-bottom:0px; height:19px; width:70px; float: left;}
div.Seite2{position: absolute; margin-top:103px; left:50%; margin-left:-122px; margin-bottom:0px; height:19px; width:65px; float: left;}
div.Seite3{position: absolute; margin-top:103px; left:50%; margin-left:-40px; margin-bottom:0px; height:19px; width:95px; float: left;}
div.Info{position: absolute; margin-top:103px; left:50%; margin-left:77px; margin-bottom:0px; height:19px; width:45px; float: left;}
div.Gaestebuch{position: absolute; margin-top:103px; left:50%; margin-left:140px; margin-bottom:0px; height:19px; width:100px; float: left;}
div.Links{position: absolute; margin-top:103px; left:50%; margin-left:255px; margin-bottom:0px; height:19px; width:65px; float: left;}
div.Impressum{position: absolute; margin-top:103px; left:50%; margin-left:335px; margin-bottom:0px; height:19px; width:115px; float: left;}
div.Navibar{border-right-color:white; border-right-style:solid; border-right-width:2px; margin-left:20px; margin-bottom:20px; margin-top:20px; padding-top:10px; padding-left:10px; height:599px; width:180px; float:left;}
div.Title{position: absolute; margin-top:20px; margin-left:220px; padding-top:10px; height:75px; width:785px; text-align:center; float: left;}
div.Maintext{position: absolute; margin-top:110px; margin-left:220px; margin-bottom:20px; padding-top:20px; height:494px; width:784px; float: left; text-align:center; overflow:auto;}
div.mainframe{background-color:#000061; padding: 0px; padding-bottom:20px; margin-top: 208px; position: absolute; left:50%; margin-left: -512px;  background-repeat:no-repeat; height: 620px; width: 1024px;}
div.Aktualisierung{position: absolute; padding:0px; padding-top:3px; margin-top:0px; margin-left:20px; margin-bottom:0px; height:18px; width:180px; text-align:center;}
div.Punkte{width:400px; text-align:left;}
div.Newsmain{ position: absolute; padding:0px; padding-top:3px; margin-top:0px; margin-left:220px; margin-bottom:0px; height:18px; width:784px; text-align:center;}
 
Du begehst die typischen Einsteigerfehler: du versuchst alles mit absoluter Positionierung zu lösen. Das klappt aber nicht. Wenn Du Elemente anordnen willst, dann solltest Du sie ohne die Eigenschaft "position" ausrichten. Das geht prima mit float, margin und ggfs. noch padding.
 
Erstmal vielen dank für deine Antwort...
Wenn ich aber mit Float arbeite,
und mein Fenster ist zu klein,
verschiebt er mir dann nicht meinen ganzen krempel untereindander?
das habe ich nämlich bei einem "Turtorial" gesehen und fand das richtig scheiße...
ich hätte schon gerne das meine Homepage immer gleich aussieht...
 
Ka was das für eins war...sah auch ziemlich "einfach" gehalten aus...
in pasteltönen falls das hilft xD
ne ok dann werde ich das mal versuchen...mh...
alles nochmal überarbeiten -.-**
dabei hatte ich es grade alles fertig und auf fehler prüfen lassen
und die vorhandenen fehler korrigiert,
naja so is das...
 
Oh man,
irgendwas mach ich immernoch falsch,
jetzt habe ich es soweit hingebastelt...
aber irgendwie stimmt immernoch etwas nicht...
und zwar macht er mir zwar links, oben und unter einen Body-Randabstand von meinen gewünschten 20px,
aber rechts nicht!?
Da muss sich irgendwo noch ein fehler versteckt haben den ich nicht finde?!?!?
HTML: 
body{background-color:#fffff0; margin:0px; margin:20px;}
div.Maindiv{background-color:green; width:1024px; padding:20px; margin-left:auto; margin-right:auto;}
div.Header{background-color:brown; width:1024px; height:168px; }
iframe{background-color:red; height:22px; padding: 0px; margin-top: 18px; width: 1024px; border: none; overflow-x: hidden; overflow-y: hidden;}
div.mainframe{background-color:orange; margin:0px; margin-top:18px; height:620px; width:1024px;}
div.Navibar{background-color:grey; border-right-color:white; border-right-style:solid; border-right-width:2px; margin-left:20px; margin-bottom:20px; margin-top:20px; padding-top:10px; padding-left:10px; height:570px; width:180px; float:left;}
div.Title{background-color:chocolate; position: absolute; margin-top:20px; margin-left:220px; padding-top:10px; height:75px; width:785px; text-align:center; float: left;}
div.Maintext{background-color:blue; position: absolute; margin-top:110px; margin-left:220px; margin-bottom:20px; padding-top:20px; height:470px; width:784px; float: left; text-align:center; overflow:auto;}
div.footer{background-color:lavender; width:1024px; height:22px; margin-top: 18px; margin-bottom:0px;}
An der Hp hab ich sonst nix geändert nur das Extra-Div drum gesetzt,
es heiß Maindiv!
 
also spontan seh ich nur das du margin hier zweimal benutzt:

body{background-color:#fffff0; margin:0px; margin:20px;}
Zum Vergrößern anklicken....

macht natürlich keinen sinn wenn du erst sagst 0px und sofort danach 20px ;)
ansonsten sieht der code an sich ziemlich komisch aus. solltest dir nochmal das ein oder andere dazu ansehen.

gibt auch viele tutorials auf youtube wo nach und nach css und html erklärt wird. nur leider sind viele von diesen videos einfach schrott :D
 
Hallo,

und ich würde sagen spontan zeige ein link oder sollen wir jetzt noch verschieden code zusammensetzten wo wir noch nicht mal sicher sind wie das jetzt bei dir ist zb css zeug.

Cheffchen
 
Also bei gezählten 17 margins in allen Variationen kann schon der Überblick verloren gehen. Ich versuch mal zu überarbeiten.

Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Website</title>
<style type="text/css">

* {
 margin:0;
 padding:0;
}

#wrapper {
 margin: auto;
 padding:20px;
 width:960px; 
 background:orange; 
}

#header {
 margin-bottom:10px;
 padding:20px;
 background:chocolate;
}

#navi {
 height:700px; 
 width:180px; 
 float:left;
 background:grey;
}

#navi ul {
 list-style:none;
}

#navi li {
 margin-bottom:3px;
}

#navi li a {
 display:block;
 background:chocolate;
 color:#fff;
 text-decoration:none;
 padding:5px;
}

#navi li a:hover {
 text-decoration:underline;
}

#rechts{
 margin-left:190px;

}

#title {
 height:90px;
 border-bottom:10px solid orange;
 background:brown; 
}

#title h2 , #title p {
 padding:3px;
 text-align:center;
}

#text {
 background:blue;
 height:600px; 
 overflow:auto;
}


#footer {
 clear:left;
 margin-top: 10px; 
 background:chocolate; 
}

h2 , p {
 padding:10px;
 color:#fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><h1>Meine Homepage</h1></div>
<div id="navi">
<ul>
<li><a href="#">News</a></li>
<li><a href="#">Über uns</a></li>
<li><a href="#">Seite1</a></li>
<li><a href="#">Seite2</a></li>
<li><a href="#">Seite3</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Gästebuch</a></li>
<li><a href="#">Linksammlung</a></li>
<li><a href="#">Impressum</a></li>
</ul>
</div>

<div id="rechts">

<div id="title">
<h2>Seitentitel</h2>
<p>Beschreibung</p>
</div>

<div id="text">
<p>Start steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p>
<p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p>
<p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht der Text!</p><p>Hier steht das Ende</p>
</div>

</div>

<div id="footer">
<p>Fußzeile</p>
</div>

</div>
</body>
</html>
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben