verschachtelten div zentrieren

html.de-Forum HTML, XHTML & CSS
1

HTML

[CODE]

  • Navigation
    •         <li><a href="index.php">Startseite</a></li>

        <li><a href="smartdrive_linux.php">1und1 Smartdrive in Linux</a></li>

        <li><a href="fritzfax_anleitung.php">Fritzfax Anleitung</a></li>

        <li><a href="praktikum_fachinformatiker.php">Praktikum als Fachinformatiker</a></li>

        <li><a href="untermenue2.php" onclick="javascript:switchlayer('tipps'); return false;">Tipps und Tricks</a></li>

        <li class="doppelaus">
            <ul id="tipps" class="menueliste">
                <li><a href="antivir_werbung.php">Antivir Werbung</a></li>

                <li><a href="suchen_statt_oeffnen.php">Suchen statt &Ouml;ffnen im Explorer</a></li>

                <li><a href="windows_tuning.php">Windows Tuning</a></li>

                <li><a href="systemkonfigurationsprogramm.php">System-konfigurationsprogramm</a></li>
            </ul>
        </li>

        <li><a href="untermenue.php" onclick="javascript:switchlayer('video'); return false;">Videos</a></li>

        <li class="doppelaus">
            <ul id="video" class="menueliste">
                <li><a href="fritzfax_videoanleitung.php">FritzFax</a></li>

                <li><a href="systemwiederherstellung.php">System-wiederherstellung</a></li>

                <li><a href="macrium_reflect.php">Macrium Reflect Installation/Sicherung/Mounten</a></li>
            </ul>
        </li>

        <li><a href="downloads.php">Downloads</a></li>

        <li><a href="empfehlungen.php">Empfehlungen</a></li>

        <li><a href="gaeste.php">G&auml;stebuch</a></li>

        <li><a href="kontakt.php">Kontakt</a></li>

        <li><a href="impressum.php">Impressum und Disclaimer</a></li>
        <br />
      <div id="counter"></div><a href="http://www.andyhoppe.com/" title="Counter"><img id="counter" src="http://www.andyhoppe.com/count/?id=1262168567" style="border:none" alt="Counter" /></a>
    </ul>
</div>

    [/CODE]

    möchte nun mit css definieren, dass der eingebundene counter zentriert ist, doch es will nicht funktionieren, habe schon einiges ausprobiert

2

Inline-Elemente zentriert man mit „text-align:center“.
Block-Elemente zentriert man mit „margin:0 auto“.

Dein div#center ist vermutlich so nicht richtig, aber das kann ich anhand dieses Codes alleine natürlich nicht beurteilen. Vermutlich soll der Link in dem Tag sein? Wenn ich falsch liege, brauchen wir hier einen Link zur Seite, um eine sinnvolle Antwort zu geben.

3

Beispielseite

[CODE] <?xml version="1.0" encoding="iso-8859-1"?>

<title>PC-Anleitungen Niklas - Startseite</title>
  • Navigation
    •         <li><a href="[index.php](http://www.html.de/view-source:http://localhost/index.php)">Startseite</a></li>

        <li><a href="[smartdrive_linux.php](http://www.html.de/view-source:http://localhost/smartdrive_linux.php)">1und1 Smartdrive in Linux</a></li>

        <li><a href="[fritzfax_anleitung.php](http://www.html.de/view-source:http://localhost/fritzfax_anleitung.php)">Fritzfax Anleitung</a></li>
        <li><a href="[praktikum_fachinformatiker.php](http://www.html.de/view-source:http://localhost/praktikum_fachinformatiker.php)">Praktikum als Fachinformatiker</a></li>

        <li><a href="[untermenue2.php](http://www.html.de/view-source:http://localhost/untermenue2.php)" onclick="javascript:switchlayer('tipps'); return false;">Tipps und Tricks</a></li>

        <li class="doppelaus">
            <ul id="tipps" class="menueliste">
                <li><a href="[antivir_werbung.php](http://www.html.de/view-source:http://localhost/antivir_werbung.php)">Antivir Werbung</a></li>

                <li><a href="[suchen_statt_oeffnen.php](http://www.html.de/view-source:http://localhost/suchen_statt_oeffnen.php)">Suchen statt &Ouml;ffnen im Explorer</a></li>

                <li><a href="[windows_tuning.php](http://www.html.de/view-source:http://localhost/windows_tuning.php)">Windows Tuning</a></li>

                <li><a href="[systemkonfigurationsprogramm.php](http://www.html.de/view-source:http://localhost/systemkonfigurationsprogramm.php)">System-konfigurationsprogramm</a></li>
            </ul>
        </li>

        <li><a href="[untermenue.php](http://www.html.de/view-source:http://localhost/untermenue.php)" onclick="javascript:switchlayer('video'); return false;">Videos</a></li>

        <li class="doppelaus">
            <ul id="video" class="menueliste">
                <li><a href="[fritzfax_videoanleitung.php](http://www.html.de/view-source:http://localhost/fritzfax_videoanleitung.php)">FritzFax</a></li>

                <li><a href="[systemwiederherstellung.php](http://www.html.de/view-source:http://localhost/systemwiederherstellung.php)">System-wiederherstellung</a></li>

                <li><a href="[macrium_reflect.php](http://www.html.de/view-source:http://localhost/macrium_reflect.php)">Macrium Reflect Installation/Sicherung/Mounten</a></li>
            </ul>
        </li>

        <li><a href="[downloads.php](http://www.html.de/view-source:http://localhost/downloads.php)">Downloads</a></li>

        <li><a href="[empfehlungen.php](http://www.html.de/view-source:http://localhost/empfehlungen.php)">Empfehlungen</a></li>
        
        <li><a href="[gaeste.php](http://www.html.de/view-source:http://localhost/gaeste.php)">G&auml;stebuch</a></li>

        <li><a href="[kontakt.php](http://www.html.de/view-source:http://localhost/kontakt.php)">Kontakt</a></li>

        <li><a href="[impressum.php](http://www.html.de/view-source:http://localhost/impressum.php)">Impressum und Disclaimer</a></li>  
    </ul>
    <div id="counter"><a href="[http://www.andyhoppe.com/](http://www.html.de/view-source:http://www.andyhoppe.com/)" title="Counter"><img src="[http://www.andyhoppe.com/count/?id=1262168567](http://www.html.de/view-source:http://www.andyhoppe.com/count/?id=1262168567)" style="border:none" alt="Counter" /></a></div>

</div>
    <div id="inhalt"><h1>Willkommen</h1>        

<div id="fussbereich">
    Grunddesign <a href="[http://www.html-seminar.de/css-layout-generator.php](http://www.html.de/view-source:http://www.html-seminar.de/css-layout-generator.php)" target="_blank">CSS-Layout-Generator</a>
</div>

    [/CODE]und noch die design.css

    [CODE]body
    {
    background:#D3D3D3;
    font:100.01% Verdana, Arial, Helvetica, sans-serif;
    list-style-position:inside;
    margin:0 auto;
    width:100%;
    height:100%;
    list-style-type:none;
    }

    a:hover
    {
    color:blue;
    }

    {
    margin:0;
    padding:0;
    }

    #inhalt
    {
    background-color:#FFF;
    border:1px solid #000;
    color:#000;
    line-height:2em;
    margin:.5% .8% 2% 21.8%;
    padding:.6%;
    }

    #steuerung
    {
    background-color:#FFF;
    border:1px solid #000;
    color:#000;
    float:left;
    font-weight:bolder;
    line-height:1.2em;
    list-style-type:none;
    margin:.5% .5% 0 .5%;
    position:fixed;
    text-indent:.5em;
    width:20.5%;
    }
    li
    {
    list-style-type:none;
    }
    #steuerung li:before
    {
    content:„::“;
    }

    #steuerunghauptmenue
    {
    background-color:silver;
    border-bottom:1px solid #000;
    color:#FFF;
    float:left;
    font-size:120%;
    font-weight:bolder;
    height:1%;
    list-style-type:none;
    padding:3% 0;
    text-align:center;
    width:100%;
    }

    #fussbereich
    {
    background-color:#FFF;
    bottom:0;
    clear:both;
    font-size:70%;
    height:2%;
    margin:.5% 0 0 0;
    padding:.1%;
    position:fixed;
    width:100%;
    }

    h1
    {
    background-color:silver;
    color:#FFF;
    text-align:center;
    }

    h2
    {
    font-size:105%;
    text-align:center;
    }

    h3
    {
    font-size:102%;
    text-align:center;
    }

    .menueliste
    {
    display:none;
    font-size:90%;
    list-style-type:none;
    padding-left:3.6%;
    }

    #steuerung .menueliste li:before
    {
    content:"- ";
    }

    .code
    {
    background-color:#CFF;
    border:1px #000 solid;
    text-decoration:none;
    }

    .quellen
    {
    font-size:80%;
    }

    a:link,a:visited
    {
    color:#000;
    }

    #steuerung #steuerunghauptmenue:before,#steuerung .doppelaus:before
    {
    content:„“;
    }
    #counter
    {
    margin: 0 auto;

    }[/CODE]beide varianten haben bisher nicht funktioniert

4
  1. Immer so viel Code…jetzt musste ich wieder suchen und kann keinen Firebug benutzen. Ein LINK zur Seite ist das, was den Helfern das Leben einfach macht und Dir eine gute Antwort garantiert, ohne dass man so viel nachfragen muss.

#counter hast Du zentriert. Das funktioniert schon. Nur sind Block-Elemente halt auch 100% breit und damit sowieso immer zentriert. Bzw. man sieht halt nicht, dass ein Element zentriert ist, wenn es die volle Breite einnimmt.

Aber Du willst ja wohl auch nicht div#counter zentrieren, sondern das verlinkte Image darin. Der Link ist ein Inline-Element, also muss es heißen:

#counter {
  text-align:center;
}

…und schon wird das Image mit dem Link über die Breite von #counter horizontal zentriert. Wenn jetzt das Image natürlich gleich groß ist wie #counter, dann merkst Du davon auch nichts.

Mit einem Link zur Seite könnte ich mehr anfangen und müsste nicht den Eindruck bei Dir erwecken, ich würde Dich irgendwie von oben herab behandeln oder um den heißen Brei herumreden.

5

Die Seite gibt es bisher nur offline, online funktioniert PHP nicht, warum auch immer, da habe ich auch einen Thread zu geöffnet

http://www.html.de/php/30173-php-datei-wird-nicht-angezeigt.html

6

Na, aber wir reden doch hier gar nicht über ein PHP-Problem.
Stell halt die HTML-Seite online. Nur darum geht es doch.

7

Ich hatte über PHP included deshalb musste ich jetzt erst alles reinkopieren

http://pcanleitungen.verwalten.ch/test.html

da ist Sie

8

Das ist mir ehrlich gesagt egal, wieviel Arbeit Du damit hast, hauptsache, ich hab keine Arbeit, denn Du willst ja was von MIR! :wink:
Abgesehen davon hätte es auch gereicht, die Seite im Browser abzuspeichern.

Aber gut, dass ich gefragt habe, auf der Seite steht nämlich was ganz anderes als in dem Code, den Du hier gepostet hast! Deswegen will ich IMMER einen Link sehen!

Das sind ganz andere Voraussetzungen.

Lösung:

div#steuerung {
    text-align:center;
}
div#steuerung ul {
    tex-align:left;
}

Fertig.

Hättest Du von Anfang an einen Link gepostet, hättest Du Deine Lösung schon ca. 4 Stunden früher :wink:

Guten Rutsch!

9

wunderbar
jetzt ist mir noch eine frage gekommen:
kann man in ids auch einzelne elemente verändern z.B. alle img in id counter sollen links sein

10 
#counter img {
    float:left;
}

Oder anders. Je nachdem :slight_smile:

Mit den Selektoren in CSS kann man sehr viel anfangen.

11

dann müsste doch eigentlich folgendes bewirken, dass der counter mittig ist

#steuerung img { text-align:center; }

geht aber nicht wobei dein code funktioniert, nur gibt es da halt keine mitte

12

Ist jetzt erstmal egal.
Dir auch einen guten Rutsch!

13

Das geht so auch nicht, weil das Image zwar ein Inline-Element ist, aber keinen Inhalt hat. Denn text-align:center zentriert zwar Inline-Elemente, aber nur die, die innerhalb des Tags liegen, das diese Auszeichnung bekommt.

Wenn Du ein innerhalb eines

hast, dann muss das

text-align:center bekommen, nicht das . Das hat keine Elemente in sich, es ist inhaltsleer. Deswegen funktioniert Dein Code nicht.

Anders bei Block-Elementen. Da formatiert man das Block-Element selbst mit „margin:0 auto“, das bezieht sich dann auf das Element selbst, nicht auf seinen Inhalt.

Guten Rutsch!

14

aja :idea:
danke