Problem bei der Positionierung..
Alex
- css
0 Zeromancer0 Alex
Hallo,
ich bin gerade dabei meine Seite auf HTML mit CSS umzustellen. Ich möchte die Seite eigentlich speziell für Firefox optimieren, habe aber nichts dagegen wenn sie im IE auch richtig dargestellt wird. Jetzt habe ich das Problem, das 2 divs sich überlappen. Ich finde einfach den Fehler nicht. Danke für eure Hilfe. Gruß, Alex
Hier der Code der css Datei (neu.css):
* {
margin: 0pt;
padding: 0pt
}
h1 {
background-color: inherit;
color: Black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 1.0em;
}
body {
margin: 0;
}
#container {
border: 1px solid red;
margin-left: 17em;
margin-right: 17em;
padding: 0em;
}
#header {
border: 1px solid black;
padding-left: 0;
padding-right: 0;
margin: auto;
text-align: center;
}
#mainframe {
width: 79%;
height: 100%;
border: none;
}
#sidebar {
background-color: inherit;
color: inherit;
border: 1px solid green;
float: right;
width: 20%;
}
#newsframe {
width: 100%;
height: 100%;
border: none;
}
/*Navigation top*/
#navtop {
background-color: inherit;
color: Black;
font-style: normal;
text-decoration: none;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.9em;
font-weight: bold;
}
#navtop a {
background-color: inherit;
text-decoration: none;
color: Black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navtop a:hover {
background-color: inherit;
color: inherit;
border-bottom: 1px solid black;
border-top: 1px solid black;
}
#navtop li {
display: inline;
}
/*Navigation side*/
#navside {
background-color: inherit;
color: inherit;
font-size: 0.7em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#navside li {
list-style-type: none;
}
#navside a {
background-color: inherit;
color: Black;
text-decoration: none;
}
#copyright {
background-color: inherit;
color: Black;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.6em;
}
Hier die HTML Datei (indexneu.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="DE" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Duncman Entertainment</title>
<link rel="stylesheet" href="neu.css" type="text/css" media="screen,projection" />
</head>
<body>
<div id="container">
<div id="header">
<img src="images/logo.jpg" alt="" height="100" width="700" />
<div id="navtop">
<ul>
<li><a href="about.htm" target="main" >über uns </a></li>
<li><a href="artists.htm" target="main">artists</a></li>
<li><a href="downloads.shtml" target="main">downloads</a></li>
<li><a href="links.htm" target="main">links</a></li>
<li><a href="contact/index.php" target="main">kontakt</a></li>
<li><a href="http://www.duncman.de/guestbook/index.php" target="main">gästebuch</a></li>
<li><a href="gallery.htm" target="main">gallerie</a></li>
<li><a href="dates.htm" target="main">dates</a></li>
<li><a href="press.htm" target="main">presse</a></li>
<li><a href="faq.htm" target="main">FAQ</a></li>
</ul>
</div>
<!--header--></div>
<div id="sidebar">
<h1>News</h1>
<iframe id="newsframe" name="news" src="http://www.duncman.de/news.php"></iframe>
<ul id="navside">
<li><a href="newsletter.html" target="main">NEWSLETTER</a></li>
<li><a href="tellafriend/index.php" target="main">EMPFEHL' UNS</a></li>
<li><a href="contact/index.php" target="main">KONTAKT</a></li>
<li><a href="disclaimer.htm" target="main">HAFTUNGSAUSSCHLUSS</a></li>
</ul>
<p id="copyright">© Duncman Ent. 2006</p>
<!--sidebar--></div>
<iframe id="mainframe" src="home.htm" name="main"></iframe>
<!--container--></div>
</body>
</html>
Hallo Alex,
ich bin gerade dabei meine Seite auf HTML mit CSS umzustellen. Ich möchte die Seite eigentlich speziell für Firefox optimieren, habe aber nichts dagegen wenn sie im IE auch richtig dargestellt wird. Jetzt habe ich das Problem, das 2 divs sich überlappen. Ich finde einfach den Fehler nicht.
optimiere nicht für FF, schreibe einfach sauberen Quelltext. :-)
Welche Divs überlappen sich?
In der Regel gibt man dem Element, dass nicht gefloatet wird ein margin von der Breite des gefloateten Elements:
Bereich wird rechts gefloatet - z.B. Navigation - mit einer Breite von 15em, dann gibt man dem nachfolgenden Element - z.B. dem Content ein margin-right von 15em oder mehr. Vielleicht liegt es daran?!
Mit freundlichen Grüßen,
André
Hallo Alex,
ich bin gerade dabei meine Seite auf HTML mit CSS umzustellen. Ich möchte die Seite eigentlich speziell für Firefox optimieren, habe aber nichts dagegen wenn sie im IE auch richtig dargestellt wird. Jetzt habe ich das Problem, das 2 divs sich überlappen. Ich finde einfach den Fehler nicht.
optimiere nicht für FF, schreibe einfach sauberen Quelltext. :-)
Welche Divs überlappen sich?
In der Regel gibt man dem Element, dass nicht gefloatet wird ein margin von der Breite des gefloateten Elements:
Bereich wird rechts gefloatet - z.B. Navigation - mit einer Breite von 15em, dann gibt man dem nachfolgenden Element - z.B. dem Content ein margin-right von 15em oder mehr. Vielleicht liegt es daran?!
Mit freundlichen Grüßen,
André
Der div "navside" lappt nach unten aus dem div "container".
Gruß, Alex