HTML bzw CSS zu viel Platz unter dem Inhalt

RATED · 12. Dezember 2010

hallo
ich weis es ist eine schande das programmieren zu nennen

aber ich habe da ein kleines problem.

und zwar geht es darum, dass unter dem Inhalt meiner seite zu viel platz ist.
ich habe ein transparenten div kontainer und einen div kontainer mit dem inhalt (gleiche größe wir der untere) und dann mit z-index gearbeitet damit sie untereinander sind.

Verstehe nicht ganz warum da noch so viel platz unter dem Inhalt ist.

http://rgg.pytalhost.de

CSS Quellcode:

Code:

@charset "utf-8";

body{
	background-repeat:no-repeat;
	background-position:top;
}

.content{
	position:relative;
	background-color:#9a9a9a;
	z-index:1;
	height:1000px;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	filter:alpha(opacity=70); /* IE */
	opacity:0.7; /* allgemein */
	-moz-opacity:0.7; /* Mozilla */
	-khtml-opacity:0.7; /* KTHML */
	-opera-opacity:0.7; /* Opera */

}

.content2{
	top:-1000px;
	position:relative;
	z-index:2;
	height:500px;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
}

.header{
	background-image:url(images/header.jpg);
	background-repeat:no-repeat;
	height:170px;
	width:1000px;
	margin-left:auto;
	margin-right:auto;
	margin-top:8px;
	margin-bottom:8px;
}

.navi{
	text-align:center;	
	float:left;
	width:260px;
	height:1000px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:19px;
	background-repeat:no-repeat;
}

.txt{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:14px;
	padding:5px;
	padding-left:200px;
}

html Quellcode:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RGG-Clanpage</title>
</head>

<body background="images/background.jpg" bgcolor="#000000">

<div class="header"></div>

    <div class="content">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>
    <div class="content2">
    <div class="navi">
      <font color="#FFFFFF"><img src="images/navi.jpg" width="260" height="725" border="0" usemap="#Map" />
                  <map name="Map" id="Map"><area shape="poly" coords="13,255,45,256,151,254,161,262,210,263,244,271,235,276,168,284,155,285,148,289,24,288,12,288" href="/gaestebuch/" /><area shape="poly" coords="15,196,47,197,153,195,163,203,212,204,246,212,237,217,170,225,157,226,150,230,26,229,14,229" href="/forum/" /><area shape="poly" coords="15,141,47,142,153,140,163,148,212,149,246,157,237,162,170,170,157,171,150,175,26,174,14,174" href="media.html" />
        <area shape="poly" coords="11,22,147,23,164,31,219,32,246,39,236,47,196,52,165,51,151,55,27,60,14,60" href="index.html" />
        <area shape="poly" coords="15,82,47,83,153,81,163,89,212,90,246,98,237,103,170,111,157,112,150,116,26,115,14,115" href="clan.html" />
      </map>
      </font>
    </div>
    <div class="txt">
    <h1 align="center">Herzlich Willkommen auf der Homepage der Rockin German Gamers!</h1>

	</div>

	</div>
</body>
</html>

Danke schonmal für jegliche Hilfe =)

abcb12 · 13. Dezember 2010

Versuch mal die height von navi und content zu verändern.
Wenn du dich mit DIV/CSS nicht gut auskennst, würde ich dir empfehlen, das ganze mit tables zu realisieren. Ja ich weiß, man sollte eigentlich auf tables verzichten, aber Fakt ist, damit ist es um einiges einfacher, ein Layout zu erstellen, das sauber aussieht. Zudem wirst du auch weniger Anzeige-Probleme in den verschiedenen Browsern haben.

Kagee · 13. Dezember 2010

Es liegt an dem Container "content2". Diesen verschieben Sie zwar mit um 1500 Pixel nach oben, der Platz den dieser container braucht wird durch das Attribut position:relative aber trotzdem freigehalten.

Ich verstehe noch nicht ganz warum Sie den Umstand mit content und content2 überhaupt machen. Besser alles in "content2" packen und "content" entfernen. Dann weisen Sie "content2" die halbtransparenze Hintergrundfarbe zu. Hätte denselben Effekt.
Noch dazu bekommen Sie irre Probleme, wenn die Seiten durch den Inhalt mehr als 1000px an Höhe brauchen. Mit einem Momentanen Stand kann der Container "content" sich niemals an den Inhalt anpassen - weil in ihm gar keiner ist.

Wenn schon 2 Container, dann ineinander verschachtelt, also so:

Code:

<body>

<div class="header"></div>

    <div class="content">

        <div class="content2">
            <div class="navi">
            </div>
            <div class="txt">
                <h1 align="center">Herzlich Willkommen auf der Homepage der Rockin German Gamers!
                </h1>
            </div>
        </div>
    </div>
</body>
</html>

Aber wie gesagt, der 2. Container ist eigentlich überflüssig.

IceMatrix · 13. Dezember 2010

Install dir Firefox mit dem Firebug Plugin, dann kannst du direkt im Box-Modell ansehen wo das Problem liegt.
@abcd12: Weniger Anzeige-Probleme mit Tables ist allenfalls ein Gerücht. Wie du bereits richtig angemerkt hast sind Tables fürs Layout obsolete. Man sollte sie nur einsetzen wo es semantisch angebracht ist.

abcb12 · 13. Dezember 2010

@IceMarix: Ist im "Normalfall" auch richtig so. Allerdings ist es meiner Meinung nach für einen Anfänger oder für jemanden, der nicht viel Erfahrung im Umgang mit HTML/CSS hat, wirklich wesentlich einfacher, eine Seite mit tables zu erstellen, als mit divs.

RATED · 13. Dezember 2010

Ich kenn mich schon mit html aus.
Zumindest ein wenig. (hab das schon ein halbes jahr in der schule und ziemlich viel hier zuhause gemacht)

aber css ist für mich einfach noch ziemliches neuland =)

Suche

HTML bzw CSS zu viel Platz unter dem Inhalt

RATED

Cadet 2nd Year

abcb12

Lt. Junior Grade

Kagee

Lt. Junior Grade

IceMatrix

Lt. Commander

abcb12

Lt. Junior Grade

RATED

Cadet 2nd Year

Ähnliche Themen