• Herzlich Willkommen!

    Nach der Schließung von inDiablo.de wurden die Inhalte und eure Accounts in dieses Forum konvertiert. Ihr könnt euch hier mit eurem alten Account weiterhin einloggen, müsst euch dafür allerdings über die "Passwort vergessen" Funktion ein neues Passwort setzen lassen.

    Solltet ihr keinen Zugriff mehr auf die mit eurem Account verknüpfte Emailadresse haben, so könnt ihr euch unter Angabe eures Accountnamens, eurer alten Emailadresse sowie eurer gewünschten neuen Emailadresse an einen Administrator wenden.

HTML / CSS: Grafik verschiebung unterdrücken

Pikachu

Diablo-Veteran
Registriert
28 Februar 2006
Beiträge
1.092
Hai Leute,
ich komme irgendwie nicht weiter und hoffe ihr könnt mir helfen, weil ich bei Selfhtml und Google einfach nichts dazu gefunden habe.


Also ich habe eine folgendes Layout:
In der Mitte ein Balken (als Background), rechts und links am Ende des Balkens, jeweils ein eine Grafik die als Link ist.
Die habe ich mit div positioniert.

So nun zu der Sache die mich stört. Wenn ich das Browserfenster kleiner ziehe, verschieben sich die Grafiken mit.
Wie kann ich das ändern?
 
Könntest du, wenns ne Webseite ist, mal nen Link dazu geben, oder wenns keine webseite ist, mal nen Screenshot von dem ganzen konstrukt zeigen?
Der dazugehörige code wäre auch nicht unbedingt verkehrt :p
 
Ich versteh das grad nich :o

So gehört das doch, das die sich mitverschieben, wer will schon statische HTML-Seiten? x:
 
Ich glaub er meint, dass sie dann nichtmehr an dem Balken liegen, sondern sich über oder von ihm weg schieben.
So genau kann ichs mir auch nicht vorstellen ohne es zu sehen.
Wahrscheinlich statischer Hintergrund und dynamische Bilder oder so.
 
HorstSchlemmer schrieb:
Ich glaub er meint, dass sie dann nichtmehr an dem Balken liegen, sondern sich über oder von ihm weg schieben.
So genau kann ichs mir auch nicht vorstellen ohne es zu sehen.
Wahrscheinlich statischer Hintergrund und dynamische Bilder oder so.
Zum Vergrößern anklicken....

Genau! Das Layout verändert sich total, wenn ich die Fenstergröße verändere.


(Achtung hab einen etwas größeren Bildschirm :) )

Unverändert

Verändert.




Und das ist der Quelltext bis jetzt:

<html>
<head>
<title></title>


<style type="text/css">
a:link { font-weight:bold; color:#FFFFFF; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:#000000; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

Body
{
color:white;
background-image:url(tb.gif);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top; center;
background-color:black;
}
</style>


</head>
<body>


<div style="position:absolute; top:11%; left:30%;">
<a href="fenster.htm">
<img name="btn1"
onMouseOver="btn1.src='wm.gif'"
onMouseOut="btn1.src='w.gif'"
src="w.gif" border="0" alt="">
</a>
</div>


<div style="position:absolute; top:12%; left:61%;">
<a href="fenster.htm">
<img name="btn2"
onMouseOver="btn2.src='mm.gif'"
onMouseOut="btn2.src='m.gif'"
src="m.gif" border="0" alt="">
</a>
</div>


</body>
</html>
 
Definiere die Position der Div Bereiche mit absoluten Angaben, also pxl statt %.
Das sollte ausreichen.
 
Könntest dir theoretisch auch nen Container um dein ganzen Layout machen mit einer fixen Breite. Dann verschiebt sich auch nichts beim kleiner zeihen des Browsers.
Also
<div id="container">
deine seite
</div>

Und dann die Breite meinetwegen auf 1024px setzen oder so :>
 
px sollte auch nicht ausreichen, der Hintergrund ist statisch, dann würden die Bilder einfach außerhalb vom Balken liegen.

Du könntest den balken da statt mit einer statischen Grafik auch über css erzeugen.
Mitlerweile sollte ja auch der IE css3 können... Aber IE is eh komisch was standards angeht.

Guck doch mal hier rein:
http://www.css4you.de/trickkiste/tr00012.html
 
ILoboI schrieb:
Definiere die Position der Div Bereiche mit absoluten Angaben, also pxl statt %.
Das sollte ausreichen.
Zum Vergrößern anklicken....
Naja, wenn ich es in Pixel angebe wird die Position doch je nach Bildschirmgröße / Auflösung woanders sein. Mit % sollte es doch bei jedem Bildschirm gleich aussehen oder?





anox` schrieb:
Könntest dir theoretisch auch nen Container um dein ganzen Layout machen mit einer fixen Breite. Dann verschiebt sich auch nichts beim kleiner zeihen des Browsers.
Also
<div id="container">
deine seite
</div>

Und dann die Breite meinetwegen auf 1024px setzen oder so :>
Zum Vergrößern anklicken....
Wie genau stell ich die weite dann ein?




HorstSchlemmer schrieb:
px sollte auch nicht ausreichen, der Hintergrund ist statisch, dann würden die Bilder einfach außerhalb vom Balken liegen.

Du könntest den balken da statt mit einer statischen Grafik auch über css erzeugen.
Mitlerweile sollte ja auch der IE css3 können... Aber IE is eh komisch was standards angeht.

Guck doch mal hier rein:
http://www.css4you.de/trickkiste/tr00012.html
Zum Vergrößern anklicken....
Naja ich habe mein wirkliches Hintergrundbild vorerst durch einen Balken ersetzt, d.H. der Balken der da eigentlich ist stellt mehr als eine Farbe dar. ;)


Danke soweit.
 
Na ganz einfach.

Wenn du dir den conatiner baust. Dann machstte
<div id="container">
deine rest
</div>

und dann
#container {
widht: 1024px;
}

Dann verschiebt sich das auch nich mehr :)
 
Also das mit container geht irgendwie nicht.

Habe mal den Balken in einen IFrame gepackt. Damit geht es dann, das ist aber eher suboptimal.

Kennt nicht jemand noch eine Möglichkeit?
 
Iframe sind pöse


<html>
<head>
<title></title>


<style type="text/css">
a:link { font-weight:bold; color:#FFFFFF; text-decoration:none; }
a:visited { font-weight:bold; color:silver; text-decoration:none; }
a:focus { font-weight:bold; color:red; text-decoration:underline; }
a:hover { font-weight:bold; color:#000000; text-decoration:none; }
a:active { font-weight:bold; color:lime; text-decoration:underline; }

Body
{
color:white;
background-image:url(tb.gif);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:top; center;
background-color:black;
}

#container
{
width: 1024px;
}
</style>


</head>
<body>

<div id="container">
<div style="position:absolute; top:11%; left:30%;">
<a href="fenster.htm">
<img name="btn1"
onMouseOver="btn1.src='wm.gif'"
onMouseOut="btn1.src='w.gif'"
src="w.gif" border="0" alt="">
</a>
</div>


<div style="position:absolute; top:12%; left:61%;">
<a href="fenster.htm">
<img name="btn2"
onMouseOver="btn2.src='mm.gif'"
onMouseOut="btn2.src='m.gif'"
src="m.gif" border="0" alt="">
</a>
</div>
</div>

</body>
</html>

probier mal das
 
Ja so hatte ich es auch, aber die Grafiken verschieben sich leider noch.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben