nicht angemeldet
Brauche Hilfe bei meiner XHTML/CSS Seite
Hallo,
ich bräuchte mal eure Hilfe. Und zwar habe ich bei einer XHTML Seite ein Gerüst mit Div-Boxen etc erstellt. Klappt auch alles ganz gut, bis auf den Footer, und zwar fließt da einfach der Text aus dem Content-Bereich drüber und nicht wie es sein sollte, dass der Footer darunter bleibt und sich automatisch der länge der Seite anpasst. Kanns nicht so wirklich erklären, aber ihr werdet es ja in meinem CSS / HTML Code sehen.
Mein HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="de" lang="de" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testsite</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css" media="all">
@import url(blau.css);
</style>
<!--<link rel="shortcut icon" href="favicon.ico">-->
</head>
<body>
<div id="wrapper">
<!--Start Header-->
<div class="header">
<div id="logo"></div>
<div id="menu1">
<span class="menu1font1">TEXT · TEXT · TEXT</span>
<span class="menu1font2">TEXT · TEXT · TEXT</span></div>
</div>
<!--Ende Header-->
<!--Start Content-->
<div class="content">
<div id="menu2"><div class="memberbar">Hallo You<br /> · 1 neue Nachricht<br /> · Ausloggen</div>
<div class="menu2font">TEXT<br />TEXT<br />TEXT<br />TEXT<br />TEXT<br />TEXT<br />TEXT<br /><br />TEXT<br />TEXT<br />TEXT<br /><br />TEXT<br />TEXT</div>
<div id="contentbody"><a href="http://www.domain.com" target="_blank"><img src="banner.gif" alt="" width="468" height="60" border="0" /></a><br />
<br /><h1>Headline blalbla</h1>
January 1998 was also the month that Netscape started the open source Mozilla project. Knowing that Internet Explorer had become by far the dominant web browser in the marketplace, Netscape tried a Hail Mary play by publicly releasing the source code of Netscape Communicator 4.0 in the hopes that it would become a popular open source project. It placed this code under the Netscape Public License, which was similar to the GNU General Public License but allowed Netscape to continue to publish proprietary work containing the publicly-released code. However, after having released the Communicator 4.0 code this way, Netscape proceeded to work on Communicator 4.5 without contributing fixes to the public code or using fixes from the public code; this has been seen as a bad decision, as it diverted effort from the open source project.<br /><br />
The United States Department of Justice filed an antitrust case against Microsoft in May 1998. Netscape was not a plaintiff in the case, though its executives were subpoenaed and it contributed much material to the case, including the entire contents of the 'Bad Attitude' internal discussion forum.</div>
</div>
<!--Ende Content-->
<!--Start Footer-->
<div class="footer"><center><span class="copyright">Haftungsausschluss · © 2000-2005 by me · XHTML 1.0 / CSS</span></center>
</div>
<!--Ende Footer-->
</div>
</body>
</html>
Mein CSS:
/*
* ========================================
* Globale Elemente
* ========================================
*/
html {
overflow-x: auto; /* MSIE Scrollbalken-Fix*/
}
body {
background: #FFFFFF;
color: #000000;
font-family: Lucida Grande, Arial;
font-size: 12px;
margin: 0;
padding: 0; /* Opera Fix */
text-align: center; /* Zentrierung fuer den MSIE */
}
#wrapper{
margin: 0px auto 0px auto; /* Zentrierung und x Pixel an den Raendern */
text-align: left; /* re-justierung fuer den MSIE */
width: 856px;
border: 0px;
background: transparent;
padding: 10px;
}
.header {
background: #2D3551;
border: 0px;
padding: 0px;
margin: 0;
}
#logo {
background: url(bilder/header.png) no-repeat;
border: 0px;
height: 106px;
margin: 0px;
padding: 0px;
}
#menu1 {
background: url(bilder/menu1.png);
border: 0px;
height: 20px;
margin: 0px;
padding-top: 3px;
}
.content{
background: #E2E5E8 url(bilder/background.png);
border: 0px;
padding: 0px;
margin: 0px;
}
#menu2 {
background: #000000 url(bilder/menu2.png) no-repeat;
background-position: bottom left;
position: relative;
left: 18px;
top: 0px;
z-index: 1;
width: 138px;
border: 0px;
margin: 0px;
padding: 0px;
}
#contentbody {
background: transparent;
position: absolute;
left: 159px;
top: 21px;
width: 468px;
border: 0px;
margin: 0px;
padding: 0px;
}
.footer {
background: #FFFFFF url(bilder/footer.png) no-repeat;
border: 0px;
height: 43px;
padding-top: 6px;
margin: 0;
}
/*
* ========================================
* Schriften
* ========================================
*/
.menu1font1 {
font-size: 13px;
margin-left: 30px;
color: #202D45;
float: left;
}
.menu1font2 {
font-size: 13px;
margin-right: 30px;
color: #202D45;
float: right;
}
.menu2font {
font-size: 13px;
color: #FFFFFF;
padding: 12px 0px 21px 12px;
}
.copyright {
font-size: 9px;
color: #202D45;
}
.memberbar {
font-size: 10px;
color: #FFFFFF;
padding: 21px 0px 0px 12px;
}
h1 {
font-family: Georgia, Times New Roman, Times, serif;
font-size: 14px;
color: #202D45;
}
Vielen Dank schon mal im Voraus für eure Hilfe!
-
Hi,
[...] und zwar fließt da einfach der Text aus dem Content-Bereich drüber [...]
ja, so ist das Verhalten bei absoluter Positionierung definiert.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hi,
[...] und zwar fließt da einfach der Text aus dem Content-Bereich drüber [...]
ja, so ist das Verhalten bei absoluter Positionierung definiert.
Cheatah
Kannst du mir vielleicht helfen, wie man das anders bauen kann?
Bin was XHTML mit CSS angeht noch absoluter noob :-(-
Hi,
Bin was XHTML mit CSS angeht noch absoluter noob :-(
gerade dann solltest Du auf position möglichst verzichten. Die Alternative heißt float, margin und clear.
freundliche Grüße
Ingo
-
-
-
Hallo,
ich bräuchte mal eure Hilfe. Und zwar habe ich bei einer XHTML Seite ein Gerüst mit Div-Boxen etc erstellt. Klappt auch alles ganz gut, bis auf den Footer, und zwar fließt da einfach der Text aus dem Content-Bereich drüber und nicht wie es sein sollte, dass der Footer darunter bleibt und sich automatisch der länge der Seite anpasst.Dann solltest Du den "Footer" als Teil des Content-Bereichs und darin "absolut" (bottom) positionieren. Wenn er über die Contentbreite rausgucken soll, verwende Minuswerte. Das müßte klappen.
Vielen Dank schon mal im Voraus für eure Hilfe!
Probier's erst mal und bedank Dich dann. Angabe ohne Gewehr.
Uuund tschüsss...