GamezWorld.de - Forum
Von Spielern für Spieler
Du bist nicht angemeldet.
Seiten: 1
Grml, zum Verzweifeln. Ich glaube Ich habe jetzt lange genug rumprobiert, mit position, backgroundimage und Co. im CSS eine Lösung zu finden.
Also ich habe 3 Bilder, left.gif right.gif und banner.png. Ich möchte alle 3 in einer Zeile anzeigen (Nämlich links und rechts will Ich die Animationen haben.), so muss ich Nicht immer eine große Datei ändern, wenn ich eine Sache davon austausche und die Seite ist auch schneller zu laden.
Aber wie stelle Ich das an? Was schreib Ich in den HTML Code, was in die CSS Datei?
Offline
du machst 3 divs... links und rechts machst du absolute, den mittelteil relative..
dann:
<div class=middle>
<div class=left></div>
[hier eventuell deinen banner, falls nicht schon in der "middle" als hg festgelegt]
<div class=right></div>
</div>
die mitte wird ein wenig groesser als dein banner gemacht, dann per padding-left um die "left"-bildbreite verschoben... da das bild ja dann aufhoert bevor bild rechts reinkommt (was mit right:0px; nach rechtsverschoben wurde), duerfte alles klappen.
Bin grad zu faul das ganze aus dem gw2006-code rauszusuchen, habs dort aber mehrfach benutzt (vorallem bei flexiblen breiten).
bye Ron
Offline
Ich komme nicht weiter =/.
Hier die CSS Datei:
#leftgif {
float: left;
height: 60px;
width: 60px;
left: 5px;
bottom: 0px;
position: absolute;
background: url(images/leftgif.gif);
background-repeat: no-repeat;
}
#rightgif {
float: right;
height: 60px;
width: 60px;
right: 5px;
bottom: 0px;
background: url(images/rightgif.gif);
background-repeat: no-repeat;
}
#banner {
text-align: center;
height: 60px;
width: 490px;
background: url('images/banner.png') 0px 0px;
background-repeat: no-repeat;
position: relative;
right: 0px;
left: 255px;
bottom: 0px;
}Und in meinem Preview, dass TopStyleLite liefert ist alles richtig angeordnet, speichere Ich die Datei jedoch und versuche sie dann zu öffnen, stimmt das ganze nicht mehr!
<html><head><title>Preview</title>
<style type="text/css"><!--
Hier das ganze CSS von oben nochmal
--></style>
</head>
<body>
<div id="leftgif"></div>
<div id="rightgif"></div>
<div id="banner"></div>
</body></html>Entweder wird leftgif nach unten verschoben, so das es soweit unten ist, wie die Bildschirmgröße reicht, oder rechtgif wird trotz vorhandener *.gif Datei nicht angezeigt.
Offline
lasse bei dem banner mal die right:-definition weg (also nur left, macht eh probs mit dem IE)... dann habe ich oben ja geschrieben, dass der "banner"-div die beiden anderen (left und right) einschliessen muss...
bye Ron
Offline
Habs mal so geändert, will aber immer noch nicht 
Offline
Offline
Also: ich hab da mal rumprobiert:
Lasse am Besten das postition: absolute weg. Dann funzt das ganze im IE [6] und Firefox [1.5].
Der Code sieht dann also so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>New Document</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style>
#leftgif {
float: left;
height: 60px;
width: 60px;
left: 5px;
bottom: 0px;
background: url(images/leftgif.gif);
background-repeat: no-repeat;
}
#rightgif {
float: right;
height: 60px;
width: 60px;
right: 5px;
bottom: 0px;
background: url(images/rightgif.gif);
background-repeat: no-repeat;
}
#banner {
text-align: center;
height: 60px;
width: 490px;
background: url(images/leftgif.gif) 0px 0px;
background-repeat: no-repeat;
position: relative;
right: 0px;
left: 255px;
bottom: 0px;
}
</style>
</head>
<body>
<div id="leftgif"> </div>
<div id="rightgif"> </div>
<div id="banner"> </div>
</body>
</html>So hat es bei mir lokal am Besten geklappt.
Offline
Hehe, danke Nico. Timothy hatte Recht, kennst dich doch echt aus 
. Hat jetzt klappt, vielen dank 
.
Offline
Offline
Seiten: 1