Header mittig setzen

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

goefi-chiangmai hat geschrieben:Ja das ganze verpacken in einen div.

anfang zuoberst und ende des div zuunderst

Einfach lesen was geschrieben wird
öffnen des div zuerst und ende des div zuletzt

Patrick hat geschrieben: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?

ja sonnst hat es ja kein platz drinn

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

Wie bekomme ich das hin, das beide Designs exakt die gleiche breite haben? Ich möchte ja gerne,
dass wenn man auf "Shop" klickt die gleiche breite von header, footer und main hat. Es ändert sich nur
die navi, die links ist.

Schau mal peter, ist da so richtig?

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;
}
  
#aussen {
width: 1050px;
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;       
}


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

HomepageHelfer.org

Header mittig setzen

Re: Header mittig setzen

Re: Header mittig setzen

Wer ist online?