• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

verschachtelten div zentrieren

V

VollDerNewb

Gesperrt
HTML
Code: 
 <body>
 <div id="steuerung">
        <ul>
            <li id="steuerunghauptmenue">Navigation</li>

            <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>

möchte nun mit css definieren, dass der eingebundene counter zentriert ist, doch es will nicht funktionieren, habe schon einiges ausprobiert
 
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.
 
Beispielseite
Code: 
    <?xml version="1.0" encoding="iso-8859-1"?>
<!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>
    <link rel="stylesheet" type="text/css" href="[URL="http://www.html.de/view-source:http://localhost/design.css"]design.css[/URL]" />
<script language="JavaScript" type="text/javascript" src="[URL="http://www.html.de/view-source:http://localhost/main.js"]main.js[/URL]">
</script>
<style type="text/css">
</style>
<meta name="content-language" content="de" />
    <meta name="author" content="Niklas Peter" />
    <meta name="index" content="index, follow" />
    <meta name="revisit-after" content="10days" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta name="keywords" content="downloads, smartdrive installer for linux, 1und1 smartdrive installer for linux, praktikumsmappe fachinformatiker systemintegration, praktikumsmappe kostenlos, windows vista systemsteuerungstutorial kostenlos, vista systemsteuerung erklärt, vista systemsteuerung einführung, markus knospes systemsteuerungstutorial, antivir werbung deaktivieren, antivir popup deaktivieren, antivir popup ausschalten, antivir werbung ausschalten, antivir werbefrei anleitung, antivir werbefrei tutorial, macrium reflect free, macrium reflect image anlegen mounten validieren &uuml;berpr&uuml;fen, systemimage anlegen kostenlos, image software kostenlos, system sichern, recovery cd, recovery dvd, praktikum fachinformatiker, praktikumsmappe fachinformatiker systemintegration, praktikumsmappe download, praktikumsmappe vorlage, windows tunen, windows beschleunigen, windows schneller starten, windows schneller herunterfahren, windows tuning tipps, windows tuning, xp und vista beschleunigen, bootdateien defragmentieren, ressourcen sparen, datentr&auml;gerbereinigung problem l&ouml;sen, datentr&auml;gerbereinigung h&auml;ngt, datentr&auml;gerbereinigung alte dateien komprimieren deaktivieren, tuningsoftware,  faxen vom pc, faxen vom computer, pdf to fax, faxen kostenlos, fritzfax anleitung, fritzfax faxen, fritzfax versenden, kostenloses fax, faxen &uuml;ber voip, faxen fritzbox, pc anleitungen, tutorials, kostenloser webspace, webhoster kostenlos, homepage kostenlos, computer, 1und1 smartdrive in linux, 1und1 smartdrive, windows tipps, 
     statt &Atilde;&para;ffnen explorer, 1und1 smartdrive in linux mounten, 1und1 smartdrive installer for linux, 1und1 online festplatte in linux, 1und1 uploader f&uuml;r linux, 1und1 uploader alternative linux, 1und1 smartdrive https, 1und1 smartdrive webdav wdfs, suchen statt oeffnen windows explorer, explorer suchen statt oeffnen, explorer oeffnen funktioniert nicht, explorer oeffnen funktion defekt, systemkonfiguratinonsprogramm wurde ausgef&uuml;hrt bei jedem start, systemkonfigurationsprogramm problem, systemkonfigurationsprogramm meldung deaktivieren, systemwiederherstellung abgesicherter modus, system wiederherstellen reparaturkonsole, systemwiederherstellung eingabeaufforderung, treiber installation r&uuml;ckg&auml;ngig machen" />
    <meta name="description" content="PC Anleitungen und viele Tipps und Tricks zu Windows und Linux. 1&1 Smart Drive in Linux nutzen." />

    <title>PC-Anleitungen Niklas - Startseite</title>
</head>
     <body>
 <div id="steuerung">
        <ul>
            <li id="steuerunghauptmenue">Navigation</li>

            <li><a href="[URL="http://www.html.de/view-source:http://localhost/index.php"]index.php[/URL]">Startseite</a></li>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <div id="fussbereich">
        Grunddesign <a href="[URL="http://www.html.de/view-source:http://www.html-seminar.de/css-layout-generator.php"]http://www.html-seminar.de/css-layout-generator.php[/URL]" target="_blank">CSS-Layout-Generator</a>
    </div>
</body>
</html>
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;

}
beide varianten haben bisher nicht funktioniert
 
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:
Code: 
#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.
 
Na, aber wir reden doch hier gar nicht über ein PHP-Problem.
Stell halt die HTML-Seite online. Nur darum geht es doch.
 
VollDerNewb schrieb:
Ich hatte über PHP included deshalb musste ich jetzt erst alles reinkopieren
Zum Vergrößern anklicken....
Das ist mir ehrlich gesagt egal, wieviel Arbeit Du damit hast, hauptsache, ich hab keine Arbeit, denn Du willst ja was von MIR! ;-)
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:
Code: 
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 ;-)

Guten Rutsch!
 
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
 
Code: 
#counter img {
    float:left;
}
Oder anders. Je nachdem :-)

Mit den Selektoren in CSS kann man sehr viel anfangen.
 
dann müsste doch eigentlich folgendes bewirken, dass der counter mittig ist
Code: 
#steuerung img
{ 
text-align:center;
}

geht aber nicht wobei dein code funktioniert, nur gibt es da halt keine mitte
 
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 <img> innerhalb eines <p> hast, dann muss das <p> text-align:center bekommen, nicht das <img>. Das <img> 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!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben