Bild soll mitscrollen
- Ersteller adriaos
- Erstellt am
Es ist ein Hintergrundbild mit z-index???
Falls es ein Bild per <img> ist, -> position: fixed; in CSS.
Gruß
Falls es ein Bild per <img> ist, -> position: fixed; in CSS.
Gruß
S
struppi
Guest
Wieso eigentlich mitscrollen? mitscrollen tun doch alle Elemente sowieso, du meinst das eben nicht mitrscrollen soll, es fixiert wird.
Das kann denke ich leicht missverstanden werden. Wird denn bei einem Browser der Viewprot gescrollt oder der Inhalt? :)
unverständlichkeit
also ich poste heir jetzt einfach mal das dokument
und ich geb euch einfach mal den link dorthin wo ich es hochgeladen hab
sie ist eigendlich nicht fertig aber hab es trotzdem wegen dem thema hochgeladen
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
#background{position:fixed; z-index:1; width:100%; height:100%;left
px;top:0px;overflow:hidden;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0;overflow:auto; z-index:1;}
#content {width:100%; height:100%; position:absolute;color:green;top:30%;
font-size: large;
text-align: center;
color: #2FFF17;
}
=-->
</style>
<title></title>
<meta name="author" content="Julio">
<meta name="editor" content="html-editor phase 5">
</head>
<body>
<img id="background" src="Suchtlappen HP.jpg" alt="" title="" scroll="auto" />
<div id="scroller">
<div id="content">
<img src="Suchtlappen Alpha.png" alt="" border="0" width="295" height="295"><br>
Alpha Squad<br>
<br>
<br>
<img src="Suchtlappen Beta.jpg" alt="" border="0" width="300" height="302"><br>
Beta Squad<br>
<br>
<br>
<br>
Scout<br>
</div>
</div>
</div>
</body>
</html>
Link:
suchtlappen-warrock.tk
(ihr müsst auf squads klicken)
so und ich füg noch ein bild hinzu das habe ich geamcht
So wie ihr seht habe ich das problem so halb gelöst, doch das problem ist dass man nur scrollen kann wen man die maus über die bilder legt und dass 2 Scrollbars an der rechten seite sind.Hofe damit wurde das verständlicher!
also ich poste heir jetzt einfach mal das dokument
und ich geb euch einfach mal den link dorthin wo ich es hochgeladen hab
sie ist eigendlich nicht fertig aber hab es trotzdem wegen dem thema hochgeladen
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--
#background{position:fixed; z-index:1; width:100%; height:100%;left
px;top:0px;overflow:hidden;}#scroller {position:absolute; width:100%; height:100%; top:0; left:0;overflow:auto; z-index:1;}
#content {width:100%; height:100%; position:absolute;color:green;top:30%;
font-size: large;
text-align: center;
color: #2FFF17;
}
=-->
</style>
<title></title>
<meta name="author" content="Julio">
<meta name="editor" content="html-editor phase 5">
</head>
<body>
<img id="background" src="Suchtlappen HP.jpg" alt="" title="" scroll="auto" />
<div id="scroller">
<div id="content">
<img src="Suchtlappen Alpha.png" alt="" border="0" width="295" height="295"><br>
Alpha Squad<br>
<br>
<br>
<img src="Suchtlappen Beta.jpg" alt="" border="0" width="300" height="302"><br>
Beta Squad<br>
<br>
<br>
<br>
Scout<br>
</div>
</div>
</div>
</body>
</html>
Link:
suchtlappen-warrock.tk
(ihr müsst auf squads klicken)
so und ich füg noch ein bild hinzu das habe ich geamcht
So wie ihr seht habe ich das problem so halb gelöst, doch das problem ist dass man nur scrollen kann wen man die maus über die bilder legt und dass 2 Scrollbars an der rechten seite sind.Hofe damit wurde das verständlicher!
S
struppi
Guest
http://wrsuchtlappen.wr.funpic.de/squads.html
Schau mal in die Fehlerkonsole (nachdem du sie geleert hast, html.de weigert sich ihre Fehler wegzumachen)
Schau mal in die Fehlerkonsole (nachdem du sie geleert hast, html.de weigert sich ihre Fehler wegzumachen)
wiso machst du das nich im css? und zwar so
* {margin:0px; padding:0px;}
body {background-image:"Suchtlappen HP.jpg";}
und dann würde ich den Suchtlappen schriftzug als Bild in einen header packen, damit du dem restlichen Hintergrund ein repeat: y; verpassen kannst. desweiteren würde ich die Bilder links und rechts des Schriftzuges mit z.B. padding: 10px 20px; ebenfalls im Header definieren.
Mfg devilseye
* {margin:0px; padding:0px;}
body {background-image:"Suchtlappen HP.jpg";}
und dann würde ich den Suchtlappen schriftzug als Bild in einen header packen, damit du dem restlichen Hintergrund ein repeat: y; verpassen kannst. desweiteren würde ich die Bilder links und rechts des Schriftzuges mit z.B. padding: 10px 20px; ebenfalls im Header definieren.
Mfg devilseye
