Überschrift verschiebt sich

Dragon · 5. April 2010

Hallo, mein Problem ist das sich die Überschrift (bzw. der ganze Inhalt) nach unten verschiebt je mehr Navigation ich in der Linken Spalte habe.
Zwischen Startseite und News z.B hin und her wechseln dann sieht man das Problem.

Hier meine Seite: <a class="postlink" href="http://vdragonsworld.de.vu/">http://vdragonsworld.de.vu/</a>

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">




<head>
    <title>VDragons World</title>




    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <meta name="keywords" content="" />
    <link href="style.css" type="text/css"  rel="stylesheet"/>
    <link rel="shortcut icon" href="Bilder/favicon.ico" type="image/x-icon" />




</head>




<body>







<div id="wrapper">










<div id="kopf">
      <img src="Bilder/Header.png" border="" height="151" width="1000" alt="VDragons World" />




</div>
















<div id="trennbalken">




</div>













<div id="steuerung">




   <ul>
     <li class="n1"><a href="index.html">Startseite</a></li>
     <li class="n2"><a href="news.html">News</a></li>
     <li class="n3"><a href="artikel.html">Artikel</a></li>
     <li class="n4"><a href="downloads.html">Downloads</a></li>
     <li class="n5"><a href="videos.html">Videos</a></li>
     <li class="n6"><a href="pictures.html">Bilder</a></li>
     <li class="n7"><a href="sonstiges.html">Sonstiges</a></li>
   </ul>




</div>






















<div id="spaltelinks">




        <a href="releaseliste.html"><img src="Bilder/Releases.png" border="0px"alt="Ver&ouml;ffentlichungen" /></a>
        <a href="entstehung.html"><img src="Bilder/Entstehung.png" border="0px"alt="Entstehung" /></a>
</div>










<div id="spalterechts">




</div>










<div id="inhalt">
     <p><h1>Willkommen auf VDragons World</h1></p>
     <h2>--- Hier findet Ihr News, Bilder, Videos und vieles mehr rund um Games ---</h2><br />
     <p>Diese Seite befindet sich noch im Aufbau deshalb w&uuml;rde ich Euch um ein bisschen Geduld bitten.</p>
     <img class="i1" src="Bilder/baustelle.png" border="" height="350" width="400" alt="Im Aufbau" />













</div>







<div id="fuss">
          Copyright by S.Engstler
</div>




























</div>










</body>




</html>

Alles anzeigen

Code

* {
    margin: 0;
    padding: 0;
    font-family: Arial sans-serif;
}







body {
    background-position: center;
    background-image: url(Bilder/space13.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
}




li {
    display:inline;
}




h1 {




    font-family: Arial sans-serif;
}
h2 {
    font-size: 18px;
    font-family: Arial sans-serif;
}




/*
#steuerung .n1 a:hover  {
   float: left;
   background-image: url(Bilder/Hover1.png);
   width: 143px;




}
*/




.i1 {
    padding-left: 120px;
}







#steuerung .n1 {




   padding-right: 5.5%;
   margin-left: 3.5%;




}




#steuerung .n2 {
   padding-left: 2.2%;







}




#steuerung .n3 {
   padding-left: 9%;




   }




#steuerung .n4 {
   padding-left: 6.8%;




}




#steuerung .n5 {
   padding-left: 6.7%;




   }




#steuerung .n6 {
   padding-left: 8.8%;




   }




#steuerung .n7 {
   padding-left: 7.8%;




   }




#steuerung a {




    line-height: 48px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-family: Arial, sans-serif;
}













#wrapper {
    background-image: url(Bilder/BG.png);
    width: 1000px;
    margin: 0 auto;
    text-align: left;
}







#kopf {
   height: 151px;







}




#trennbalken {
     background-image: url(Bilder/TBalken.png);
     width: 1000px;
     height: 7px;







}




#steuerung {




     background-image: url(Bilder/Navio.png);
     width: 1000px;
     height: 48px;
     margin-top: -3px;




}










#spaltelinks {




     padding-top: 10px;
     padding-left: 4px;
     width: 148px;













}




#spaltelinks a  {




    width: 148px;
    height: 18px;




}







#spalterechts {
      width: 165px;
      float: right;




}










.f1 {
    text-align: center;
    table-layout: fixed;
}










.x1 {
    margin-top: 2px;
    margin-bottom: 2px;
}




#b1 {
    margin-bottom: 2px;
}




#inhalt h1 h2 {
    font-family: Arial sans-serif;
}




#inhalt {
     color: #E1E1E1;
     font-family: Arial sans-serif;
     margin-left: 180px;
     margin-right: 180px;




}







#inhalt .p1 {
      color: #B4B4B4;
      font-family: Arial sans-serif;
}




#inhalt .p2 {
      font-size: 12px;
      font-family: Arial sans-serif;
      text-align: left;
      padding-bottom: 2px;
}




#inhalt .p2 a {
      color: #B4B4B4;
      text-decoration: none;
      font-family: Arial sans-serif;




}




#inhalt li {
      font-size: 18px;
      font-family: Arial sans-serif;
}




.d {
    text-decoration: underline;
}




.c1 {
    margin-bottom: -2.5px;
}
#fuss {
      text-align: center;
      font-size: 13px;
      font-family: Arial sans-serif;
      color: #000000;
      background-image: url(Bilder/Fuss.png);
      width: 1000px;
      height: 22px;
      clear: both;
}

Alles anzeigen

Sarkkan · 5. April 2010

Ich gebe mein Bestes... also das, was ich um 3:40Uhr aufbringen kann xD

Versuch das mal:

Code

#spaltelinks {




     padding-top: 10px;
     padding-left: 4px;
     width: 148px;
     float: left; /* Das kam neu dazu */
}

Hoffe hilft... =/
Bin gerade nicht wirklich sehr konzentriert xD

Sarkkan · 5. April 2010

Was habe ich dir den da gerade eben für einen Mist erzählt? :?
Naja, zur Wiedergutmachung habe ich mich gerade für dch aus meinem Bett erhoben und will dir nun einen anständigeren Tipp geben:

Wenn überhaupt müssen ja die Bilder/Links alle anderen Objekte um fließen und nicht, wie ich es dir gerade eben noch geraten hatte, die ganze Linke Spalte.

Code

#spaltelinks a  {




    width: 148px;
    height: 18px;
    float: left; /* Das kam neu dazu */
}

oder aber du musst den Inhalt um fließen lassen.
Einfach mal ausprobieren, will wieder ins Bett xDD

lauras · 5. April 2010

Was haben denn die Links damit zu tun? oO
Die sind in

Gib mal dem inhalts-div ein

Code

float: right;

und schau malobs sich ändert.

Sarkkan · 5. April 2010

Um 4Uhr hat das alles für mich noch Sinn gemacht .___.

Aber das habe ich ja auch geschrieben

Zitat

oder aber du musst den Inhalt um fließen lassen.
Einfach mal ausprobieren, will wieder ins Bett xDD

Dragon · 5. April 2010

Funktioniert nicht das mit dem float in Inhalt die anderen sachen auch net

Code

#inhalt {
     float: right;
     color: #E1E1E1;
     font-family: Arial sans-serif;
     margin-left: 180px;
     margin-right: 180px;







}

Alles anzeigen

[Blockierte Grafik: http://www.imagebanana.com/img/zljwa158/thumb/63453.png]

lauras · 5. April 2010

Du hast sowohl #spaltelinks als auch #inhalt und #spalterechts mit den entsprechenden floats ausgezeichnet?

Das ist sehr komisch... Eigentlich sind die Links in einem seperaten Kasten udn dürften keinen einfluss haben..

LG

PS: Mach mal das p ums h1 weg.. das ist ja quark..

NeoAramis · 5. April 2010

Schau zuerst einmal das dein Code valide ist, vielleicht hat sich deshalb ein Fehler eingeschlichen.

Und wechsle bitte Deinen Hoster, bevor ich die Website sehen kann, muss ich ca. 3 Pop-Up Fenster schliessen. Ist extrem nervig. Beispielsweise diesen ohne Werbung und ebenfalls gratis: <a class="postlink" href="http://www.bplaced.net/">http://www.bplaced.net/</a>.

lauras · 5. April 2010

Da sind jede Menge Fehler drin - Hauptsächlich durch falsche Attribute in den Tags. Dei anderen Fehler sehen so aus, als ob sie hauptsächlich von der ganzen Werbung verursacht werden, noch ein Grund das ganze mal abzuschalten..

NeoAramis · 5. April 2010

Ich habe es Dir alles etwas richtig gestellt, habe jetzt aber keine Zeit es fertig zu machen:

index.html

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>VDragons World</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="description" content="" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<link href="style.css" type="text/css"  rel="stylesheet"/>
<link rel="shortcut icon" href="Bilder/favicon.ico" type="image/x-icon" />
</head>
<body>
<div id="wrapper">
	<div id="kopf">
		<p>Kopf</p>
	</div>
	<div id="steuerung">
		<ul>
		    <li><a href="index.html">Startseite</a></li>
		    <li><a href="news.html">News</a></li>
		    <li><a href="artikel.html">Artikel</a></li>
		    <li><a href="downloads.html">Downloads</a></li>
		    <li><a href="videos.html">Videos</a></li>
		    <li><a href="pictures.html">Bilder</a></li>
		    <li><a href="sonstiges.html">Sonstiges</a></li>
		</ul>
	</div>
	<div id="inhalt">
		<div id="spalte_links">
		    <p>spalte_links</p>
		</div>
		<div id="spalte_rechts">
			<div id="inhaltsbereich">
				<p>inhaltsbereich</p>
			</div>
			<div id="sidebar">
				<p>sidebar</p>
			</div>
		</div>
	</div>
	<div id="fuss">
		<p>fuss</p>
	</div>
</div>
</body>
</html>

Alles anzeigen

style.css

Code

/*	Grundeinstellungen */
	* { margin: 0; padding: 0; }

	body {
		font-family: Arial sans-serif; 	
	}

	body {
		text-align: center;
		min-width: 1001px;	
	}

	#wrapper { 
	    width: 1000px;
	    margin: 0 auto;
	    text-align: left;
	}




/*	------------------------- */
/*	Kopf */
	#kopf {
		height: 150px;
	}




/*	------------------------- */
/*	Steuerung */
	#steuerung {
	    width: 1000px;
	    height: 48px;
	}

	#steuerung ul li {
	    float: left;
	    list-style-type: none;
	}

	#steuerung ul li a:link {
		color: #000;
		text-decoration: none;
	}




/*	------------------------- */
/*	Spalten */
	#inhalt {
		background-image: url(bilder/bg.png);
		background-repeat: repeat-y;
	}




	#spalte_links {
	    float: left;
	    width: 20%;
	    background: none;
	}

	#spalte_rechts {
		float: right;
		width: 80%;
		background: none;
	}




	#inhaltsbereich {
		float: left;
		width: 80%;
		background: none;
	}

	#sidebar {
		float: right;
		width: 20%;
		background: none;
	}

/*	------------------------- */
/*	Fuss */
	#fuss {
		width: 1000px;
	    text-align: center;
	    clear: both;
	}

Alles anzeigen

Folgendes für dich zum weitermachen:

Faux-Columns Technik richtig anwenden, kannst du googlen

Die Buttons der Steuerung würde ich als einzelne Grafiken gestalten, nicht aus einer Grafik

Dragon · 6. April 2010

Neo Aramis wie bekomme ich meine Seite bei bplaced hochgeladen mit Filezilla bei den anderen ftps musste ich die Daten nur hochladen und die Seite wird angezeigt bei, bplace.net aber nicht fehlt mir da noch ne zusätzliche Datei oder ein Befehl in den HTML-Documenten?

<-@Shox@-> · 6. April 2010

Bei Bplaced dauert es etwas bis die Seite Funzt.

Musste warten oder fals bei dir index of steht musste deine datei in index.html umbennen was aber auswirkungen auf dein skript haben könnte.

Überschrift verschiebt sich

Jetzt mitmachen!

Teilen