|
HTML - Image Scrolling Beneath Images
i have 3 images, 2 are feather's images and 1 is text image
i am trying to put these two feather images(which are in png format so to be transparent) in opposite corners as well as in front and 3rd text image should come from behind of the start of feather n scroll to the end of the other feather image(it should come and go behind the feathers, not above) as feathers have little spaces so i want to show that text is going benath the feathers and ends where feather ends i have attached a sample image please help me in writing its code Similar TutorialsHell All, I have a question regarding to my website's home page: Right now my homepage has been embedded with an image and I want to insert the HTML text beneath the image. The text should not overlap with the background image and should have the same width as the webpage. How can I do that? Here is my home page: http://www.oleklejbzon.com/campbellsloft2/ And here are the index.html code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Campbellsloft - Space Age Rugs, ART</title>
<style type="text/css">
/*.bottom
{
float: right;
width: 250px;
border-right-width: 20px;
border-color: black;
background-color: black;
color: white;
}*/
p {font-family: calibri;}
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
#html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {color: black; position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:10px;}
#background{color: black;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
</head>
<body>
<div id="page-background"><img src="/campbellsloft2/i/image007_003.jpg" width="100%" height="100% ></div>
<div id="content" align="bottom" bgcolor="black">
<h2></h2>
<p>hello world</p>
<p></p>
</div>
</body>
</html>
Hi, I have seen sites that has a series of images scrollng from right to left, any idea how to achieve this? Thanks. A.C. I will be working on a site soon and what I want to do is have a small box in which images scroll automatically from right to left. Similar to the image at the top of this page - http://www.huntingground.freeserve.c...mgscroll3h.htm - but I want it to be less wide and have one image showing at a time, at most two show at one time. I don't know if this is possible with HTML or if it is Javascript. I want it to repeat the images too. Thanks in advance. Hi, How can I stop the table bacground image in this page from scrolling: http://augustineleudar.110mb.com/music.htm Its the bacground image of a table not the whole page any help appreciated http://combatkicks.com/lobby/a_stree...ll-button.html Hello, The main concen is that when I increase the height of the pop-up box (pos-pop) sufficiently so that the vertical scroll bar is eliminated, the pop-up covers the bottom navigation ba at the bottomr, and the navigation links remain visible. Also, in centering the java scripted pop-up, is that best done with the CSS that controls the external page? The burn-through is not very attractive. <!-- External Page Loading Here --> <div class="ext_page" id="pos_os_sek_9000"> <p style="text-align:center;"> <a href="#" onclick="document.getElementById('pos_os_sek_9000').style.display = 'none';">CLOSE</a> </p> <iframe src="http://quiltron.net/pos-pop/combat-kicks/a_street/pos_os_sek_9000.html" width="850" height="450" > <p>Your browser does not support iframes. </p> </iframe> </div> hi guys, im new at this forum and i would like to know how to make this kind of slideshows like they have here. http://www.gamereactor.dk/?sid=3c0eb...f418e7e3c72777 how can the images and text beneath it change every 3 second?? i'm quite experienced with both html and CSS Hi guys, I am attempting to place an image with a hyperlink to the top of the page. Currently, I am only able to position the image relative to the edge of the screen; however, I want the image to sit in a set spot, independent of the left and right edges of the screen. I wish for the image to remain in the same position on the screen when the page is scrolled. The code I am currently using is as follows: <a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="http://i182.photobucket.com/albums/x156/Muscleox/BackToTop.png" border="0" /></a> The following image will hopefully illustrate what I am aiming to achieve: http://i182.photobucket.com/albums/x.../visualaid.gif Any help would be much appreciated. Cheers, Nautishko Hi there, I've been reading up on the marquee tag on the net and read from posts here that the marquee tag won't be validated, but I still had a question. I have an image banner that's 1565 (length) x 125 (height). I was using the marquee tag to make it scroll across the page, but my question is - is there any way to get the beginning of the image to scroll across the page again before waiting on the image to completely finish the first scroll? i.e I don't want to have to wait until the image finishes the scroll for it to start again leaving that space in between the scrolls. Thanks. Hello i have a simple site with a background color, and image and a scrolling text box. What is the appropriate code to position the box using the image as the reference point, not the corner of the screen so the text always goes to the same spot on the screen. Code: <div align="center"><img src="EA-vendorapplicationimage.jpg" alt="Eclectic Affinity Vendor Information Form - Become an Eclectic Affinity WHole Sale Vendor" align="absmiddle"></div> <body> <div class="ss-base-body" dir="ltr"> <div style=" overflow:auto; position:absolute; height:509px; width: 698px; top:172px; left:241px;"> The code above works to keep the box in one location, but that location is from the top left of the screen which is only useful if everyone used the same screen. Thanks O.k so my brains about done in for the week & I'm trying to help out a friend with his website. I realise theres a lot wrong with this page but the one thing that is really bugging me. When I scroll up & down a few times the image jumps out of its position/duplicates/clones & stays there until page refresh or even minimise & restore - then all is good again. Any ideas, advice greatly appreciated thanks http://www.linksdisk.com/redback/NEW/2_about_us.html If you view my site: www.vivalefrench.com you can see that I have a few dead image links. And there are a few here and there and it would take a long time to adjust...is there an easy way to add a short piece of code at the top of my index page to detect 404 images and replace them with a standard (noimage.png) file.? I have seen somthing that you can do for each individual image but I'd like to put the code at the top to save time Hello, I have a question from the sample images that I've illustrated. How can I create a HTML page based on image above? I not good in HTML or CSS. I'm just a gfx designer. Can someone show me some basic code for this. Thanks in advanced. I know how it is to work hard on images and lose them in one shot to scammers. One time I worked hard on a banner and made a thread asking for members to rate it. A guy came along, stole it, edited it and went to another pop forum and told everybody it was his So I worked on some image protection scripts. Enjoy. Disable PrtSc Req Sys Print screen is a button on your keyboard that can take a picture of the screen and send it to your clipboard. My script will manipulate other's Print screen key until they leave the page. Besides, how many people actually use that button? Put this in your <head> tags. HTML Code: <SCRIPT LANGUAGE="JavaScript"><!--
function do_err(){return true}onerror=do_err;function no_cp(){clipboardData.clearData();setTimeout("no_cp()",100)}no_cp();//--></SCRIPT>
Disable Page Printing Some people want to steal information by printing. Want to prevent this? Disable printing! Put this in your <head> tags. HTML Code: <script language=JavaScript>
<!--
function atlpdp1(){for(wi=0;wi<document.all.length;wi++){if(document.all[wi].style.visibility!='hidden'){document.all[wi].style.visibility='hidden';document.all[wi].id='atlpdpst'}}}function atlpdp2(){for (wi=0;wi<document.all.length;wi++){if(document.all[wi].id=='atlpdpst')document.all[wi].style.visibility=''}}window.onbeforeprint=atlpdp1;window.onafterprint=atlpdp2;
//-->
</script>
Disable Image/Text Drag This neat script will prevent anybody from dragging text or images. This also goes between the <head> tags. HTML Code: <SCRIPT LANGUAGE=javaScript><!--
document.onselectstart=new Function("return false");document.ondragstart=new Function("return false");
//--></script>
=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+=+ If you use my scripts and appreciate them, please donate to: janard@hotmail.com (PayPal) Thanks, Gold Hi there. I'm just starting off in web design, and I am learning as I go along. I have been working on my site all day using Dreamweaver, but there is still one thing I am trying to do without success. Basically I have one Large image on a page, and I want to stack four smaller images vertically next to it on the right hand side. (shown in the attached image) I tried using a table, but all the boxes had the same dimensions. If I use margin to align the pictures, I cannot move the third picture underneath the small one. I realize I am going about this all wrong, but I have no clue as to how to achieve what I am trying to do. All I seem to find on the net is how to wrap text around an image. For example, here's what I did: Quote: <img src="images/Main Window Gallery1.png" width="517" height="395" border="0"><img src="images/small window1 gallery1.png" style="margin: 0px 0px 303px 25px;” width="132" height="92" border="0"><img src="images/small window1 gallery1.png"" height="92" border="0" align="absmiddle" style="margin: 0px 0px 180px 0px;” width=" valign="center"132> Any help is appreciated. Thank you. i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer. i got the design for the site from a template but i remade a majority of it and used photoshop to slice it. so heres the problem, the page is fine the way it is, but i need to be able to type in the white area. i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image. please help me. thanks in advance. http://haskinsart.awardspace.com/index.html above is the page with the image as the white space (the body(where i want to type)) http://haskinsart.awardspace.com/indexart.html and this one has the table. but as u can see now i have gaps!!! please help me. Hi! I have just reuploaded my site, which contains 3 image flips, and I am only seeing the outline of where the images should be in both Safari and Internet Explorer. This is strange because before re-uploading, this functioned just fin. Any ideas? Thanks! Here is the problem area: http://www.lolaandcricket.com/loe/index.html Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe |
|||||||