Header mittig setzen

Beitrag von **Patrick** » Do 17. Nov 2011, 10:47

Huhu zusammen,
gibts eine andere möglichkeit seinen header bzw. auch den footer und den hauptbereich mittig zu setzten als mit dem margin?

Derzeit habe ich es so. Der ist aber nicht mittig.

Code: Alles auswählen

#header {
height: 220px;
width: 900px;         
background-color: transparent;
background-image: url(http://file1.npage.de/009238/11/bilder/header_2011.gif);
color: #CCC;
margin: 10px 350px 30px 350px;
border-width: 5px;
border-style: solid;
border-color: #775121;
}

Beitrag von **goefi-chiangmai** » Do 17. Nov 2011, 18:17

normalerweise macht man es so,

Code: Alles auswählen

  margin-right: auto;
  margin-left: auto;

Beitrag von **Patrick** » Do 17. Nov 2011, 18:26

beim header geht es, beim main und footer nicht :-/

Beitrag von **Patrick** » Do 17. Nov 2011, 18:30

Also, wenn ich das jetzt beim header und footer mache verzieht sich alles komplett

http://patschwork.npage.de/zum-shop_59501426.html

Beitrag von **goefi-chiangmai** » Do 17. Nov 2011, 18:45

normalerweise macht man das ja nicht im header sondern in einem div "aussen" oder "wrap" eigentlich egal wie in nennst.
den setzt du mittig und dann kommt alles rein

Beitrag von **Patrick** » Do 17. Nov 2011, 19:25

Dass heiß, ich muss in meinem code noch ein "div" einbauen? Wo muss ich den denn einpflegen?

Code: Alles auswählen

                      <!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">
            <head>

                <title>PatschWorks</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="author" content="" />
        <meta name="keywords" content="" />
        <meta name="generator" content="Webocton - Scriptly (www.scriptly.de)" />

        <style type="text/css">

          
        h1 {
        h1 font-family: 'Buda', arial, serif;
        font-size: 20px;
        color: #FFF111;
        }

        h2 {
        font-family: 'Buda', arial, serif;
        font-size: 20px;
        color: #000000;
        }

        a:link {
        font-family: 'Buda', arial, serif;
        color:#B19667;
        font-size:16px;
        text-decoration:none
        }

        a:visited {
        font-family: 'Buda', arial, serif;
        color:#B19667;
        font-size:16px;
        text-decoration:none
        }

        a:active {
        buda;color:#775121;
        font-size:16px;
        text-decoration:none
        }

        a:hover {
        font-family: 'Buda', arial, serif;
        color:#9b1515;
        font-size:16px;
        text-decoration:none
        }

       body {
        background-image:url(http://file1.npage.de/009238/11/bilder/hg_braun1.gif);
        background-repeat: repeat;
        background-attachment: fixed;

        background-position: center center;
        background-color: #D1CCBD;
        font-family: 'Buda', arial, serif;
        font-size: 16px;
        padding: 10px;
        margin: 0;
       }

#header {
height: 220px;
width: 900px;         
background-color: transparent;
background-image: url(http://file1.npage.de/009238/11/bilder/header_2011.gif);
color: #CCC;
margin: 10px 350px 10px 350px;
border-width: 5px;
border-style: solid;
border-color: #775121;

}

    #main {
        width: 880px;
        border-width: 5px;
        border-style: solid;
        border-color: #775121;
        background-image: url(http://file1.npage.de/009238/11/bilder/hg_2.jpg);
        background-repeat: repeat;
        padding: 10px 10px 10px 10px;
        margin: 10px 10px 10px 200px;
       }
          
    #fuss{
        width: 900px;
        height: 60px;
        font-family: 'Buda', arial, serif;
        font-size: 16px;
        color: #775121;
        background-color: transparent;
        background-image: url(http://file1.npage.de/009238/11/bilder/hg_2.jpg);
        border-width: 5px;
        border-style: solid;
        border-color: #775121;
        padding: 0;
        margin: 30px 10px 10px 200px;
       }
   
    #left {
       background-color:transparent;
       padding: 0;
       border: 0px solid #f09;
       margin: 10;
       width: 180px;
       position: absolute;
       top: 280px;
       left: 0;
       margin: 10px 200px 10px 160px;
       }

    /* navi  Oben
            ---------------------------------------------------------------*/

        .menuoben {
        display: block;
        width: 147px;
        height: 30px;
        line-height: 25px;
        text-align: center;
        text-decoration: none;
        font-family: 'Buda', arial, serif;
        font-size: 14px;
        color: #999999;
        background-color: #775121;
        background-image: url();
        border: solid 1px #B19667;
        }

        .menuoben:hover {
        display: block;
        width: 147px;
        height: 30px;
        line-height: 25px;
        text-align: right;
        text-decoration: none;
        font-family: 'Buda', arial, serif;
        font-size: 14px;
        color: #775121;
        background-color: ;
        background-image:  url(http://file1.npage.de/008528/63/bilder/button_gross_2.png);
        border: solid px #775121;
        margin-bottom: 0px;
        }

            /* Navi Links
            -------------------------------------- */

        #navi {
        float: left;
        width: 150px;
        background-color: transparent;
        padding-top: 0px;
        padding-right: 10px;
        padding-bottom: 10px;
        padding-left: 10px;
        font-size: 1px;
        color: #775121;
        margin-left: 10px;
        }

        #menulink {
        display: block;
        width: 150px;
        height: 20px;
        line-height:25px;
        text-align: left;
        text-decoration: none;
        font-family: 'Buda', arial, serif;
        font-size: 15px;
        color: #DFC382;
        background-color: ;
        background-image: url();
        }

        #menulink:hover {
        display: block;
        width: 150px;
        height: 20px;
        line-height: 25px;
        text-align: left;
        text-decoration: none;
        font-family: 'Buda', arial, serif;
        font-size: 17px;
        color: #DFDE9C;
        background-color: ;
        background-image:  url();
        }


    </style>

    <body>


      <div id="header">
