Zur Navigation

Bild im div-container bleibt starr

1 Geli

Hallo Jörg,
es ist mal wieder soweit > ein Frage:
Was muss ich hier bitte noch einfügen, damit mein Bild
(welches ich über dem Hintergrundbild platziert habe) sich auch mit
dem Hintergrundbild bewegt, wenn man die Größe des Browserfensters verzieht?
Mit meinem Code bleibt das Bild starr auf seiner Position stehen.
Ich möchte aber gerne, dass es seine Position auf dem Hintergrundbild behält, egal wie ich das Browserfenster groß oder klein ziehe.
Ich würde mich sehr freuen, wenn Du mir das Zauberwort verraten könntest!

<div style="position:absolute; top:0px; left:363px; z-index:1">
<img src="Bilder/header_home_test.gif" width="1000" height="362">
</div>

Habe es natürlich auch über das externe CSS versucht.
Aber auch da kriege ich es einfach nicht hin :-(


Lg
Geli

29.07.2012 02:44

2 Jörg Kruse

Wie hast du das Hintergrundbild denn eingebunden - d.h. für welches HTML-Element und mit welchen Werten für background-position, background-attachment etc.?

<div style="position:absolute; top:0px; left:363px; z-index:1">
<img src="Bilder/header_home_test.gif" width="1000" height="362">
</div>

Die Position richtet sich nach dem übergeordneten absoluten oder fixen Element aus. Für eine Einschätzung wäre es noch wichtig, die übergeordneten Elemente zu kennen inklusive deren CSS-Definitionen.

Das einfachste wäre es natürlich, das Bild mit einem Grafikbearbeitungsprogramm in das Hintergrundbild einzufügen :) was aber wohl nur praktikabel wäre, wenn das zusammengefügte Hintergrundbild auf allen Seiten verwendet wird.

29.07.2012 10:18

3 Geli

Hallo Jörg,
das Hintergrundbild ist per CSS im body eingebunden und soll auf allen Seiten gleich sein.
Die Headerbilder möchte ich aber auf jeder Seite wechseln.

Hier der bisherige HTML-Code, der im unteren Teil nicht ernst zu nehmen ist:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home</title>
<meta name="description" content="TW">
<meta name="keywords" content="TW">
<link href="tw_test.css" rel="stylesheet" type="text/css">
</head>

<body> 

<div style="position:absolute; top:0px; left:363px; z-index:1">
<img src="Bilder/header_home_test.gif" width="1000" height="362">
</div>

<table width="1024" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td width="1024" height="240" colspan="3"></td>
  <tr>
 <td width="160px" class="abstand_navi_links" valign="top">      
     <ul id="menu">       
      <li id="index"><a href="./index.htm">Home</a></li>
      <li id="tumbleweed"><a href="./tumbleweed.htm">Tumbleweed</a></li>
             <li id="team"><a href="./team.htm">Team</a></li>
        <li id="tanzschritte"><a href="./tanzschritte.htm">Tanzschritte</a></li>
       <li id="galerie"><a href=".galerie.htm">Galerie</a></li>
      <li id="videos"><a href=".videos.htm">Videos</a></li>     
      <li id="kalender"><a href=".kalender.htm">Kalender</a></li>
      <li id="berichte"><a href=".berichte.htm">Berichte</a></li>
          <li id="quasselbox"><a href=".quasselbox.htm">Quasselbox</a></li>
            <li id="gaestebuch"><a href=".gaestebuch.htm">Gästebuch</a></li>
                    <li id="links"><a href=".links.htm">Links</a></li>
                  <li id="impressum"><a href=".impressum.htm">Impressum</a></li>      
      </ul>
      
    
    <td colspan="2">
      <table cellspacing="1" cellpadding="1" align="right" width="800">
  <tr>
    <td rowspan="2" valign="top" class="startseitentext"><p><h1>&nbsp;</h1>
      <h1>&nbsp;</h1>
      <h1>&nbsp;</h1>
      <h1>&nbsp;</h1>
      <h1>&nbsp;</h1>
      <h1>&nbsp;</h1></td>
            <td><p>&nbsp;</p></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
     
    </td>
</tr>

</table>
</body>
</html>

Und die CSS (ohne Navigation - die kann ich inzwischen, dank Deiner Hilfe! )
body {
	font-family: "Times New Roman", Times, serif;
	font-size: 12px;
	background-image: url(Bilder/TW_HG.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	width: auto;
	margin: 0px;
	padding: 0px;
	
}


	.abstand_navi_links {
	padding-left: 10px;
	padding-top: 30px;
	
}

In meinem Kopf sollte das ganze später mal ungefähr so aussehen:
http://www.miratalu.kilu.de/entwurf-TW-3.jpg
Die Probleme entstanden durch den unteren, transparenten Teil des Logos.
Zuerst hatte ich versucht, nur dieses transparente Logo über die Bilder zu legen,
aber das hat es dann auch immer verschoben.....:-(

Wäre super, wenn Dir etwas dazu einfällt!

Lg
Geli

29.07.2012 13:03

4 Geli

Kaum zu glauben - aber ich habe "selbst" eine Lösung gefunden!!!
Headerbild oben in die Tabelle rein, da kann sich nichts verschieben
und die Navigation per CSS weiter nach oben gerückt!
Sitzt alles perfekt!

Lg
Geli

29.07.2012 18:20

Beitrag schreiben (als Gast)

Die Antwort wird nach der Überprüfung durch einen Moderator freigeschaltet.





[BBCode-Hilfe]