|
HTML - Can You Position An Image Anywhere On A Page?
let me start a new page please, can I position an image anywhere I feel like on a page please? I use divs but is there a way to this with divs and without divs or with or without CSS?
Similar Tutorialsi have a problem with position of the page i extended the site to screen, but now i have a problem with left and right box here i have tha code http://www.speedyshare.com/881657120.html i want to look like windows, but now the left and right box not stay in the same width one is higher and other is lower please if someone can help me Ok, so i have an image that's 2 x 1 and the div I'm placing it in is 1 x 1. (easy math example) My website is showing the top half of the image, which is what i want it to do. I would like it to show the bottom half of the image when i put my mouse over it. How do i do this? (It's a blue button that changes yellow) So basically how do i change the image position in that div? Thanks Hi I have a clickable image on my site that I moved to the right and up using html, but the image always moves when I refresh the page or change browsers. My code looks like this: <a href="LINK" target="blank"> <img src="XXXXX.jpg" WIDTH=165 HEIGHT=477 style="position: absolute; top: 1190px; left: 998px;"/> How do you make it so that my image doesn't move when I refresh the page. I know it probably has something to do with "absolute" position but I'm not sure how to fix it. Any help is appreciated. Thanks Hi, My problem is i can a marquee scrolling up inside an image, but on different browsers load the text in different places. Is there a way i can code it so the text position is relevant to the image or will i have to maybe make it one image somehow? Thanks Tom The code below attempts to do the following... Create a div with 2 'lines' in it each consisting of a piece of text and and a clickable img. HTML Code: <div> <div id="A"> <a><img src="http://localhost/plus.gif" onclick="DoSomething()"></a> <span>text related to image</span> </div> <div id="B"> <a><img src="http://localhost/min.gif" onclick="DoSomething2()></a> <span>text related to image</span> </div> </div> My problem is that the images are too high in relation to their line of text. If I use margin-top on the img it lowers the entire div (divs 'A' and 'B' that is), down. How do I lower just the image (or alternatively bring the span text up)? the above HTML layout is not a necessity, I just need it to achieve the visual layout I'm going for, I don't care how. Thanks. ok here is my problem. when i insert an image and do the onmouseover to change the image it works when i dont change the position of the image. Here is the problem, when i change the position, the onmouseover does not work. here is the code without the position change <html> <head> </head> <body> <body bgcolor="white"> <img src="http://i25.tinypic.com/1j53eb.jpg" onmouseover="src='http://i28.tinypic.com/2qatid5.png'" onmouseout="src='http://i25.tinypic.com/1j53eb.jpg'"/> <div style=" top: 150; left: 260; position: absolute; z-index: 1; visibility: show;"> <img src="http://i29.tinypic.com/1057k1e.png"/> </div> <div style=" top: 520; left: 500; position: absolute; z-index: 1; visibility: show;"> <img src="http://i27.tinypic.com/zjjvqr.png"/> </div> </body> </html> here it is with the position change <html> <head> </head> <body> <body bgcolor="white"> <div style=" top: 200; left: 200; position: absolute; z-index: 1; visibility: show;"> <img src="http://i25.tinypic.com/1j53eb.jpg" onmouseover="src='http://i28.tinypic.com/2qatid5.png'" onmouseout="src='http://i25.tinypic.com/1j53eb.jpg'"/> </div> <div style=" top: 150; left: 260; position: absolute; z-index: 1; visibility: show;"> <img src="http://i29.tinypic.com/1057k1e.png"/> </div> <div style=" top: 520; left: 500; position: absolute; z-index: 1; visibility: show;"> <img src="http://i27.tinypic.com/zjjvqr.png"/> </div> </body> </html> when you mouse over, you have to be in the exact middle... can someone help me? I am new to web development and am using a combination of Dreamweaver CS3 and code. I feel pretty comfortable with the code now but am having some problems getting a grasp on how to position things the way I want. I decided to design my site to display well on an 800x600 monitor, so I made the container div 780px wide, and I have created divs inside of that. For the most part I set the box width to 100% for the divs and don't mess with positioning. I have one div that I want to put bulleted lists in, but I want the bullet items to be layed out so that there are 4 items high x 3 wide. In other words, I want to divide the width of the page (780) into 3 sections and each one would have 4 bullets - item 1 - item 5 - item 9 - item 2 - item 6 - item 10 - item 3 - item 7 - item 11 - item 4 - item 8 - item 12 Pretend that these are evenly spaced and centered on the page. I used 3 divs, making each 260px wide on the page, and then put an unordered list inside of each div. I found that I could not make the divs sit side by side unless I also set float left for the CSS style. However, when I did that, the upper border of the div below these which was a 760px wide div with a table in it jumped up above them. I fixed it by setting that div to float left also. OK so I got it to look right, but I don't understand what I'm doing here. Is there a better way to do this, or can someone clear up why this worked? Thanks, Jeff Howdy all, I have three scrolling divs that i want to be the height of the page, so i'm guessing position:absolute and height:100% will do that just fine. But i want these three scolling divs to be inside a position:fixed element so that they stay put when scrolling down the page. Is this possible? I dont think a pos:absolute will work nested inside a pos:fixed. How could i work around it? thanks! the title makes it sounds really confusing. Ok im making my first website, and i need help with a code, (as you can see on www.dalekblaster.co.uk) i have got a section at the top where the images change from one to another. The code is - HTML Code: // Set slideShowSpeed (milliseconds)
var slideShowSpeed = 5000;
// Duration of crossfade (seconds)
var crossFadeDuration = 5;
// Specify the image files
var Pic = new Array();
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'http://www.dalekblaster.co.uk/images/banner/dalekblasternexttime.jpg'
Pic[1] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster2.jpg'
Pic[2] = 'http://www.dalekblaster.co.uk/images/banner/dalekblastersjanexttime.jpg'
Pic[3] = 'http://www.dalekblaster.co.uk/images/banner/dalekblaster.jpg'
// do not edit anything below this line
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i] = new Image();
preLoad[i].src = Pic[i];
}
function runSlideShow() {
if (document.all) {
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();
}
document.images.SlideShow.src = preLoad[j].src;
if (document.all) {
document.images.SlideShow.filters.blendTrans.Play();
}
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShow()', slideShowSpeed);
Now i need help because, i want to link each picture on the slideshow to a differnet page or external site, but im not sure how. (but so they can go to different pages not the same one) can anyone help me? Hello, I want to load a page in a iframe, and when i do this, i want that page to be displayed not at the begining of that page, i want that page to be displayed at a "x" and "y" position specificated by me. How can i do that? Thank you. I recently created a wordpress blog but I would like the visitors to come to a landing page before they reach the blog. This is the type of landing page I am looking for: http://creativetime.org/index.php - An image - The title of our site. When you click on it, you enter the blog - Credits at the bottom of the image. I have basic html knowledge. I browsed html tutorials but don't seem to find a solution. Any ideas? Thank you. Hi, I have a problem which I can't seem to sort out at all. When I add an image to a website page which I am trying to create the page shifts about half a centimetre to the left. The page can't be getting wider, as the grey fading off sections on the left and the right are one image (which is around 800x1 pixel in size), so things such as the blue navigation bar would start to overlap the grey image if it was doing that. All the other (so far blank) pages on the website all stay in the same place. I just think it looks bad when you are browsing when the page shifts - especially if more pictures end up on further pages, and so every time you click onto a new page it shifts to a new area of the screen! Has anyone else had this problem before and know any way of resolving it? Kind Regards. Matt Hi guys, Ive got an html page, and need to run a banner like image right over the whole page. Is this possible? What kind of code would I need? looking forward to your reply. B Hi Team, I placed this html code into my web editor by first uploading and saving the image as a .png file. Here is the code I used: <a href="http://www.awin1.com/cread.php?awinmid=2208&awinaffid=107642&clickref=&p=http%3A%2F%2Fwww.1staudiovisual.co.uk%2Fcatalog% 2Fsamsung-ue46b7020ww-inch-p-7066.html"><img src="1stAudioVisual.png" alt="IstAudioVisual.png" title="Samsung UE46B7020WW" /></a> As you can see I put the img src in the same way that I saved it in my files..When I go to the page it comes up without the image and just says what's written in the alt section How do I get the image to show up? Thanks. Sunil. So my question is simple and easy. I already have knowledge of how to make a image link you to a web page. but I recently found the need to make a image link you to a webpage but not in a new window (what I mean is not open up a new browser window or tab when the image link is clicked.) how do I do this? hello, i am just learning html and creating my own website right now. i ran into a problem and would like some help. what i want to do is this. i created a page with pictures about 200x200 in size. now what i want to do is when you "click" onto the picture have it open up in a new window and a Larger size. But there is more. I would like to have the new window have my page Banner on top and my background Color around the image. I already know how to use a code that Will enlarge the image in a New window but that is all it is is just the image and plain white background. and not what i want to do. So what are my options for the easiest method to do what i am thinking of above. Any help is appreciated. Hi There Guys, I have a problem! Ive added a background to my site that I want to appear like so fixed center no-repeat. You can see the code below. But for some reason it doesnt line up with the top of my site. It is being pushed down a whole 108px??? You can see from the site how this looks... www.hogansfarm.ie/index.php. To be honest its my first time using fixed center no-repeat so im hoping someone else might have hand this issue and may know whats wrong. You can see the the image there should be no gap http://www.hogansfarm.ie/images/stripe_wide.jpg Thanks for your help! Kat body { background: #1f1e1e url(http://www.hogansfarm.ie/images/stripe_wide.jpg) fixed center no-repeat; color: #000000; font-family: arial, helvetica, sans-serif; font-size: 100.1%; padding: 0px; text-align: center; margin: 0px; padding: 0px; } I've done HTML for a while. A bit of CSS, not too much. This the first time I've made a design in photoshop and wanted to turn it into a website though. Can someone give me soem guidance on the best way to turn this into a website? Thanks. Hello, I'm experiencing a small but annoying problem. My html form works fine when the submit button is an "ugly grey button" (input type=button), but when I try changing the button to show a nice jpg (input type=image) the form still submits ok, but the page always jumps to the top. This is annoying, because people should be able to scroll down through the page, click the button, and continue scrolling down to the next button. Many thanks in advance for any helpful explanations or hints! Simon |
|||||||