✔ Buttons verschieben sich

Status
Nicht offen für weitere Antworten.
S

smokerholic

Grünschnabel
Hi,

bin voll der Anfänger in sachen HP Bau.
Habe das Background mit top in die Mitte gesetzt und die Buttons dann so:

<div style="position:absolute; top:226px; left:237px;">
<span style="font-weight: 400">
<a href="index.htm" style="text-decoration: none">
<img src="http://www.tutorials.de/forum/images/home.gif" width="115" height="37" border="0"></a> </span>
</div>

jetzt verschieben sich die Buttons wenn ik das Browserfenster verkleinere oder die Favoritenleiste links aktiviert habe.

Ich will das die Buttons dableiben wo ich sie hingesetzt habe, ist dat möglich ?
 
Zuletzt bearbeitet:
Hi,

wenn sich die "Buttons" verschieben, dann liegt es wohl daran, dass sie im Anzeigebereich fest positioniert sind und der Seitenhintergrund mittig zentriert ist, wodurch sich die Bezugspunkte zueinander verschieben, wenn das Browserfenster skaliert, oder Toolbars aktiviert werden, denn die "Buttons" behalten ihre deklarierten Positionsangaben zum oberen und linken Rand des übergeordneten Elements bei.

Das ist jetzt mal meine Vermutung, wenn ich mir den gezeigten Code-Schnipsel so anschaue.

Wie lautet denn der übrige Quellcode des Dokuments?
 
Danke für deine schnelle Antwort,

Deine Vermutung klingt logisch und meiner meinung nach auch richtig.
Nur weiss nicht wie man es so macht, dass sich die Buttons nicht verschieben.

Hier dat ist alles, bin noch nicht so weit :

<html>
<body leftmargin="0" rightmargin="0"
topmargin="0" marginwidth="0"
marginheight="0">


<style type="text/css">
body { background-image:url('background.jpg'); background-position:center top;
background-repeat:no-repeat; background-color:#444444; font-weight:bold; font-family:Arial; font-size:100% }

</style>
</head>
</body>
<meta http-equiv="Content-Language" content="de">

<div style="position:absolute top; top:226px; left:237px;">
<span style="font-weight: 400">
<a href="index.htm" style="text-decoration: none">
<img src="http://www.tutorials.de/forum/images/home.gif" width="115" height="37" border="0"></a> </span>
</div>

</html>
 
Also haben die Positionsangaben einen Bezug zum Hintergrundbild?

In welcher Dimension liegt denn die Grafik background.jpg vor?
 
So sollten sich die "Buttons" gegenüber dem Hintergrundbild nicht mehr verschieben ;)

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Language" content="de">
<title></title>

<style type="text/css">
  * {
  margin: 0;
  padding: 0;
  }

  html,body {
  height: 100%;
  }

  body { background-color:#444444; font-weight:bold; font-family:Arial; font-size:100% }

  #wrapper {
  position: absolute;
  width: 945px;
  left: 50%;
  margin-left: -472.5px;
  top: 0;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  background-image: url('background.jpg');
  background-position: top;
  background-repeat: no-repeat;
  }
</style>
</head>

<body>
  <div id="wrapper">
       <div style="position:absolute; top:226px; left:810px;">
            <span style="font-weight: 400">
                  <a href="filespace.htm" style="text-decoration: none"><img src="http://www.tutorials.de/forum/images/filespace.gif" width="115" height="37" border="0"></a>
            </span>
       </div>
       <div style="position:absolute; top:226px; left:695px;">
            <span style="font-weight: 400">
                  <a href="webspace.htm" style="text-decoration: none"><img src="http://www.tutorials.de/forum/images/webspace.gif" width="115" height="37" border="0"></a>
                  </span>
       </div>
       <div style="position:absolute; top:226px; left:580px;">
            <span style="font-weight: 400">
                  <a href="voiceserver.htm" style="text-decoration: none"><img src="http://www.tutorials.de/forum/images/voiceserver.gif" width="115" height="37" border="0"></a>
            </span>
       </div>
       <div style="position:absolute; top:226px; left:465px;">
            <span style="font-weight: 400">
                  <a href="rootserver.htm" style="text-decoration: none"><img src="http://www.tutorials.de/forum/images/rootserver.gif" width="115" height="37" border="0"></a>
            </span>
       </div>
       <div style="position:absolute; top:226px; left:350px;">
            <span style="font-weight: 400">
                  <a href="gameserver.htm" style="text-decoration: none"><img src="http://www.tutorials.de/forum/images/gameserver.gif" width="115" height="37" border="0"></a>
            </span>
       </div>
       <div style="position:absolute; top:226px; left:235px;">
            <span style="font-weight: 400">
                  <a href="index.htm" style="text-decoration: none"><img src="http://www.tutorials.de/forum/images/home.gif" width="115" height="37" border="0"></a>
            </span>
       </div>
  </div><!-- END #wrapper -->
</body>
</html>
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück