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

Script verschiebt Hintergrund

T

TecPro Technik

Neues Mitglied
Hallo
Ich habe mir für mein Impressum maps-einbinden.de ein Google Maps Ausschnitt geholt.
Wenn ich jetzt allerdings, im CSS den Befhl "margin-top" machen will, verschiebt sich auch mein hintergrund der seite!
Wie kann ich es ändern`?
 
Werbung:
Quellcode der Map:
Code: 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div  style="overflow:hidden;height:350px;width:550px;"><div id="map_canvas" style="height:350px;width:550px;"></div><a href="http://www.maps-einbinden.de">google maps generator</a></div><script type="text/javascript">window.setTimeout("initGmaps();",300);function initGmaps(){var myOptions = {zoom:13,center:new google.maps.LatLng(51.09797, 14.290449999999964),mapTypeId: google.maps.MapTypeId.HYBRID};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(51.09797, 14.290449999999964)});infowindow = new google.maps.InfoWindow({content: "<b>TecPro Technik</b><br>Gaußiger Weg 1<br>01904 Neukirch"});google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}</script>
 
Werbung:
Ich meinte eher alles, da es ja um den Hintergrund deiner Seite geht der in diesem Abschnitt nicht enthalten ist.
 
Ohh, Sorry!

HTML:
Code: 
<!DOCTYPE html><hmtl>
<head>
	<title>TecPro Technik</title>
	<link rel="stylesheet" type="text/css" href="style_Impressum.css" />
</head>
<body>
	<div id="header">
		<img src="img/header.gif" />
		</div>
	<div id="farbverlauf_buttonleiste">
		<div id="menue">
			<a href="index.html"><div class="menue_button"><p>HOME</p></div></a>
			<a href="News.html"><div class="menue_button"><p>NEWS</p></div></a>
			<a href="Videos.html"><div class="menue_button"><p>VIDEOS</p></div></a>
			<a href="Referenzen.html"><div class="menue_button"><p>REFERENZEN</p></div></a>
			<a href="Porträt.html"><div class="menue_button"><p>PORTRÄT</p></div></a>
			<a href="Kontakt.html"><div class="menue_button"><p>KONTAKT</p></div></a>
		</div>
	</div>
	<div id="website">
		<div id="main">
			<div id="main_text">
			<h1>Impressum</h1>
			<p>TecPro Technik<p>
		       Dennis Keller<p>
		       Gaußiger Weg 1<p>
		       01904 Neukirch<p>
			</p>
			</div>
			<div id="map">
				<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div  style="overflow:hidden;height:350px;width:550px;"><div id="map_canvas" style="height:350px;width:550px;"></div><a href="http://www.maps-einbinden.de">google maps generator</a></div><script type="text/javascript">window.setTimeout("initGmaps();",300);function initGmaps(){var myOptions = {zoom:13,center:new google.maps.LatLng(51.09797, 14.290449999999964),mapTypeId: google.maps.MapTypeId.HYBRID};map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(51.09797, 14.290449999999964)});infowindow = new google.maps.InfoWindow({content: "<b>TecPro Technik</b><br>Gaußiger Weg 1<br>01904 Neukirch"});google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}</script>			
			</div>
		</div>
		
	</div>	
<div id="Leiste_Ende">
	<div id="Impressum">
		<a href="Impressum.html"><div class="impressum_button"></a>
	</div>
</div>
</body>
</html>

CSS:
Code: 
body {background-color:#9bc6e9;
margin:0px auto;
min-width:960px;
}
#header {
width:100%
height:204px;
background:url(img/farbverlauf_header.gif) repeat-x;
margin:0px auto;
text-align:center;
}
#farbverlauf_buttonleiste {
width:100%;
height:36px;
background:url(img/farbverlauf_buttonleiste.gif) repeat-x;
}
#menue {
width:960px;
margin:-5px auto;
text-align:center;
}
#menue a{
text-decoration:none;




}
.menue_button {
float:left;
width:160px;
height:36px;
background:url(img/hover.jpg) no-repeat;
background-position:0px 0px;
cursor:pointer;
}
.menue_button p {
font-size:20px;
font-family:Tunga;
color:white;
margin:0px;
}
.menue_button:hover {
background-position:0px -36px;
}
#website {
width:960px;
margin:0px auto;
text-align:center;
}
#main {
width:960px;
height:751px; 
background:url(img/farbverlauf_porträt.jpg) repeat-x;
clear:both;
margin:0px auto;
text-align:center;
}
#main_text {
width:270px;
float:left;
text-align:left;
}
#main_text p {
font-size:20px;
font-family:Arial;
color:#484545;
margin:0px;
margin-top:0px;
margin-left:25px;
}
#main_text h1 {
font-size:50px;
font-family:Calibri;
font-weight:regular;
color:#484545;
margin:0px;
margin-top:20px;
margin-left:25px;
}
#map {
width:550px;
height:350px;
margin-left:280px;
margin-top:0px;
text-align:right;
font-family:Calibri;
}
#Leiste_Ende {
width:960px;
height:24px;
background:url(img/webpage_31.gif);
margin:0px auto;
text-align:center;
}
#Impressum a{
text-decoration:none;




}
.impressum_button {
float:right;
width:90px;
height:24px;
background:url(img/hover_impressum.jpg) no-repeat;
background-position:0px 0px;
margin-right: 0px;
cursor:pointer;
}
.impressum_button:hover {
background-position:0px -24px;
}
 
Werbung:
Ohne die Bilder kann man sich das schwer vorstellen :( Kannst Du das irgendwo online stellen?
 
Schreibfehler im Quellcode:
HTML: 
<hmtl>

Und hier fehlt noch ein alt-Attribut:
HTML: 
<img src="img/header.gif" />

Das hat zwar nichts mit deinem Hintergrundproblemchen zu tun, solltest Du aber dennoch korrigieren.

Und dein Problem ist einfach erklärt:

Code: 
#map {
    font-family: Calibri;
    height: 350px;
    margin-left: 280px;
    margin-top: 30px;
    text-align: left;
    width: 550px;
}

Lass das margin weg, besonders margin-top.
 
Werbung:
threadi schrieb:
Schreibfehler im Quellcode:
HTML: 
<hmtl>

Und hier fehlt noch ein alt-Attribut:
HTML: 
<img src="img/header.gif" />


Und dein Problem ist einfach erklärt:

Code: 
#map {
    font-family: Calibri;
    height: 350px;
    margin-left: 280px;
    margin-top: 30px;
    text-align: left;
    width: 550px;
}

Lass das margin weg, besonders margin-top.
Zum Vergrößern anklicken....

Ich habe beide Varianten (von dir und von Geri345) probiert. Leider kein sichtbares Ergebniss.

Lass das margin weg, besonders margin-top.
Zum Vergrößern anklicken....
Wie soll ich dann den Abstand von oben definieren?
 
Zuletzt bearbeitet:
Werbung:
Ok, vielen Dank! Das hat mir sehr geholfen!
Ich hab aber mal kurz eine Frage off topic! Ich habe mal ein Befehl gehört damit man den hintergrund nach unten erweitern kann, denn in meinem Impressum reicht der Hintergrund nicht!
Hier zu sehen:
TecPro Technik
 
Dein HTML-Code dort ist schon wieder fehlerhaft, das kann auch ein Grund sein wieso etwas nicht so ganz richtig aussieht. In diesem Fall liegt es aber wiedermal an der absoluten Positionierung und deiner Angabe einer festen Höhe für #main. Dadurch kann der Hintergrund gar nicht weiter gehen. Da hilft kein "Befehl", du musst erstmal ordentlichen CSS-Code schreiben.
 
Werbung:
Wie schon mehrmals geschrieben: verzichte auf absolute Positionierung. Verzichte auch auf feste Höhenangaben für Contentbereiche die theoretisch beliebig lang sein könnten.
 
Sorry, ich bin gerade total verwirrt. Mit welchen Befehl habe ich im main bereich eingestellt, das ein feste Positionierung und höhe eingestellt ist.
 
In style_Impressum.css ab Zeile 50, steht für #main u.a.

Code: 
height:751px; 
position:absolute;
 
Werbung:
Meine aktueller Code sieht aber so aus:
Code: 
#main {width:960px;
height:751px; 
background:url(img/farbverlauf_porträt.jpg) repeat-x;
clear:both;
margin:0px auto;
text-align:center;
}

wie kann festlegen, dass es keine feste höhe ist?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben