Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 19.08.2005, 14:08
daedalus daedalus ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 19.08.2005
Beiträge: 5
daedalus befindet sich auf einem aufstrebenden Ast
Standard CSS Layout: Probleme mit Mac IE und Safari

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>
Mit Zitat antworten
Sponsored Links