div zentrieren klappt nicht

**TanjaP.** · 20.07.2009 09:33

Hallo und guten morgen,

ich versuche, einen div zu zentrieren.
mit margin auto, den 50% habe ich probiert, aber es klappt nicht. Weise ich dem Footer eine %-Weite zu, ist der Block zentriert, hat aber keine Scrollbars mehr; bei einer Weitenangabe in em hat er Scrollbars, bleibt aber am linken Rand.
Was muss ich ändern?
der includete footer:

Code:

<div class="footer">
<div class="menu"><ul><li><a href="/index.php">Startseite</a></li>
			<li><a href="/kater/pino/pino.php">Kater</a></li>
			<li><a href="/katzen/katzen.php">Katzen</a></li>
			<li><a href="/nachwuchs/nachwuchs.php">Nachwuchs</a></li>
			<li><a href="/aktuell/2009/07juli/07.php">aktuelle&nbsp;Bilder</a></li>
	        <li><a href="/auslauf/auslauf.php">Frischluft</a></li>
			<li><a href="/aufdersuche.php">auf&nbsp;der&nbsp;Suche</a></li>
			<li><a href="/erinnerung/erinnerung.php">In&nbsp;Erinnerung</a></li>
			<li><a href="/uns/wirueberuns.php">Über&nbsp;uns</a></li>
			<li><a href="/kinderstube/kinderstube.php">Kinderstube</a></li>
            <li><a href="/abgabe/auszug.php">Abgabe</a></li>
			<li><a href="/hunde/hunde.php">Hunde</a></li>
            <li><a href="/kontakt/kontakt.php">Kontakt</a></li>
			<li><a href="/links/links.php">Links</a></li>
			<li><a href="/gb/gb.php">G&auml;stebuch</a></li></ul></div>
<div class="valid"><a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" /></a>
  <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="valid-css2.png" alt="CSS ist valide!" /></a></div>
	</div>

und hier das (komplette) css:

Code:

html, body { 
background-image : url('/hp/hintergrund.jpg'); 
height : 100%; 
width : 100%; 
margin : 0; 
padding : 0; 
font-family : "Book Antiqua", Georgia, Arial, sans-serif; 
text-align : center; 
color : #008080; 
overflow : hidden;
 
} 
#aussenwrapper { 
height : 100%; 
width : 98%; 
} 
#innenwrapper { 
height : 88%; 
overflow : auto; 
} 
.center { 
text-align : center; 
} 
.right { 
float : right; 
} 
.left { 
float : left; 
} 
.clear { 
clear : both; 
} 
.footer {margin:auto auto; height:12%;  overflow:auto;}

.menu { 
border : 1px solid red; 
float : left; 
  width: 44em;
  
} 
.menu ul {
margin-top: 0.063em;
}
.menu li { 
margin : 0.063em; 
display : block; 
border : thin solid #008080; 
float : left; 
color : #008080; 
font-style : italic; 
font-weight : bold; 
width : 8em; 
} 
a { 
color : #008080; 
} 
a:visited { 
color : #009999; 
} 
a:hover { 
color : #008080; 
} 

.valid { 
float: left; 
width : 6.625em; 
} 

a img {
				border:0;
}

mit frames und tabellen war´s einfacher für mich...
Tanja

**jayjay** · 20.07.2009 09:44

moin, zeig mal den gesamten code oder poste den link. du hast sicherlich was über dem footer stehen, somit kann auch was vererbt werden....

**TanjaP.** · 20.07.2009 10:03

Hi,
das ist (momentan) das komplette css...
Der Link zur Seite: http://www.undercover-coons.de/test/updatestest1.php. Nicht an den Inhalt stören, der ist zum probieren.

Tanja

**jayjay** · 20.07.2009 10:37

