Abstand-Fehler

html.de-Forum HTML, XHTML & CSS
1

Hi,

meine Seite ist valide, und trotzdem gibt es ständig Probleme. :frowning:
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]

www.softmedia.de.nr | Home 
<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>
[/CODE]

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;
}[/CODE]

2

Deine richtige URL lautet: www.softmedia.de.nr | Home

und der Quellcode nicht eigentlich nicht valide: [Invalid] Markup Validation of http://assmaje.as.funpic.de/Softmedia/home.html - W3C Markup Validator (ok, klitzekleines Problem nur g)

Der Abstand von #navigation nach unten kommt durch ein großes „padding-bottom: 31px;“ in eben diesem Zustande. Wenn dies Absicht ist, verwende lieber margin (Außenabstand) stattdessen.

3

Hi,

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

[/I]Schmeiss height raus, dann schauts gleich viel ordentlicher aus.

koslowski

4

Danke, funktioniert! :smiley:

@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. :confused: Eigentlich ist sie valide, wenn du softmedia.de.nr eingibst. :wink:

5

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.

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

Gruß,
-Efchen

6

Achso… ._.
Naja, is nur n kleiner Fehler. Werd ich gelegentlich mal ausbessern. :slight_smile: