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

Abstand-Fehler

Status
Für weitere Antworten geschlossen.
A

assmaje

Neues Mitglied
Hi,

meine Seite ist valide, und trotzdem gibt es ständig Probleme. :(
Aus irgendeinem Grund erscheint zwischen #navigation und #main ein großer Abstand, obwohl ich gar keinen eingebaut habe. Hoffe ihr könnt mir helfen. Hier könnt ihr das ganze live ansehen: softmedia.de.nr | Home. Und noch der Code:

HTML:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<HTML>
<HEAD>
<TITLE>www.softmedia.de.nr | Home</TITLE>
<link rel="stylesheet" type="text/css" href="style.css">
</HEAD>
<BODY>

  <div id="all">

    <div id="header">
      <div id="header2">

        <div id="navigationtop">
          <a class="white" href="home.html">Home</a> | <a class="white" href="impressum.html">Impressum</a>
        </div>

        <br>
        <a class="none" href="home.html"><img src="logo.png" border="0" alt="Softmedia" title="Zurück zur Startseite"></a>

        <br>
        <div id="softmedia">
          Das große Downloadportal für deinen PC und deine PSP.
        </div>

        <br>

      </div>
    </div>

    <div id="navigation">
      <div id="psppc">

        <div id="left">
          <a class="psp" href="psp.html"></a>
        </div>

        <div id="right">
          <a class="pc" href="pc.html"></a>
        </div>

        <br class="clear">

      </div>
    </div>

    <div id="main">
      <div id="main2">

        <h1>Willkommen!</h1>
        <p>
          auf softmedia.de.nr, dem Downloadportal für Deinen PC und Deine PSP. Wir bieten Dir Downloads aller Art an, die Du Dir - natürlich - völlig kostenlos, und damit meinen wir auch <strong>kostenlos</strong>, herunterladen kannst. Wir wünschen Dir noch viel Spaß beim Surfen auf unserer Seite, und hoffen, dass Du bald wieder kommst. ;-)<br><br>
          - Softmedia
        </p>

        <h1>Hinweis</h1>
        <p>
          Diese Seite befindet sich momentan noch im Aufbau. Wir entschuldigen uns für eventuell auftretende Fehler.
        </p>

        <div id="space"></div>

      </div>
    </div>

    <div id="footer"><br><br>

      Copyright &copy; Softmedia 2008 |
      Version 0.01 |
      optimiert für <a class="white" href="http://www.mozilla-europe.org/de/products/firefox/">Firefox</a> & <a class="white" href="http://www.apple.com/de/safari/">Safari</a> |
      valides HTML & CSS |
      by Jens Assmann |
      <a class="white" href="impressum.html">Impressum</a>

    </div>

  </div>

</BODY>
</HTML>

CSS:

Code: 
body {
     background-image:url(hintergrund.png);
     background-repeat:repeat;
     background-attachment:fixed;
     margin-top:0px;
     margin-bottom:0px;
     font-family:Arial;
     font-size:12px;
     text-align:center;
}

