[CSS] Seite zentrieren / Navigation neben header

Dieses Thema im Forum "Webdesign" wurde erstellt von sloader, 16. März 2010 .

  1. 16. März 2010
    Seite zentrieren / Navigation neben header

    Moin leute, da der alte Thread eig Grundlos gelöscht wurde hier ein neuer.

    Ich habe bei meiner Seite ein Problem, ich habe in der css Datei center oben reingeschrieben, sobald ich wieder am Laptop bin kann ich den Code wieder reinstellen.

    Das Problem ist jetzt dass die Seite links bündig ist außer header ist zentriert und die Bilder sich auf der rechten Seite am Ende wiederholen. Mir wär es Recht dass die Seite zentriert ist und der Hintergrund und Rest der Seite einfach in meiner background Farbe ist. Wie kann ich das machen?

    Meine 2. Frage:

    Ich hab meinen Seitenkopf in 2 Bilder eingeteilt, links den Header und Rechts daneben hab ich einfach ein gleiches Bild hald nur mit der HIntergrund Farbe, ich möchte also neben dem Header eine horizontale navi einbaun also einfach rechts neben dem header 5 Buttons nebeneinander machen...

    Wie mache ich das am einfachsten?

    Wenn es euch leichter ist wenn ihr meinen Code seht müsst ihr euch bis morgen gedulden hab den Quelcode leider nur auf meinem Laptop.

    Mfg. sloader

    EDIT: Html code:

    HTML:
    <body>
    <div id="wrapper">
    <div id="banner">
    <img src="img/header.gif"></div>
    </div>
    <div id="middle"></div>
    <div id="content"></div>
    <div id="footer"></div>
    </body><strong></strong></html> 
    css code:

    Code:
    *{ margin:0px; padding:0px;} 
    html
    {
     background-color:#e6e6e6;
     text-align:center;
    }
    
    #wrapper
    {
     width:1100px;
     margin-lef:auto;
     margin-rigth:auto;
    }
    
    #banner
    {
     background-image:url(img/header.gif) 
     width:1100px;
     height:105px;
     margin-left:auto;
     margin-right:auto;
     margin-top:40px;
    }
    
    #middle
    {
     background-image:url(img/slide_background.gif);
     height:264px;
    }
    
    #content
    {
     background-image:url(img/content_bg.gif);
    }
    
    #footer
    {
     background-image:url(img/footer.gif);
     height:44px;
    }
    
    
    EDIT: so sieht mein grundgerüst bisher aus: Index of /

    so sollte es mal aussehn
    http://img22.imageshack.us/img22/827/amdesign.jpg
     
  2. 17. März 2010
    AW: Seite zentrieren / Navigation neben header

    push.
    kann mir keiner helfen?
     
  3. 17. März 2010
    AW: Seite zentrieren / Navigation neben header

    gib dem content die ccs-anweisung: "margin: 0px auto;" dann ist er zentriert. das menü neben den heder kriegen: gib dem menü das CSS: "float: left;" dann sollte es links sein.


    hoffe konnte helfen.

    greeze strey
     
  4. 18. März 2010
    AW: Seite zentrieren / Navigation neben header

    Ist relativ simpel und lässt sich in 2-3 Schritten lösen..

    Zunächst nehmen wir den <div>-Container mit der ID 'wrapper' und packen dort alle elemente der Webseite rein. Nun geben wir dem äußerem Container (In unserem Fall 'wrapper') eine feste Größe (In deinem Fall width: 1100px, da dein footer etc max 1100px breit ist) zusätzlich geben wir jetzt noch dem 'wrapper' die Eigenschaft margin: 0 auto;, sodass der Außenabstand sowohl rechts auch als links imemr gleich groß ist. Falls du zu faul bist jetzt alles durch zu arbeiten kannst du auch den fertig umgesetzten Code von mir hier nehmen, hab ncoh paar Kleinigkeiten wie beispielsweise überflüssige margin's etc ausgemertz.

    HTML:
    <body>
    <div id="wrapper">
     <div id="banner">
     <img src="img/header.gif">
     </div>
     <div id="middle"></div>
     <div id="content"></div>
     <div id="footer"></div>
    </div>
    </body>
    </html>
    
    HTML:
    *{
    margin:0px;
    padding:0px;
    } 
    html
    {
     background-color:#e6e6e6;
    }
    
    #wrapper
    {
     width:1100px;
     margin: 0 auto;
    }
    
    #banner
    {
     background-image:url(img/header.gif) 
     height:105px;
     margin-top:40px;
    }
    
    #middle
    {
     background-image:url(img/slide_background.gif);
     height:264px;
    }
    
    #content
    {
     background-image:url(img/content_bg.gif);
    }
    
    #footer
    {
     background-image:url(img/footer.gif);
     height:44px;
    }
    
     
  5. 18. März 2010
    AW: Seite zentrieren / Navigation neben header

    vielen vielen dank hat mir sehr weitergeholfen !!

    Ich lass noch offen ich hab sicher noch weiter fragen bis ich zu meinem endergebnis komme siehe 1.post ^^

    Mfg. sloader

    BWs sind raus

    EDIT: Hab grad noch ein Problem im banner bereich, hab jetzt zwar wie in der html datei angegebn den header.gif drinnen, aber in der css die background datei wäre eig navi.gif die ist 1100px breit und hat die gleiche farbe wieder header hintergrund dass der ganze banner bereich die gleiche farbe hat, jedoch zeigs mir das background image aus der css nicht an.
    fehlt da noch was?
     
  6. 18. März 2010
    AW: Seite zentrieren / Navigation neben header

    mhh.. weis grad nich so ganz was du mit der navi meinst.
    vllt gehts schneller wenn du mir einfach das design, als .psd oder .jpg, gibst und ich setz es eben schnell um.

    dauert nich so lange als wenn du jetzt alle 5minuten was fragst..

    mfg
     
  7. 18. März 2010
    AW: Seite zentrieren / Navigation neben header

    ok ich schick dir ne pn mit dem ordner meiner bilder und so wies aussehn soll vlt kann ich dann von deinem code besser lernen...

    aber bitte die bilder so hernehmen wie ich sie gesliced und im ordner hab also nicht neu slicen oder so...

    hast gleich pn..

    Mfg. sloader
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.