[html] Divs / css

Thargor · 13. Juni 2006

Hallo zusammen.

Ich versuche zurzeit mich in xhtml reinzuarbeiten, was soweit auch ganz gut klapt.
Nun hab ich aber ein problem mit einem div, das bei kleineren Auflösungen immer in das nächste reinwandert.

Bei einer anderen Site geht es aber komischerweise und dich hab keine Ahnung, wo mein Fehler liegt.

Hier gehts:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html><head>
 <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 <title>FOO</title>
 <style type="text/css">

 #menu {
 position: fixed;
 color: inherit;
 background-color: inherit;
 width: 8%;
 height: 100%;

 padding-top: 0;
 padding-bottom: 0;
 padding-left: 0;
 padding-right: 0;

 border-top: 0;
 border-bottom: 0;
 border-left: 0;
 border-right: 0.3em solid #008000;
 }

 .w3c {
 border: 0;
 width: 88px;
 height: 31px;
 }

 .navi {
 color: inherit;
 background-color: inherit;
 text-decoration: none;
 width: 99%;

 border: solid #008000;
 border-width: 0.1em 0em 0.1em 6px;
 margin: 0em 0em -0.75em -0.1em;}

.content {
    width: 90%;
    margin-left: 10%;
    background-color: inherit;
    color: inherit;
    }
 </style>
 </head>
 <body>

 <div id="menu">
 <div class=navi>foo</div><br>
 <div class=navi>superfoo</div><br>
 <div class=navi>monsterfoo</div><br>
 </div>
 
 <div class="content">foofooooofooooooooooo</div>

 </body>
 </html>

Hier nicht:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">


    <!-- #####BEGINN DES KOPFES##### -->


  <head>

    <link rel="stylesheet" type="text/css" href="default.css" media="all" />

    <meta http-equiv="cache-control" content="no-cache"                                                        />
    <meta http-equiv="pragma"        content="no-cache"                                                        />
    <meta http-equiv="expires"       content="0"                                                               />
    <meta http-equiv="content-type"  content="text/html; charset=utf-8"                                        />
    <meta name="robots"              content="index, follow"                                                   />

    <title>dumdidum</title>
  </head>


    <!-- #####ENDE DES KOPFES##### -->


  <body>

    <!-- #####BEGINN DES BODY##### -->

    <div id="menu">
      <h2>MEN&Uuml;</h2>
      <div class="navi"><a href="./foovorlage.html"      style="text-decoration:none">foo       </a></div><br />
      <div class="navi"><a href="./foovorlage.html"      style="text-decoration:none">foo       </a></div><br />
      <div class="navi"><a href="./foovorlage.html"      style="text-decoration:none">foo       </a></div><br />
      <div class="navi"><a href="./foovorlage.html"      style="text-decoration:none">foo       </a></div><br />
      <div class="navi"><a href="./foovorlage.html"      style="text-decoration:none">foo       </a></div><br />
    </div>

    <div class="uberschrift">
      <h1>&Uuml;berschrift</h1>
    </div>

    <div class="content">

      <div>
        <a href="http://validator.w3.org/check?uri=referer">
          <img
            class="w3c"
            src="./etc/valid-xhtml11.png"
            alt="Valid XHTML 1.1-Logo"
            title="This page is Valid XHTML 1.0 Strict" />
        </a>
        <a href="http://jigsaw.w3.org/css-validator/">
          <img
            class="w3c"
            src="./etc/vcss.png"
            alt="Valid CSS-Logo"
            title="This page is Valid CSS" />
        </a>
      </div>

    </div>
  </body>

</html>

Hier das Css zum zweiten:

Code:

body {
    background-color: #FFFFEE;
    color: #000000;
    font-size: 10pt;
    font-family: Arial, sans-serif;
    margin-top: 0;
    margin-left: 0;
    }

a:link {
    background-color: inherit;
    color: #000000;
    font-family: inherit;
    }

a:visited {
    background-color: inherit;
    color: #555555;
    font-family: inherit;
    }

a:active {
    background-color: inherit;
    color: #3F3F3F;
    font-family: inherit;
    }

a:hover {
    background-color: inherit;
    color: #800000;
    font-family: inherit;
    }

h1, h2, h3, h4, h5, h6 {
    color: #000000;
    background-color: inherit;
    font-weight: bold;
    font-family: inherit;
    }

h1 {
    background-color: inherit;
    font-size: 200%;

    margin: 0% 0% 1% 8%;
    padding: 1% 5% 0% 1%;
    border-bottom: 0.1em solid #008000;
    }

h2 {
    background-color: inherit;
    font-size: 160%;
    text-align: left;
    }

strong {
    font-weight: bold;
    }

em {
    font-style: italic;
    font-weight: bold;
    }

table, td {
    font-size: 10pt;
    font-family: inherit;
    }

.latein {
    font-family: TrajanPro-Regular, 'Comic Sans MS', Arial, sans-serif;
    }

.content {
    width: 90%;
    margin-left: 10%;
/*    float: left;*/
    background-color: inherit;
    color: inherit;
    }
    
#menu {
    position: absolute;
    color: inherit;
    background-color: inherit;
    width: 8%;
    height: 100%;

    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;

    border-top: 0;
    border-bottom: 0;
    border-left: 0;
    border-right: 0.3em solid #008000;
    }

#menu[id] {
    position: fixed;
    }

.aktiv {
    background-color: #008000;
    color: #FFEEEE;
    }

.w3c {
    border: 0;
    width: 88px;
    height: 31px;
    }

.navi {
    color: inherit;
    background-color: inherit;
    text-decoration: none;
    font-weight: bold;
    width: 81%;

    border: solid #008000;
    border-width:  0.1em 0em 0.1em 1em;
    padding: 0em 0em 0em 0.5em;
    margin: 0em 0em -0.75em -0.1em;
    }

.navi1 {
    color: inherit;
    background-color: inherit;
    text-decoration: none;
    font-weight: bold;
    width: 76%;

    border: solid #008000;
    border-width:  0.1em 0em 0.1em 0.5em;
    padding: 0em 0em 0em 0.5em;
    margin: 0em 0em -0.75em 0.9em;
    }

Ich häng noch ein paar screenshots an, die den Fehler besser beschreiben als ich

Von links nach rechts:
1. Zweiter Code
2. Zweiter Code skaliert --> Fehler
3. Erster Code
4. Erster Code skaliert --> Wie es sein soll

Wäre sehr nett, wenn mir wer helfen könnte.

Danke im Vorraus
Benedikt

€dit: Ich hab eine "Lösung" gefunden.
Ich hab den Hintergrund der "Navigationsunterpunkte" auf transparent gestellt, wodurch sie den Rahmen nichtmehr verdecken.
Deswegen hat'S auch bei dem anderen funktioniert.

€dit2.0: Huhuhu mein 256er

Suche

Thargor

Lt. Junior Grade

Anhänge

Ähnliche Themen