XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Designfehler: IE stellt Design falsch dar; FF macht alles richtig... (http://xhtmlforum.de/showthread.php?t=47187)

surffix 03.08.2007 00:41

Designfehler: IE stellt Design falsch dar; FF macht alles richtig...
 
Hallo zusammen.

ich habe folgendes einfaches Design entworfen. Der "center" Bereich rutscht ziemlich weit nach unten.... Wo ist der Fehler bei der Positionierung?

anbei der Code:
design.html

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
        <title>Titel</title>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

        <style type="text/css" media="all">@import "images/style.css";</style>
        <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
</head>

<body>


<div class="content">
<div class="toph"></div>

<div class="logo">
<a href="#"><img src="images/logo.jpg" alt="" width="158" height="165" border="0" /></a>
</div>

  <div class="menu">
 
      <div id="sidenav">
      <a class="section" href="#1">Startseite</a><span class="hideMe"><br /></span>
      <a class="section" href="#3">Kontakt</a><span class="hideMe"><br /></span>
      <a class="section" href="#4">Impressum</a><span class="hideMe"><br /></span>
      </div>
                       
  </div>

<div class="center">

                <h2>Überschrift</h2>           
                <p>Haupttext</p>
  </div>
<div class="footer">
          <div class="footer_text"><a href="#">Login</a> | <a href="impressum.php">Impressum</a> </div>
  </div>
</div>

</body>
</html>

style.css:
Code:


body {
        margin:15px 0;
        padding:0;
        color:#685E43; 
        line-height: 1.4em;
        background : url(bg.gif);
       
        font-family: Arial, Helvetica, sans-serif;
}

.logo {
        height: 158px;
        width:  165px;
        position:relative;
        left:39px;
        top:-70px;
}

.toph {
        background: #3D3E42 url(top.jpg) no-repeat center;
        height: 67px;
        /* width: 665px; */
        margin:0;
        padding:0;
}

.content {
    color: #a0a0a0;
        margin: 0 auto;
        padding: 0;
        width: 665px;
        background: #3D3E42 url(bg-mid.jpg) repeat-y center;
}

.menu {
        width: 149px;
        position:absolute;
        left: 340px;
        top: 195px;       
        color:#A90209;
}


/*        Links des Menu        */
a.mainlevel:link, a.mainlevel:visited {
        color:#A90209;
}
/*        Links des Menu        */
a.mainlevel:hover {
        color:#A90209;
}


.center {
        float:left;
        width: 396px;
        font-size: 95%;
        margin: 0px 0 0px 225px !important;
        margin: 0px 0 0px 20px;
        padding: 0;
        background: #eee7d2;
        color: #685E43;
}


.footer {
        clear:both;
        width: 665px;
        height: 70px;
        color:#888; 
        font-size:90%;
        background: #3D3E42 url(bot.jpg) no-repeat center;
        text-align:center;
}


.footer_text {
        width: 665px;
        color:#FFFFFF;
        font-size:90%;
        text-align:center;
        padding: 26px;
}

A.footer {
        COLOR: #FFFFFF;
}
A.footer:link {
        COLOR: #FFFFFF;
}
A.footer:visited {
        COLOR: #FFFFFF;
}
A.footer:active {
        COLOR: #FFFFFF;
}
A.footer:hover {
        COLOR: #FFFFFF;
}


/*        Überschriften        */
.contentheading {
        color:#685E43;

}

.componentheading {
        color:#685E43;

}

/*        Menu        */

.hideMe {
        DISPLAY: none
}

A.section {
        font-size: 13px;
        PADDING-RIGHT: 2px;
        BORDER-TOP: #eee7d2 1px solid;
        DISPLAY: block;
        PADDING-LEFT: 6px;
        BACKGROUND: #DDD5BE;
        PADDING-BOTTOM: 4px;
        MARGIN: 0px;
        COLOR: #DDD5BE;
        PADDING-TOP: 4px;
        FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
        TEXT-DECORATION: none;
        font-stretch: narrower;
}
A.section:link {
        BACKGROUND: #DDD5BE;
        COLOR: #A90209;
}
A.section:visited {
        COLOR: rgb(255,255,255);
}
A.section:active {
        COLOR: rgb(255,255,255);
}
A.section:hover {
        BACKGROUND: #A90209;
        COLOR: rgb(255,255,255);
}

Ferner gefällt mir noch folgendes nicht: Wenn der Haupttext sehr gering ist oder gar nicht vorhanden.... dann rutscht der "footer" Bereich unter dem "menu" Bereich herunter. Ein Teil des Menus wird dann nicht mehr von dem Design-Rahmen umfasst. Wie kann man festlegen, dass sie die mindest Höhe sich an dem "menu" Befehl bemisst!?

Danke für eure Hilfe...

heiko_rs 03.08.2007 03:03

Zitat:

Zitat von surffix (Beitrag 344013)
Der "center" Bereich rutscht ziemlich weit nach unten.... Wo ist der Fehler bei der Positionierung?

Der Grund liegt bei .logo - es hat position: relative;, und das läßt alle übrigen Elemente immer unbeeinflußt von der Verschiebung des Elementes mit position: relative;. Setze top auf Null und Du siehst, daß .center genau unterhalb von .logo beginnt.

Zitat:

Zitat von surffix (Beitrag 344013)
Wenn der Haupttext sehr gering ist oder gar nicht vorhanden.... dann rutscht der "footer" Bereich unter dem "menu" Bereich herunter.

.menu hat position: absolute; und wird daher von allen übrigen Elementen "ignoriert", als wäre es gar nicht vorhanden. Wirf pos. abs. raus und lasse .menu stattdessen floaten. Der Footer bekommt dann clear, damit er immer unterhalb des/der Floats steht. Siehe dazu auch FAQ Punkt 2.


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:50 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023