check das mal:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="de" />
<meta name="Author" lang="de" content="Tanja Polnik" />
<meta name="Copyright" content="Tanja Polnik (Undercover Coon´s)" />
<meta name="Keywords" lang="de" content="Maine,Coon,Wanne,Eickel,Undercover, Coon´s, Maine, Coon, Campino of Metal Coons, Undercover Coons, from Undercover Coons, Dreams of Reality Balendis, Isabeau the Space Traveller, All Roads leads to Maine Girls Chocolate Face" />
<meta name="Description" lang="de" content="Maine Coon Hobbyzucht in Wanne-Eickel" />
<meta name="Robots" content="- Nicht eintragen -" />
<meta name="Revisit-After" content="30 days" />
<link rel="stylesheet" type="text/css" href="grund1.css" />
<title>Undercover-Coon's</title>
<style type="text/css">
* {
    padding:0;
    margin:0;
}
html, body {
    background-image: url('/hp/hintergrund.jpg'); 
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: "Book Antiqua", Georgia, Arial, sans-serif;
    text-align: center;
    color: #008080;
    overflow: hidden;
}
a {
    color: #008080;
} 
a:visited {
    color: #009999;
}
a:hover {
    color: #008080;
}
a img {
    border:0;
}

/**/

.center {
    text-align: center;
}
.right {
    float: right;
}
.left {
    float: left;
}
.clear {
    clear: both;
}

/* wraps */

#aussenwrapper {
    height: 100%;
    width: 98%;
}
#innenwrapper {
    height: 88%;
    overflow: auto;
}

/* footer */

#footer {
    margin: 0 auto;
    width: 750px;
    height:12%;
    overflow:auto;
}

.menu {
    border: 1px solid red;
    float: left; 
    width: 44em;
}
.menu ul {
    margin-top: 0.063em;
}
.menu li {
    margin: 0.063em;
    display: block;
    border: thin solid #008080;
    float: left;
    color: #008080;
    font-style: italic;
    font-weight: bold;
    width: 8em;
}

.valid {
    float: left;
}

</style>
</head>

<body>
<div id="aussenwrapper">

    <div id="innenwrapper">
        <p class="style5"><em>U P D A T E S</em></p>
        <hr />
        <p class="style6">12.11.2004<br />Noch nicht vollständige Bilderstammbäume von Pino und Choci hinzugefügt</p>
        <hr />
        <p class="style6">30.10.2004<br />Alle Seiten neu überarbeitet aufgrund von Darstellungsproblemen und alle  Bilder  "auf groß" verlinkt</p>
        <hr />
        <p class="style6">24.10.2004<br />Die Seite geht ins Netz und wird erst wenigen bekannt gegeben</p>
        <hr />
        <p class="style6">S T A R T<br /></p><hr /><p class="style5"><em>U P D A T E S</em></p>
        <hr />
        <p class="style6">12.11.2004<br />Noch nicht vollständige Bilderstammbäume von Pino und Choci hinzugefügt</p>
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <div class="clear"></div>
    </div><!--Ende innenwrapper-->

    <div id="footer">
        <div class="menu">
            <ul>
                <li><a href="/index.php">Startseite</a></li>
                <li><a href="/kater/pino/pino.php">Kater</a></li>
                <li><a href="/katzen/katzen.php">Katzen</a></li>
                <li><a href="/nachwuchs/nachwuchs.php">Nachwuchs</a></li>
                <li><a href="/aktuell/2009/07juli/07.php">aktuelle&nbsp;Bilder</a></li>
                <li><a href="/auslauf/auslauf.php">Frischluft</a></li>
                <li><a href="/aufdersuche.php">auf&nbsp;der&nbsp;Suche</a></li>
                <li><a href="/erinnerung/erinnerung.php">In&nbsp;Erinnerung</a></li>
                <li><a href="/uns/wirueberuns.php">Über&nbsp;uns</a></li>
                <li><a href="/kinderstube/kinderstube.php">Kinderstube</a></li>
                <li><a href="/abgabe/auszug.php">Abgabe</a></li>
                <li><a href="/hunde/hunde.php">Hunde</a></li>
                <li><a href="/kontakt/kontakt.php">Kontakt</a></li>
                <li><a href="/links/links.php">Links</a></li>
                <li><a href="/gb/gb.php">G&auml;stebuch</a></li>
            </ul>
        </div>
        <div class="valid"><a href="http://validator.w3.org/check?uri=referer"><img src="valid-xhtml10.png" alt="Valid XHTML 1.0 Strict" /></a> <a href="http://jigsaw.w3.org/css-validator/check/referer"><img src="valid-css2.png" alt="CSS ist valide!" /></a></div>
    </div>

</div><!--Ende aussenwrapper-->
</body>
</html>

habe da paar kleinigkeiten angepasst/aufgeräumt...

als tipp:
um
margin: 0 auto;
nutzen zu können musst du auch width setzen

was mich interessiert, warum setzt du das hier:

HTML-Code:

html, body {
    height: 100%;
    width: 100%;

mich stören besonders die linien <hr /> die über die gesamte breite gehen, sieht teilweise etwas unschön aus, aber ist ja dein ding...

**TanjaP.** · 20.07.2009 11:15

Hi,
mit diesem css sieht es so aus: http://www.undercover-coons.de/test/updatestest2.php , leider auch nicht anders ....

was mich interessiert, warum setzt du das hier:
HTML-Code:
html, body {
height: 100%;
width: 100%;

bei dem width hab ich das mal bestimmt reingemacht, aber das height weil das auf der ohne CSS gehts gar net-Seite so angegeben war...

Mit verschiedenen width-Angaben habe ich probiert, siehe mein erstes Posting.

Tanja

**jayjay** · 20.07.2009 11:34

ok, du hast die css übernommer, nicht den html-teil.
<div class="footer"> in <div id="footer">

**TanjaP.** · 20.07.2009 12:09

sorry, geändert.
Aber die beiden img sind jetzt unter der Navi, sollen aber daneben sein (und beide untereinander). Frage von einer Nichtwisserin: macht es was aus, ob id oder class?

Tanja

**max.m** · 20.07.2009 12:19

Unterschied class id. Im ersten Ergebnis ists erklärt.

**jayjay** · 20.07.2009 12:22

Zitat von TanjaP.

sorry, geändert.
Aber die beiden img sind jetzt unter der Navi, sollen aber daneben sein (und beide untereinander)

du musst im footer die breite anpassen, in dem fall breiter machen (ca 1000px?).

Zitat von TanjaP.

Frage von einer Nichtwisserin: macht es was aus, ob id oder class?

kurz: id ist immer eindeutig, class kann auf mehrere benutzt werden
etwas ausführlicher zb hier

**TanjaP.** · 20.07.2009 12:56

habe jetzt auf 850px verbreitert (je li 8em=128px; mal5=728px plus 88px das Bildchen plus die Abstände); für die beiden Bilder habe ich wieder eine gesamtbreite eingegeben, damit sie nicht nebeneinander floaten. Und, jetzt sind wieder keine Scrollleisten mehr da, wenn ich den Browser kleiner uller....

das google-Teil is ja cool, so richtig für Blödis wie mich....
Tanja

**jayjay** · 20.07.2009 12:58

also ist es wie du es haben wolltest?

**max.m** · 20.07.2009 13:06

Zitat von TanjaP.

so richtig für Blödis wie mich

Das wollte ich damit nicht sagen!

**TanjaP.** · 20.07.2009 13:16

nein, es ist nicht so, wie ich es haben wollte, die Srollleisten sollen erscheinen, wenn das Fenster zu klein wird; soweit war ich auch schon; gebe ich anstatt 850px einen Prozentwert ein, kommen zwar Scrollis, aber es ist nicht mehr zentriert ....

@max.m: keine Angst, ich bin nicht so empfindlich....

Tanja

**jayjay** · 20.07.2009 13:40

was genau soll jetzt scrollbar sein? gesamt oder der footer?
scrollleisten machen nur sinn wenn inhalt zu klein ist...
deshalb meine frage von vorhin zum thema
html, body {
height: 100%;
width: 100%;

**TanjaP.** · 20.07.2009 13:53

also, der eigentliche Inhalt ist ja schon scrollbar; der Footer soll scrollbar sein, sobald es nötig ist (d.h. das Browserfenster zu klein wird). http://www.undercover-coons.de/test/updatestest1.php, so hätte ich das gerne, nur eben den Footer auch noch zentriert ....

Tanja

zur Startseite vom TP

Thema: div zentrieren klappt nicht

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

div zentrieren klappt nicht

Ähnliche Themen

PHP: Dynamische Vorauswahl klappt und klappt nicht?

Deinstallation klappt nicht

ftp klappt nicht

es klappt nicht

CSS klappt nicht

Aktive Benutzer

Aktive Benutzer