Feeds:
Публикации
Коментари

Archive for the ‘Hilfe!!!’ Category

Hallo,
habe hier eine Webseite mit 3-spalten Layout + Header, alles durch divs + faux-column Technik erstellt. Sieht normal in Mozilla aus, IE aber versetzt die einzelne divs nach unten… Die Divs Sidebar2 + Maincontent werden später durch PHP-script gefüllt (dynamisch erzeugt von XML über XSLT), aber das Problem mit der Darstellung ist noch hier am Anfang zu sehen.
Hätte jemand Idee wo genauer das Problem im CSS liegt?

Das HTML code:

<!DOCTYPE html
PUBLIC „-//W3C//DTD XHTML 1.0 Transitional//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“&gt;
<html xmlns=“http://www.w3.org/1999/xhtml&#8220; xml:lang=“de“ lang=“de“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″/>
<link rel=“stylesheet“ type=“text/css“ href=“campe_ausschnitt.css“/>

</head>
<body id=“body“>
<div id=“container“>
<div id=“header“>
<h2>Wörterbuch zur Verdeutschung und Erklärung <br/>der unseren Sprache
aufgedrungenen fremden Ausdrücke </h2>
</div>
<div id=“nav“>
<div id=“nav_main“>
<ul>
<li>
<a href=“main.php?page=vorwort1.html“>Vorwort 1</a>
</li>
<li>
<a href=“main.php?page=vorwort2.html“>Vorwort 2</a>
</li>
<li>
<a href=“main.php?page=regel.html“>Preisschrift</a>
</li>
<li>
<a href=“main.php?page=personenregister.html“
>Personenregister</a>
</li>
<li>
<a href=“main.php?page=impressum.html“>Impressum</a>
</li>
<li>
<a href=“main.php?page=toc_vm_webserver.html“>Zum
Faximile-Ansicht</a>
</li>
</ul>
</div>
</div>
<div id=“main“>
<div id=“sidebars“>
<div id=“sidebar1″>
<p>
<a href=“main.php?xmlfile=a“>
<span class=“letters“>A</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>B</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>C</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>D</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>E</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>F</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>G</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>H</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>I</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>J</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>K</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>L</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>M</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>N</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>O</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>P</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>Q</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>R</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>R</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>S</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>T</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>U</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>V</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>W</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>X</span>
</a>
<br/>
<a href=“lemmata.php?auswahl=x2″ target=“Lemmata“>
<span class=“letters“>Z</span>
</a>
</p>
</div>
<div id=“sidebar2″>
<br/>
<form id=“form“ method=“get“ action=“main.php“>
<ul>
<li>
<input name=“find“ type=“text“ size=“20″/>
</li>
<li>
<input name=“goButton“ type=“submit“
value=“Suche“/>
</li>
</ul>
</form>
<br/>
</div>
</div>
<div id=“mainContent“>
<h4> W&ouml;rterbuch zur Erkl&auml;rung und Verdeutschung der
unserer Sprache aufgedrungenen fremden Ausdr&uuml;cke </h4>
<h5> Ein Erg&auml;nzungsband zu Adelung’s und Campe’s
W&ouml;rterb&uuml;chern </h5>
<br/>
<h5> Neue starkvermehrte und durchg&auml;ngig verbesserte
Ausgabe<br/> von <span class=“name“> Joachim Heinrich
Campe</span>,<br/> Dokter der Gottesgelehrtheit. </h5>
<br/>
<p> Eines Volkes Ehre h&auml;ngt gr&ouml;&szlig;tentheils
an seiner Muttersprache. Diese ist der Laudesehre Fuhr=werk (
<span class=“roman“>Vehikel</span>). Ueber sie
mu&szlig; man sch&auml;rfer halten, &uuml;ber ihre
Reinigkeit mu&szlig; man mehr eifern, als &uuml;ber der
zartesten Liebsten Ehre . <br/>
<span class=“bibl“>
<br/>Realis de Vienna. </span>
</p>
<h6> Braunschweig, 1813. In der Schulbuchhandlung. </h6>
</div>
</div>
</div>
</body>
</html>

Das CSS-code:

@charset „utf-8“;
/* CSS Document */

#body {

background: #EEEEEE;
margin: 0px;
padding: 0px;
text-align: center;
color: #000000;
}

#container {
width: 800px;
background-image: url(„mainContent.gif“);
background-repeat: repeat-y;
background-position: right;
margin: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
border-color: white;
border-style: groove;
height: 810px;
}

