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

Footer und fly out

S

Stefan27185

Neues Mitglied
Zuerst mal ein nettes HALLO an ALLE im Forum, ich bin gerade dabei eine Homepage für unsere Firma zu entwerfen und bin leider besser in programmieren als in CSS und hätte 2 kleine Fragen an euch.

Mein footer will irgendwie nicht so richtig nach unten rutschen und das 2te wäre mein FLY OUT Menü... mir wäre es lieber es öffnet sich nach links und nicht nach rechts... ich habe schon seeeeehr lange herum probiert und weis einfach nicht weiter, ich bin überzeugt euren geschulten Augen fallen die Fehler sofort auf und könnt mir dabei helfen....biiiitte....

Ich bin mal einfach so frech und poste meinen Code.... die Css Daten habe ich in eine externe Datei ausgelagert da ich das Layout für die ganze Seite verwenden möchte.....

Meine CSS Datei:

HTML: 
@charset "utf-8";
/* CSS Document */

#body {
 width: 1000px;
 margin: 0 auto;
 height: 700px;
 background-image: url(Bilder_Layout/back.png);
 background-repeat: repeat-x;
 }
#rahmen_layout {
 max-width: 1200px;
 min-width: 600px;
 height: 500px;
 margin:   auto;
 }
#mainnav_rahmen {
 float: right;
 width:205px;
 height: 450px;
 margin-right: -10px;
 background-image: url(Bilder_Layout/nav.png); 
 background-repeat: no-repeat;
 text-algin: center;
 overflow:inherit;
 padding-right: 20px;
 -moz-border-radius:20px;
}
#mainnav {
 float: right;
 width: 100px;
 height: 350px;
    min-width: 10em;
    color: #0055BB;
    list-style: none outside none;
    margin-bottom: 10px;
    padding: 10px;
 padding-top: 50px;
 padding-right: 10px;
 border-top-color:#0858E2;
    margin-right: 5px;
 }
#mainnav h3 {
 margin: 0.1em;
 list-style: none;
 background-color: transparent;
 padding-right: 5px;
 padding-bottom: 0;
 }
#mainnav ul {
 list-style: none;
 background-color: transparent;
 padding-right: 5px;
 padding-bottom: 0;
 margin-right: 10px;
}
 li{
 background-color: #ffcc66;
 background-repeat: no-repeat;
 background-position: 100% 0.2em;
 padding-right: 2em; 
 display: block;
 border-bottom: solid;
 text-align: center;
 text-indent: inherit;
 -moz-border-radius:10px;
 -khtml-border-radius:10px;
 font-family: Arial, Helvetica, sans-serif;
 font-weight: bolder;
 
}
 ul{
 list-style-type: none;
 width: 11em;
 padding-right: 2px;
 }
 li a {
 width:10em;
 heigth: 1em;
 color: black;
 display: block;
 padding: 0.5em;
 text-decoration: none;
 
 }
 li:hover {
 background: #f59e04;
}
 li ul {
 
 width: 10em;
 display: none;
}
 li li {
 overflow: hidden;
}
 li:hover ul {
 right: auto;
 margin-left: 10em;
 margin-top: -2em;
 display: block;
}
 li:hover ul li:first-child {
 margin-top: -2px;
 border-top: 1px solid #000;
 
}
 ul, li {
  margin: 0;
  padding: 0;
 }
#box {
 position: relativ;
 height: 500px;
 margin-left: 20px;
 padding-right: 20px;
 min-width: 672px;
 min-height: 683px;
}
#main {
 position: absolute;
 height: 600px;
 margin-right: 10px;
 padding: 0 2%;
 float: right;
 border: 0;
 width: 670px;
 background-color: #FFF;
   overflow: scroll;
 -moz-border-radius:10px;
 -khtml-border-radius:10px;
 z-index: 10;
 }
#footer {
 position: relativ;
 margin-bottom: 0;
 width: auto;
 background:#FC6;
    text-align: center;
 height: 20px;
 z-index: 500;
 }

#header h1 {
 width: 98%;
 height: 90px;
 background-color: #0858E2;
 background-repeat: no-repeat;
 -moz-border-radius:20px;
 -khtml-border-radius:20px;
 border:groove;
 }
#logo {
 margin-top: 5px;
 margin-right: 40px;
 float: right;
 padding-top: -1px;
 position: inherit;
 width: 600px;
 height: 80px;
  }

Und die Startseite

HTML: 
<body id="body">
<div id="rahmen_layout">
<div id="header">
 <div id="logo"><img src="Bilder_Layout/logo_header.png"  width="600" height="86" align="left"  /></p></div>
 <h1>&nbsp;</h1>
 </div>
<div id="box">
<div id="mainnav_rahmen">
<div id="mainnav">
 <ul>
    <li><a href="Unternehmen.html">Unternehmen</a>
    <ul>
        <li><a href="Team.html">Unser Team</a></li>
        <li><a href="Anfahrt.html">Anfahrt</a></li>
          <li><a href="Öffnungszeiten.html">Öffnungszeiten</a></li>
        </ul>
        </li>
    <li><a href="Produkte.html"class="aktuell">Produkte</a>
    <ul>
        <li><a href="Olivetti.html">Olivetti</a></li>
        <li><a href="Sharp.html">Sharp</a></li>
          <li><a href="Brother.html">Brother</a></li>
        </ul>
        </li>
    <li><a href="#">Anfragen</a>
     <ul>
        <li><a href="Anfragen.html">Produktanfragen</a></li>
        <li><a href="Reperaturanfragen.html">Reperaturanfragen</a></li>
        </ul>
        </li>
    <li><a href="Copyshop.html">Copyshop</a></li>
     
    <li><a href="#">Support</a>
    <ul>
        <li><a href="Soforthilfe.html">Soforthilfe</a></li>
        <li><a href="download.html">Treiber download</a></li>
        <li><a href="fernwartung.html">Fernwartung</a></li>
        </ul>
        </li>
    <li><a href="Haftungsausschluss.html">Haftungsausschluss</a>
    <li><a href="AGB.html">AGB</a></li>
    </li>
    </ul>
    </div>
    </div>
<div id="main" class="clearfix">
Platzhalter
<p> </p>

<p> </p>
<p> </p>
<p> </p>

<p> </p><p style="text-align: left;"> </p>
    </div>
   </div> 
   </div>  
<div id="footer" align="center">XXXXXXX- XXXXXX - XXXXXX- Tel: XXXXXX- Fax: XXXXXX - E-mail: XXXXX </div>
      
</body>
</html>


Ich sage schon mals vielen dank.... und Liebe Grüße
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben