Anzeige

Div zentrieren

Div zentrieren | PSD-Tutorials.de

Erstellt von AlphaGen, 14.08.2008.

  1. AlphaGen

    AlphaGen Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2008
    Beiträge:
    169
    Geschlecht:
    männlich
    Div zentrieren
    Ich möchte mit divs eine Navigation erstellen. Die Navigation soll horizontal ausgerichtet sein und 5 Buttons haben.

    Jetzt das Problem: Ich möchte das ganze mit divs machen (falls das geht).
    Sagen wir, ich habe eine Auflösung von 800 x 600. Ich möchte, dass jeder Button 50 pixel lang ist. Mit "float:left;" erreiche ich, dass die 5 divs hintereinander stehen. Aber wie krieg ich die jetzt mittig für JEDE Auflösung.

    Klar kann ich jetzt ein div links hin machen, was 275 pixel lang ist. Aber das ist dann halt nur für die auflösung 800x600.

    Bin ein Neuling auf dem Gebiet mit divs. Mit CSS und HTML kenn ich mich aber an sonsten aus würde ich behaupten.

    HTML - Datei:

    <body id="body">
    <center>
    <div id="navi"> //Leiste die komplett durchs gesammte Bild geht ganz oben
    <div id="float">a</div>
    <div id="float">a</div>
    <div id="float">a</div>
    <div id="float">a</div>
    <div id="float">a</div>
    </div>
    </center>
    </body>


    Ausgelagerte CSS - Datei:

    #body
    {
    background:url(pics/verlauf.gif) repeat-x; (Hintergrundbildung der Seite)
    margin:0px;
    }

    #navi
    {
    background:url(pics/navi.gif) repeat-x; (Das ist der Hintergrund der Navigationsleiste)
    width: 100%;
    height: 41px;
    text-align:center;

    }


    #float (Das sollen die Buttons werden)
    {
    background:#000000;
    width: 50px;
    height: 41 px;
    float:left;
    }
     
    #1      
  2. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
  3. rotzbua

    rotzbua Aktives Mitglied

    Dabei seit:
    05.03.2006
    Beiträge:
    286
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    MS Paint.
    Kameratyp:
    Canon EOS 350D
    Div zentrieren
    #3      
  4. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    so sieht das aus, wenns ne Navi sein soll, dann entweder mit Liste (ul, li) oder die Bilder einfach so einsetzen und dem div navi ein text-align center zuordnen



    <body id="body">

    ist totaler Blödsinn
     
    #4      
  5. AlphaGen

    AlphaGen Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2008
    Beiträge:
    169
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    Wieso Blödsinn? Damit wird der Hintergrund der Seite definiert. Das ist ein 1 px breiter und 400 px langer Verlauf, der immer wieder wiederholt werden soll auf der x-Achse.

    Und selbst wenn es Blödsinn ist, dann sag mir bitte warum, damit ich draus lernen kann ;)

    Aber VIELEN Dank für die Links. Das hilft mir weiter. :)
     
    Zuletzt bearbeitet: 14.08.2008
    #5      
  6. rotzbua

    rotzbua Aktives Mitglied

    Dabei seit:
    05.03.2006
    Beiträge:
    286
    Geschlecht:
    männlich
    Ort:
    Wien
    Software:
    MS Paint.
    Kameratyp:
    Canon EOS 350D
    Div zentrieren
    AW: Div zentrieren

    Es reicht eigentlich auch ein ganz normaler body tag, also:

    HTML:
    und dann im css

    Code (Text):
    1. body {
    2. background: url(pics/verlauf.gif) repeat-x;
    3. margin:0px;
    4. }
    weiters solltest du noch für nach den verlauf eine hintergrundfarbe definieren, denn der hört ja auch irgendwann auf. (Außer er verläuft ins weisse, dann wär es "egal")

    also:
    Code (Text):
    1. body {
    2. background-image: url(pics/verlauf.gif);
    3. background-repeat: repeat-x;
    4. background-color: #f0f0f0;
    5. margin:0px;
    6. }
    (und ja, ich teil mein css gerne auf auf die verschiedenen einzelattribute ;))
     
    #6      
  7. AlphaGen

    AlphaGen Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2008
    Beiträge:
    169
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    Ja. Verläuft ins Weiss. :)
     
    #7      
  8. AlienMacHine

    AlienMacHine Musiker-Designer-Punk

    Dabei seit:
    25.12.2005
    Beiträge:
    116
    Geschlecht:
    männlich
    Ort:
    Rheinland-Pfalz
    Div zentrieren
    AW: Div zentrieren

    Man nimmt eigentlich li-Elemente dafür. Geht sicherlich auch mit divs ist aber semantisch nicht korrekt! Nimm Dir die Links zur Brust die Du gekriegt hast.
    Übrigens: id's dürfen nur 1 mal pro Seite vergeben werden! Deine divs haben alle die id float! Das ist ein Syntax-Fehler. Du musst da Klassen verwenden...Wie gesagt: Die Links durchlesen...Da fehlt es anscheinend an grundlegenden Dingen....
     
    #8      
  9. AlphaGen

    AlphaGen Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2008
    Beiträge:
    169
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    Links nehmichmir zur Brust.

    Problem ist, dass ichmit HTML vor 6 Jahren oder so angefangen hab und dann 5 JAhre nix gemacht hab.

    CSS war damals nochnicht sooo wichtig. Aber jetzt will ichs natürlichrichtig lernen.

    Vielen Dank an alle.
     
    #9      
  10. AlphaGen

    AlphaGen Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2008
    Beiträge:
    169
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    Nächste Frage:

    Wie bekomme ich ein div in Firefox 3.0 GANZ nach oben an den Browserrand? Margin funktioniert nur im IE.
     
    #10      
  11. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    Das wäre ja mal ganz neu...

    css

    Code (Text):
    1.  
    2.  
    3. * { margin:0; padding:0 }
    4.  
    5. html, body { margin:0; padding:0; } /* eigentlich überflüssig, da schon Universalattribut gesetzt */
    6.  
    7.  
     
    #11      
  12. AlphaGen

    AlphaGen Nicht mehr ganz neu hier

    Dabei seit:
    14.05.2008
    Beiträge:
    169
    Geschlecht:
    männlich
    Div zentrieren
    Funktioniert. Ich bin heute nicht ganz helle und merke, wieviel (nicht mehr Lücken) Schluchten ich doch hab...

    Hat jemand nen gutes Buch, was ich mir durchlesen kann. Ich glaube ich muss doch nochmal alles von Anfang an lernen. *heul*

    Achja, falls ich euch auf die Nerven geh, einfach bescheid sagen. Dann hör ich auf *lacht*

    So. und jetzt die letzte Frage für den heutigen Tag:

    body
    {
    background:#A4A4A4 url(pics/verlauf.gif) repeat-x;
    padding:0px;
    margin:0px;
    }


    ul#Navigation
    {
    margin:0px;
    padding:0px;
    width:100%;
    height:41px;
    background:url(pics/navi.gif) repeat-x;
    list-style:none;
    text-align:center;
    vertical-align: middle;
    }


    ul#Navigation li
    {
    vertical-align: middle;
    list-style: none;
    display: inline;
    margin:0px;
    padding:0px;
    }


    <body>
    <ul id="Navigation">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    </ul>
    </body>


    Warum steht die Liste nicht in der Mitte des vorgegebenen Feldes ul? Möchte das gerne ganz zentriert haben. Horizontal und vertikal.
     
    Zuletzt von einem Moderator bearbeitet: 14.08.2008
    #12      
  13. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Div zentrieren
    AW: Div zentrieren

    du brauchst kein Buch SELFHTML-Download


    Edit: Bei mir ist deine Liste zentriert... wo ist das Problem?


    Edit2: ach so in der Höhe? geht nicht mit vertical-align, kannst nur mit line-height lösen
     
    Zuletzt bearbeitet: 14.08.2008
    #13      
x
×
×