Hallo an alle,
Habe folgendes problem, ich habe den content extra mit viel blindtext gefüllt damit man es besser nach vollziehen kann. Scrollt man den text runter bleibt der container mit den kontaktdaten nicht unten links in der ecke.
Das nächste problem sind die beiden container links, die navigaton und die kontaktdaten. Ich habe extra ein paar untermenüpunkte mehr eingetragen um es besser zu verdeutlichen. Wenn man zum beispiel den Browser verkleinert dann schiebt sich der container kontaktdaten über die navigation.
Habt ihr vielleicht ein paar tips für mich.
Hier der code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>Titel</title>
<link href="css/grundlayout.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/inhalt.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="header">
<div id="logolinks">
[img]../../images/logo.gif[/img]
</div>
<div id="logorechts">
[img]../../images/logo.gif[/img]
</div>
<h1>InHausTec GmbH</h1>
</div>
<div id="navlinksbg">
<div class="headnavthemen">
<ul class="liersteebene">
<li class="lierste">[url='index.htm']Home[/url]
<li class="lierste">[url='inhaustec/solar/index.htm']Technik 1[/url]
<ul class="lizweiteebene">
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
<li class="lizweite">[url='#']Reserve[/url]
[/list]
<li class="lierste">[url='inhaustec/industrie/index.htm']Technik 2[/url]
<li class="lierste">[url='inhaustec/haus/index.htm']Technik 3[/url]
<li class="lierste">[url='news.htm']New's[/url]
<li class="lierste">[url='personal.htm']Personal[/url]
<li class="lierste">[url='test.htm']AGB's[/url]
<li class="lierste">[url='kontakt.htm']Kontakt[/url]
[/list]
</div>
</div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</p>
</div>
<div id="kontaktdaten">
<div class="adresse">
[b]Firma[/b]
Straße Nr.
PLZ Ort
Tel.: +49 0000000
[url='#']Webmaster[/url]</div>
</div>
</body>
</html>
Alles anzeigen
und hier noch css:
a.nuranker { color: #000; text-decoration:none; margin-right: 40px; }
a.nurankeraktiv { color: #000; font-weight: bold; text-decoration: none; margin-right: 40px; }
body { background-color: #ffc; background-image: url(../images/bg_nav_links.gif); background-repeat: repeat-y; margin : 0px 0px 0px 0px;}
h1 { font-size: 2em; font-weight: bold; text-align: center; margin: 0.67em 0; }
.adresse { padding-left: 15px; }
.firmenname { color: black; font-size: 2em; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; text-align: center; margin-top: 15px; }
.headnavthemen { }
.lierste { margin-top: 6px; }
.liersteebene { }
.lizweite { font-weight: normal; margin-top: 6px; }
.lizweiteebene { }
#content { left: 220px; bottom: 0; right: 0; top: 100px; position: absolute; visibility: visible; }
#header { height: 100px; left: 0; top: 0; position: absolute; width: 100%; visibility: visible; }
#kontaktdaten { height: 100px; width: 220px; left: 0; position: absolute; bottom: 0; visibility: visible; }
#logolinks { width: 189px; left: 0; top: 0; position: absolute; height: 100px; visibility: visible; }
#logorechts { height: 100px; width: 189px; top: 0; position: absolute; right: 0; visibility: visible; }
#navlinksbg { width: 220px; left: 0; bottom: 100px; top: 100px; position: absolute; visibility: visible; }
Alles anzeigen
Vielen dank schon mal im vorraus für eure mühe und zeit.
Mfg crusader19