#header {
width: auto;
margin-bottom: 0px;
background: #CCCCCC;
border-bottom: 1px black solid;
padding: 0px 10px;
}
#header h2 {
text-align: center;
margin: auto;
padding: 10px 0;
}

#nav_main {
width: 100%; /* Einfassen der Floats im IE */
float:left; /* Einfassen der Floats in allen anderen Browsern */
background: transparent url(„background.gif“) repeat-x center right;
margin-top: 1px;
margin-bottom: 5px;
border-bottom: 1px #333 solid;
line-height: 0px;
}

#nav_main ul {
float:left;
display:inline; /* Fix für IE Doubled Float Margin Bug */
margin:0; /* Standard-Listendefinition zurücksetzen */
padding: 0;
margin-left: 43px; /* Abstand des ersten Buttons vom linken Rand (-2 Pixel für 3D-Schatten) über basemod.css anpassen */
border-left: 1px #aaa solid;
border-right: 1px #fff solid;
}

#nav_main ul li {
float: left;
display:inline; /* Fix für IE Doubled Float Margin Bug */
margin: 0;
padding: 0;
font-size: 1.0em;
line-height: 1em;
list-style-type: none;
border-left: 1px #fff solid;
border-right: 1px #aaa solid;
}

#nav_main ul li a {
display:block;
width: auto;
font-size: 0.9em;
font-weight: bold;
background: transparent;
text-decoration: none;
color: #000;
margin: 0;
padding: 0.5em 0.8em 0.5em 0.8em;
}

#nav_main ul li a:hover {
background: #eee;
color: #333;
text-decoration: none;
}

#nav_main ul li#current {
border-left: 1px #444 solid;
border-right: 1px #888 solid;
background: transparent url(„background_active.gif“) repeat-x center right;
}

#nav_main ul li#current a,
#nav_main ul li#current a:hover {
color: #fff;
background: transparent;
text-decoration: none;
}

#main {
position: relative;
width: auto;
left: 0px;
top: 3px;
margin-top: 0px;
padding: 0px;
background-image: url(„main_content2.gif“);
background-repeat: repeat-y;
background-position: right;
}

#form{
margin-left: 3px;
width: auto;
margin-top: 10px;
}

#form ul{
margin-left: 0px;
width: auto;
margin-top: 0px;
}
#sidebars {
position: absolute;
width: auto;
left: 0px;
top: 30px;
margin-top: 0px;
padding: 0px;
background-image: url(„sidebar2.2.gif“);
background-repeat: repeat-y;
background-position: left;
}

#sidebar1 {
position: absolute;
top: 0px;
height: 700px;
width: 30px;
border-right: solid white 1px;
border-bottom: solid white 1px;
background: #AAAAAA;
}

#sidebar2 {
position: relative;
top: 0px;
left: 32px;
width: 220px;
height: 700px;
border-right: white solid 1px;

}
#sidebar1 h3, #sidebar1 p, #sidebar2 p, #sidebar2 h3{
margin-left: 10px;
margin-right: 10px;
}

#sidebar2 a {
text-decoration:none;
}

#mainContent {
position: absolute;
top: 30px;
left: 233px;
border-right: white solid 1px;
width: 566px;
background-color: transparent;
background-image: url(„mainContent.gif“);
background-repeat: repeat-y;
background-position: right;
height: 700px;
overflow:scroll;
}
#mainContent p {
margin-left: 10px;
margin-right: 10px;
font: 1em „Times New Roman“, Arial, Helvetica, sans-serif;
}

.letters {
float: left;
margin-right: 8px;
font: 0.9em „Times New Roman“, Arial, Helvetica, sans-serif;
font-weight:bold;
text-decoration:none;
color:blue;
}
.a {
text-decoration:none;
}
.a:hover
{background-color: #dddddd
}
.roman {
font-family: monospace;
font-size: 1em;
text-align: left;
}

.bibl{
color:#0000cd;
}

.name{
font-variant:small-caps;
color:#0000cd;
}

h3 {
font-size: 1.6em;
font-weight: normal;
text-align: center;
}

h4 {
font-size: 1.4em;
font-weight: normal;
text-align: center;
}
h5 {
font-size: 1.2em;
font-weight: normal;
text-align: center;
}

h6 {
font-size: 1.1em;
font-weight: normal;
text-align: center;
}

Danke im Voraus!

Advertisements

Read Full Post »