Hallo liebe Forumler,
leider bin ich noch nicht ganz so firm im Layouten mit CSS. Aktuell habe ich Probleme eine Layout-Varinate für den Mac (unter Win und Linux, ist alles mit anderen CSS schon so, wie es sein soll) korrekt hinzubekommen. Liegt zum Teil auch daran, dass ich keine eigene Testumgebung für Mac habe.
Unten der Code, normal habe ich alle CSS extern und hier hab ich alles ein bisschen reduziert. Das Problem ist einmal das IE Mac die div mehrspalten nicht nebeneinander darstellt und zum zweiten ist das ganze nicht zentriert.
Wie sieht das ganze denn in Safari aus? Wahrscheinlich komplett zerschossen.
Bin für jede Hilfe dankbar
Jochen
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Seitentitel</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body
{
font-family:"Times New Roman", Times, serif;
font-size:1em;
background-color:#000033;
color: #000099;
line-height:1.1em;
letter-spacing:0.02em;
}
a:link, a:visited, a:active, a:hover
{
text-decoration:none;
font-weight:bold;
color:#000099;
}
a:active, a:hover
{
text-decoration:underline;
}
#wrapper{
width:780px;
margin:0px auto 0px;
text-align:left;
background-image: url(akademie-images/back_blau_basis.gif);
background-repeat:repeat-y;
background-position: center 0px;
min-height:580px;
}
#navigation{
color:#ffffff;
background:#000099;
margin:0;
float:left;
width:106px;
height:580px;
border-right: 0px solid #FFFFFF;}
#content{
width:669px;
height:496px;
margin:0 0px 0 105px;
padding:0px;
color: #000099;
border-left: 0px solid #FFFFFF;
border-right: 0px solid #FFFFFF;
}
#subnavigation {
height:30px;
width:672px;
float:right;
background-color: #000099;
border-top: 0px solid #000000;
border-right: 0px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
color: #FFFFFF;
}
#subtitle {
height:54px;
width:672px;
float:right;
background-color:#3366CC;
border-top: 0px solid #000000;
border-right: 0px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: 1.4em;
color: #FFFFFF;
letter-spacing: 0.1em;
font-weight: bold;
line-height: 2.2em;
}
#unsichtbar {
width: 780px;
height: 20px;
margin:0px auto 0px;
background-color: #000033;
}
#spalte {
width:660px;
float:right;
border-bottom: 1px solid #FFFFFF;
padding-top: 0px;
padding-left: 10px;
padding-right: 10px;
}
#mehrspalten {
float:left;
padding-left: 10px;
padding-top: 10px;
background-color:#C7CDE7;
}
p {
margin: 0.1em;
padding: 0.1em;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id=unsichtbar></div>
<div id="wrapper">
<div id="navigation" style="clear:right;">
<p style="margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;">Hier steht die Navigation</p>
</div>
<div id="subnavigation">
<p style="margin: 0px 0px 0px 0px;padding: 0px 0px 0px 0px;">Hier steht die Subnavi</p>
</div>
<div id="subtitle">
<div align="center">Überschrift</div>
</div>
<div id="content">
<div id="mehrspalten" style="width:47%;">[img]bild_dummy.jpg[/img]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat.</P>
</div>
<div id="mehrspalten" style="width:47%;">[img]bild_dummy.jpg[/img]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam ultricies, metus sed rutrum dignissim, leo dui sollicitudin sapien, sit amet sagittis est metus ut erat.</P>
</div>
<div id="spalte"></div>
</div>
<div id="unsichtbar" style="height: 0px; clear:both;"></div>
</div>
<div id="unsichtbar" style="height: 20px;"></div>
</body>
</html>