CSS Formatierungs-Problem

Status
Nicht offen für weitere Antworten.
D

DarkSilence

Grünschnabel
Hallo ersmal an alle :)

Hab da gleich mal ein Problem. ^^
Also habe folgende xhtml- + css-Datei:

index.xhtml
HTML: 
<?xml version="1.0" encoding="ISO-8859-1"?>
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  
  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
    <head>
  	<title>DSpage</title>
  	<link rel="stylesheet" type="text/css" href="default.css" />
  	<!-- ... -->
    </head>
    <body>
  	<!-- ... -->
  	<div id="footer">
  	  <div id="footerl">Copyright (c) 2004 DarkSilence<br />All rights reserved.</div>
  	  <div id="footerr">DSpage<br />Letzte Aktualisierung: 2004-11-01</div>
  	</div>
    </body>
  </html>

default.css
Code: 
body
  {
    background-color: #ffffff;
    color: #000000;
    font-family: Tahoma, sans-serif;
  }
  
  #footer
  {
    background-color: black;
    padding: 5px;
  }
  
  #footerl
  {
    background-color: red;
    font-size: x-small;
    text-align: left;
 float: left;
    width: 50%;
  }
  
  #footerr
  {
    background-color: green;
    font-size: x-small;
    text-align: right;
 float: right;
    width: 50%;
  }

Das Problem damit ist jetzt, das eigentlich footerl (rot) und footerr (grün) innerhalb von footer (gelb) befinden sollten, was aber nicht der fall ist, welche zu seinen unterelementen noch 5 px Abstand haben sollte.

Klar, man könnte das ganz einfach mit einem height: x px; Wert in footer lösen, allerdings möchte ich das nicht umbedingt tuen, da Benutzer evt. die Fontsize im Browser geändert haben, eine andere Font geschalten wird, etc., etc., und das das Design natürlich 'zerstören' würde.

Ähm mom Edit: footerl und footerr sollten natürlich nebeneinander sein, und ich hab keinen Augenkrebs ^^ Die Farben sind lediglich zur verdeutlichung. :)

Schonmal Danke, für eure Tips & eure Hilfe!

Gruß
Tim :-)
 
Zuletzt bearbeitet:
Hallo DarkSilenc,

die float-Eigenschaften des footerl- und des footerr-Containers müssen auch irgendwann mal wieder gelöscht werden. Das könnte beispielsweise so erfolgen:
Code: 
...
<div id="footer">
	 <div id="footerl">Copyright (c) 2004 DarkSilence<br />All rights reserved.</div>
	 <div id="footerr">DSpage<br />Letzte Aktualisierung: 2004-11-01</div>
	 <br style="clear:both;" />
</div>
...
Damit sieht es bei mir schon etwas anders aus.
 
Noch ein Nachtrag:

Ich weiss nicht, ob du den IE benutzt. Für ihn ist es wichtig, dass der einrahmende footer-Container auch eine Breitenangabe erhält, z.B.:
Code: 
#footer {
width: 99%; /* für IE6 */
background-color: black;
padding: 5px;
}
 
Jo thanks, hab ich gerade bemerkt, als ich die Page mal im IE getestet hab', (benutz sonnst Firefox). Wär' ja mal zu schön gewesen wenn der IE mal keine Prob's gemacht hätte. *fg*
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück