Hallo wieder mal!
Mit sehr viel Mühe habe ich die homepage unten zusammengestellt, um Sie, wenn Sie fertig ist in ein CMS einzubinden. Da kamen viele Sachen die für mich noch schwierig waren, zB. dass die Boxen in denen der Text steht verhältnismäßig gleich größer wird, wie auch der Text, wenn man die Seite mit dem Mausrad und STRG skaliert. Der Rand oben ist immer gleich, der untere Rand verhält sich relativ zur Seitengröße.
Mit ENTSETZEN
musste ich feststellen, dass der IE die Seite total anders anzeigt. Kann mir jemand bei der einen oder anderen Stelle helfen, die Darstellung vom IE an die vom FF anzupassen? Das wäre total nett!
Danke im Vorraus! Hier noch der Quellcode:
HTML:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<title>FF und IE</title>
<link rel="stylesheet" type="text/css" href="./basis.css" />
</head>
<body>
<div id="seite">
<div id="vertik"></div>
<div id="menuspalte">
<ul id="menu">
[*][url='././index.html']Menupunkt1[/url]
[*][url='index.html']Menupunkt2[/url]
[*][url='index.html']Menupunkt3, geoeffnet[/url]
[*]<ul id="menu2">
[*][url='index.html']Untermenu1-Menupunkt1[/url]
[*][url='index.html']Untermenu1-Menupunkt2, geoeffnet[/url]
[*]<ul id="menu3">
[*][url='index.html']Untermenu2-Menupunkt1[/url]
[*][url='index.html']Untermenu2-Menupunkt2[/url]
[*][url='index.html']Untermenu2-Menupunkt3[/url][/list]
[*][url='index.html']Untermenu1-Menupunkt3[/url][/list]
[*][url='index.html']Menupunkt4[/url]
[/list]
</div>
<div id="mitte">
[img]./images/titel.jpg[/img]
<h1>Dies ist die Überschrift für die Suchmaschinen</h1>
<p class="intro">Dieser Text steht hier als class p.intro und ich sage nur:[url='http://www.google.de']hier![/url]</p>
Dies ist der normale p-text</p>
<hr />
</div>
<div id="logospalte"><div id="logo">[img]./images/logo.gif[/img]
</div><div id="nav">
Navi-Testtext</p></div></div>
</div>
<div id="footer">
footer-testtext</p></div>
</body>
</html>
Alles anzeigen
und hier CSS:
Code
body {
margin: 0;
border: 0;
padding: 0;
font-weight: lighter;
font-size: smaller;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
background-color: black;
}
#seite {
position: fixed;
top: 55px;
width: 100%;
height: 85%;
background-color: white;
}
#menuspalte {
float: left;
position: relative;
margin-right: 30px;
top: 246px;
left: 1em;
width: 14em;
height: inherit;
}
#mitte {
position: absolute;
left: 19em;
top: 195px;
width: 37em;
}
#logospalte {
left: 0;
position: relative;
padding-top: 20px;
width: 57em;
}
#logo {
float: right;
right: 0;
position: absolute;
color: Highlight;
}
h1 {
color: Gray;
font-weight: bolder;
font-weight: 900;
font-size: large;
}
#vertik {
position: absolute;
left:16em;
width: 1px;
height: 100%;
background-color: gray;}
#nav {
color: Silver;
font-weight: lighter;
font-size: x-small;
position: absolute;
left: 46ex;
top: 85px;
}
html > body #footer {
position: absolute;
bottom: 0;
}
#footer {
padding-left: 30px;
font-size: xx-small;
font-style: normal;
font-weight: lighter;
color: Silver;
float: left;
position: relative;
}
.intro {
font-weight: 600; }
ul#menu {
padding: 0;
}
ul#menu2 {
padding-left:1ex;
}
ul#menu3 {
padding-left:1ex;
}
ul#menu li {
list-style: none;
}
ul#menu a {
display: block;
padding: 0.2em;
text-decoration: none;
}
ul#menu a:link {
font-size: larger;
}
ul#menu a:visited {
color: #666;
}
ul#menu a:hover {
color: #F7A218;
}
ul#menu a:active {
color: #F7A218;
}
img.headline {
position: relative;
left: -50px;
}
Alles anzeigen