</div>
      
      <div id="left">
  
 <div id="navi">
 
 
  
<ul>   
  <li><u><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Holzdeko</u></span></u></li>   
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Buchstaben</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Zahlen</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Schlüsselbretter</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Aufsteller</a></li>      
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Tierzubehör</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonstiges</a></li>      
    </ul>  <br><br><br><br><br><br><br>

  
<ul>
  <li><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Malerei</u></span></li>     
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Acryl</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Pastell</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Ölpastell</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Monochrome</a></li>      
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Illustration</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonderwünsche?</a></li>      
      </ul><br><br><br><br><br><br><br>
  
  
<ul>
  <li><u><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Textilien</u></span></u></li>
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Hundemäntel</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Taschen</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Handytaschen</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Tischdecken</a></li>      
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Bezüge</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonstiges</a></li>
      </ul><br><br><br><br><br><br><br>
  
<ul>  
      <li><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>SALE%</u></span></li>
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• B-Ware</a></li>       
      <li><a href="http://patschwork.npage.de/willkommen_85001094.html" id="menulink">• Sonderangebote</a></li>   
      </ul><br><br><br><br><br><br><br>
   

<ul>
      <li><span style="font-family:'Times New Roman',Times,serif; color: #DFC382; font-weight:bold; font-size:18px"><u>Sonderwünsche?</u></span></li>
      <li><a href="http://patschwork.npage.de/kontakt.html" id="menulink">» Kontaktieren</a></li>
      </ul><br><br><br><br><br><br><br>

 
   </div>
    <div id="main">

Beitrag von **goefi-chiangmai** » Do 17. Nov 2011, 19:30

Ja das ganze verpacken in einen div.

anfang zuoberst und ende des div zuunderst

Beitrag von **Patrick** » Do 17. Nov 2011, 19:36

ist das hier ok?
kann ich das nutzen?

Code: Alles auswählen

#aussen {
        width: 900px;
        margin-right: auto;
        margin-left: auto;
        background-color:red ;
        border: 0px solid transparent;
        background-image: url(http://file1.npage.de/009238/11/bilder/hg_2.jpg);
        background-attachment: fixed;
        background-repeat: repeat;
        background-position: center center;       
        }

Beitrag von **goefi-chiangmai** » Do 17. Nov 2011, 20:00

klar
aber weiss nicht ob du da wirklich nochmals einen zusätzlichen hintergrund möchtest, hast aufjedenfall einnen drinn,
und breite, mit der zusätzlichen navi wo du dann reinmachen willst links, muss danach breiter werden als 900

Beitrag von **Patrick** » Do 17. Nov 2011, 20:03

Na aber wo muss ich das einpflegen?

Was meinst du mit es muss breiter werden als 900px? Wegen der linken navi? Muss ich dann die Breite der Navi dazu adieren?

HomepageHelfer.org

Header mittig setzen

Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Wer ist online?