a:link { color:#000000; text-decoration:underline; }
a:visited { color:#000000; text-decoration:underline; }
a:hover { color:#FF8C00; text-decoration:underline; }
a:active { color:#FF8C00; text-decoration:underline; }
a:focus { color:#FF8C00; text-decoration:underline; }

.none:link { color:#000000; text-decoration:none; }
.none:visited { color:#000000; text-decoration:none; }
.none:hover { color:#FF8C00; text-decoration:none; }
.none:active { color:#FF8C00; text-decoration:none; }
.none:focus { color:#FF8C00;text-decoration:none; }

.white:link { color:#000000; text-decoration:underline; }
.white:visited { color:#000000; text-decoration:underline; }
.white:hover { color:#FFFFFF; text-decoration:underline; }
.white:active { color:#FFFFFF; text-decoration:underline; }
.white:focus { color:#FFFFFF; text-decoration:underline; }

h1 {
     font-size:12px;
     font-weight:bold;
     color:#FF8C00;
}

#all {
     background-color:#FFFFFF;
     width:80%;
     margin:auto;
     text-align:left;
}

#header {
     background-color:#FF8C00;
}

#header2 {
     margin-left:20px;
     margin-right:20px;
}

#navigationtop {
     margin:0px;
     padding-top:5px;
     font-size:10px;
     text-align:right;
}

#softmedia {
     font-size:11px;
     color:#FFFFFF;
}

#navigation {
     background-image:url(farbverlauf.png);
     background-repeat:repeat-x;
     height:150px;
     padding-top:31px;
     padding-bottom:31px;
     text-align:center;
}

#psppc {
     width:214px;
     margin:auto;
}

.psp {
     background:url("psp.png") 0 0 no-repeat;
     width:87px;
     height:88px;
     display:block;
     padding:0px;
     border-width:0px;
     font-size:0px;
     text-decoration:none;
     text-indent:-100px;
}

.psp:hover { 
     background-position:-87px 0;
}

.pc { 
     background:url("pc.png") 0 0 no-repeat;
     width:87px;
     height:88px;
     display:block;
     padding:0px;
     border-width:0px;
     font-size:0px;
     text-decoration:none;
     text-indent:-100px;
}

.pc:hover { 
     background-position:-87px 0;
}

#left {
     width:87px;
     float:left;
}

#right {
     width:87px;
     float:left;
     margin-left:40px;
}

.clear {
     clear:both;
}

#main {
     background-color:#FFFFFF;
     margin:0px;
}

#datenbank {
     width:100%;
     height:100%;
}

#main2 {
     margin:20px;
}

#space {
     margin-bottom:800px;
}

#footer {
     background-image:url(farbverlauf2.png);
     background-repeat:repeat-x;
     height:50px;
     clear:both;
     margin:0px;
     font-size:10px;
     text-align:center;
}
 
Hi,

der große Abstand kommt durch height:150px für #navigation.

Schmeiss height raus, dann schauts gleich viel ordentlicher aus.

koslowski
 
koslowski schrieb:
Hi,

der große Abstand kommt durch height:150px für #navigation.

Schmeiss height raus, dann schauts gleich viel ordentlicher aus.

koslowski
Zum Vergrößern anklicken....
Danke, funktioniert! :D

@threadii:
Ja, das padding ist gewollt, damit die Buttons vertikal mittig in #navigation sind. Ich weiß, dass das auch mit text-valign:middle geht, was aber nicht in divs funktioniert. :/ Eigentlich ist sie valide, wenn du softmedia.de.nr eingibst. ;)
 
assmaje schrieb:
Ich weiß, dass das auch mit text-valign:middle geht, was aber nicht in divs funktioniert.
Zum Vergrößern anklicken....
Da bist Du nicht richtig informiert.
Die Eigenschaft (die in Wirklichkeit vertical-align heißt) geht in jedem Element, das vom Typ "table-cell" ist. DAS wiederum funktioniert in einem sogenannten "modernen" Browser nicht, weswegen sich der Eindruck verbreitet, diese EIgenschaft würde nicht funktionieren.

Eigentlich ist sie valide, wenn du softmedia.de.nr eingibst.
Zum Vergrößern anklicken....
Ja, das ist dann wohl das Frameset, das valide ist, aber nicht Deine Seite!

Gruß,
-Efchen
 
Efchen schrieb:
Da bist Du nicht richtig informiert.
Die Eigenschaft (die in Wirklichkeit vertical-align heißt) geht in jedem Element, das vom Typ "table-cell" ist. DAS wiederum funktioniert in einem sogenannten "modernen" Browser nicht, weswegen sich der Eindruck verbreitet, diese EIgenschaft würde nicht funktionieren.


Ja, das ist dann wohl das Frameset, das valide ist, aber nicht Deine Seite!

Gruß,
-Efchen
Zum Vergrößern anklicken....
Achso... ._.
Naja, is nur n kleiner Fehler. Werd ich gelegentlich mal ausbessern. :)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben