nicht angemeldet
Moin,
wir haben in der Firma standardmäßig IE 5.0 .
ich versuche ein CSS-Layout mit <div> für eine Formular-CD zu erarbeiten:
oben: header mit 100% breite und Kapitelbeschreibung
links: Navi mit Liste und float:left um
rechts: den Inhaltscontainer bündig zu kriegen sowie
unten: dann eine Fusszeile mit %copy;, aich 100% über die ganze Seite.
Insofern alles klar. Jetzt sollten sich nur noch Navi und Inhalt einig sein, dass wenn
1. Eins von beiden länger ist als der Bildschirm es darstellt, sich beide auf das längere Element einigen und die 'längere Länge' annehmen.
2. Wenn beide kürzer als das Anzeigefenster sind, trotzdem der Inhalt bis nach unten reicht, zur Fußzeile.
Ist irgendwie ja immer das gleiche Theater mit diesen Tabellen-losen Layouts. ;-)
Da ich zur Zeit nix online stellen kann, bitte ich schon mal um Verzeihung für das posten des Quelltextes:
**************** HTML *****************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FIRMA</title>
<meta http-equiv="content-type" content="application/xhtml+xml ; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style/css/style.css" />
</head>
<body>
<div id="container">
<div id="top">
<h1>Ablauf risikoorientierter Abschlussprüfung</h1>
</div>
<div id="navi">
<ul>
<li> </li>
<li class="leer"> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<div id="content">
<img src="*.gif" width="540" height="780" alt="Baumstruktur" title="Ablauf risikoorientierter Prüfungsablauf"/>
</div>
<div id="foot">
<span class="copy">© </span>
</div>
</div>
</body>
</html>
******************** CSS **********************************
/*STYLE FÜR ALLE DOKUMENTE*/
html, body {
margin:0 0 0 0;
padding:0 0 0 0;
text-align:center;
background:#ccc;
color:#000;
}
/*STYLE FÜR DEN ÄUSSEREN CONTAINER*/
#container {
background: #fff;
padding:0 0 0 0;
margin:0 0 0 0;
}
/*STYLE FÜR DEN HEADBEREICH*/
#top {
background: #fff url(../pixx/hg-top.gif);
height:100px;
}
#top h1 {
color:#fff;
font-size:18px;
text-align:right;
padding:10px 30px 0 0;
}
/*STYLE FÜR DEN NAVIGATIONSBEREICH*/
#navi {
background: #ccc url(../pixx/hg-links.gif);
width:144px;
float:left;
text-align:center;
}
#navi img {
border:0px;
}
#navi ul {
list-style-image: url(../pixx/drucker.gif);
text-align:left;
margin:auto;
padding:0 0 100px 16px;
}
#navi li {
white-space:normal;
font-size:11px;
margin-top:5px;
width:100%;
}
#navi li.leer {
list-style-type:none;
list-style-image:none;
}
#navi a:link {
color: #000;
text-decoration:none;
}
#navi a:visited {
color: #000;
text-decoration:none;
}
#navi a:hover {
color: #ff0000;
text-decoration:none;
}
#navi li:link {
background:transparent;
color:#000;
text-decoration:none;
}
#navi li:hover {
background:transparent;
color:#000;
text-decoration:none;
}
#navi li:hover {
background:#fff;
color:#ff0000;
}
#navi li.leer:hover {
background:transparent;
}
/*STYLEBEREICH FÜR DEN INHALT*/
#content {
background:transparent;
color:#000;
}
#content .zitat {
font-weight:bold;
font-size:12px;
}
#content ul {
text-align:left;
margin:auto;
list-style-type: square;
padding:50px 0 0 100px;
}
#content li {
font-family:arial;
font-weight:bold;
font-size:14px;
margin-top:5px;
}
#content ul.innen {
padding:10px;
list-style-type:circle;
list-style-position:inside;
}
#content ul.mehrinnen {
padding:10px;
list-style-type:circle;
list-style-position:inside;
}
/*STYLE FÜR DEN FOOT-BEREICH*/
div#foot {
background:#cccccc;
text-align:right;
}
#foot .copy {
font-size:10px;
padding: 0 10px 0 0;
margin: 0 30px 0 0;
line-height:50px;
}
*************************************************************
Vielen Dank für jede Anregung und Kritik.
Mit freundlichen Grüßen
André
ss:{ zu:) ls:& fo:) de:] va:) ch:{ sh:) n4:# rl:° br:& js:| ie:% fl:| mo:}
http://forum.de.selfhtml.org/archiv/2003/10/60651/#m341175