|
HTML - Complicated Question About Absolute Positioning Images
I want to use my images as links, but I also want them absolutely positioned relative to their parent div. However I have come across a problem, to make them links I need to wrap <a>s around them which then means their positioning becomes relative to the anchor tag.
Can anyone suggest anything to counteract this problem? I do need them absolutely positioned. The only alternative is an image map, but I'm reluctant to do that because of the slow load time for the whole image, plus all the extra co-ordinate coding I'd have to do. Similar Tutorialsright i have a site which is like a blog the parent page has two iframes on it: one called date and one called blog now the iframe date has different dates in the iframe blog has well the blog with anchors on the dates now i need so that wen you click on a date in iframe date it moves to that anchor in iframe blog which are two completely different pages any help appreciated INDEX (base) <html> <head> <title>site sliced</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <!-- ImageReady Preload Script (site sliced.psd) --> <script type="text/javascript"> <!-- function newImage(arg) { if (document.images) { rslt = new Image(); rslt.src = arg; return rslt; } } function changeImages() { if (document.images && (preloadFlag == true)) { for (var i=0; i<changeImages.arguments.length; i+=2) { document[changeImages.arguments[i]].src = changeImages.arguments[i+1]; } } } var preloadFlag = false; function preloadImages() { if (document.images) { workinp_03_over = newImage("images/workinp_03-over.gif"); workinp_04_over = newImage("images/workinp_04-over.gif"); workinp_05_over = newImage("images/workinp_05-over.gif"); workinp_06_over = newImage("images/workinp_06-over.gif"); preloadFlag = true; } } // --> </script> <!-- End Preload Script --> <style type="text/css"> <!-- .style1 {color: #000000} --> </style> </head> <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" background="images/background.gif" onLoad="preloadImages();"> <!-- ImageReady Slices (site sliced.psd) --> <table id="Table_01" width="800" height="601" border="0" cellpadding="0" cellspacing="0" align="center"> <tr> <td colspan="14"> <img src="images/workinp_01.gif" width="800" height="21" alt=""></td> </tr> <tr> <td colspan="4"> <img src="images/workinp_02.gif" width="93" height="79" alt=""></td> <td colspan="2"> <a href="link1.html" onmouseover="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;" onmouseout="changeImages('workinp_03', 'images/workinp_03.gif'); return true;" onmousedown="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;" onmouseup="changeImages('workinp_03', 'images/workinp_03-over.gif'); return true;"> <img name="workinp_03" src="images/workinp_03.gif" width="132" height="79" border="0" alt="link1"></a></td> <td> <a href="link2.html" onmouseover="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;" onmouseout="changeImages('workinp_04', 'images/workinp_04.gif'); return true;" onmousedown="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;" onmouseup="changeImages('workinp_04', 'images/workinp_04-over.gif'); return true;"> <img name="workinp_04" src="images/workinp_04.gif" width="138" height="79" border="0" alt="link2"></a></td> <td colspan="2"> <a href="link3.html" onmouseover="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;" onmouseout="changeImages('workinp_05', 'images/workinp_05.gif'); return true;" onmousedown="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;" onmouseup="changeImages('workinp_05', 'images/workinp_05-over.gif'); return true;"> <img name="workinp_05" src="images/workinp_05.gif" width="162" height="79" border="0" alt="link3"></a></td> <td colspan="2"> <a href="link4.html" onmouseover="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;" onmouseout="changeImages('workinp_06', 'images/workinp_06.gif'); return true;" onmousedown="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;" onmouseup="changeImages('workinp_06', 'images/workinp_06-over.gif'); return true;"> <img name="workinp_06" src="images/workinp_06.gif" width="161" height="79" border="0" alt="link4"></a></td> <td colspan="3"> <img src="images/workinp_07.gif" width="114" height="79" alt=""></td> </tr> <tr> <td> <img src="images/workinp_08.gif" width="39" height="38" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/workinp_09.gif" width="45" height="340" alt=""></td> <td colspan="9"> <img src="images/workinp_10.gif" width="624" height="38" alt=""></td> <td rowspan="2"> <img src="images/workinp_11.gif" width="50" height="340" alt=""></td> <td> <img src="images/workinp_12.gif" width="42" height="38" alt=""></td> </tr> <tr> <td> <img src="images/workinp_13.gif" width="39" height="302" alt=""></td> <td colspan="5" BACKGROUND="images/workinp_14.gif" width="329" height="302"> <iframe name="IF" id="IF" src="dates.html" height="100%" width="100%" frameborder="0">your browser doesnt support iframes please update it</iframe></td> <td colspan="4" BACKGROUND="images/workinp_15.gif" width="295" height="302" valign="top" style="padding-left: 25px"> <font color="white">HI HOW ARE YOU<P> this box doesnt extend and i cant make it so dont put too much here as it looks really screwy,<P> <B>but look at the background its acctually really smoothly animated and fades so it doesnt annoy you</B></font></td> <td> <img src="images/workinp_16.gif" width="42" height="302" alt=""></td> </tr> <tr> <td colspan="14" BACKGROUND="images/workinp_17.gif" width="800" style="padding-left: 100px; padding-right: 100px"><BR> <iframe src="blog.html" name="IF2" width="100%" height="100%" frameborder="0" class="style1" id="IF2">your browser doesnt support iframes please update it</iframe></td> </tr> <tr> <td colspan="14"> <img src="images/workinp_18.gif" width="800" height="107" alt=""></td> </tr> <tr> <td colspan="14"> <img src="images/workinp_19.gif" width="800" height="22" alt=""></td> </tr> <tr> <td colspan="14" BACKGROUND="images/mid_b.gif" width="800" style="padding-left: 105px; padding-right: 105px"><font color="white">and sodoesn this one <P> its great</font></td> </tr> <tr> <td colspan="2"> <img src="images/workinp_20.gif" width="75" height="17" alt=""></td> <td colspan="3"> <img src="images/workinp_21.gif" width="46" height="17" alt=""></td> <td colspan="5" rowspan="2"> <img src="images/workinp_22.gif" width="514" height="18" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/workinp_23.gif" width="73" height="18" alt=""></td> <td colspan="2" rowspan="2"> <img src="images/workinp_24.gif" width="92" height="18" alt=""></td> </tr> <tr> <td colspan="5"> <img src="images/workinp_25.gif" width="121" height="1" alt=""></td> </tr> <tr> <td> <img src="images/spacer.gif" width="39" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="36" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="9" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="9" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="28" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="104" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="138" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="50" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="112" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="110" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="51" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="22" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="50" height="1" alt=""></td> <td> <img src="images/spacer.gif" width="42" height="1" alt=""></td> </tr> </table> <!-- End ImageReady Slices --> <br> </body> </html> DATES: <html> <head> <title>doesnt matter</title> </head> <body bgcolor="black"> click a date to go to that date <a href"blog.html#10807 target="IF2">August 10th 2007</a></center> </font></body> </html> BLOG: <html> <head> <title>doesnt matter</title> <link href="blog.css" rel="stylesheet" type="text/css"> </head> <body bgcolor="black"> <table width="100%" border="3" align="center" cellpadding="5" cellspacing="5" bordercolor="#999999"> <tr> <td class="date" width="30%"><a name="10807">10th august 2007</a></td> <td class="main" width="100%">Hi my name is Matthew Hailwood and i decided to start a blog to keep track of my life, i dont know how often i will update this however I will try my best </td> </tr> <tr class="main"> <td class="date">10th august 2007 </td> <td>this is the second post </td> </tr> <tr class="main"> <td class="date">10th august 2007 </td> <td>this is the third post </td> </tr> </table> </body> </html> Dear Forum Readers, I do not know how this whole forum thing works, and I probably will not be using it much. But I have a very important question to ask you all. If anyone knows, please help me. I searched high and low for a code to place a picture anywhere (out side of the tables) and I finally decided to just use one of the codes that MySpace help pages uses to post banners on your page when you have used their site for codes; and it worked beautifully, the only thing is it will only work on the left side. Here is a link to my page so you can see what I am talking about. MySpace.com/chippycheekschik. The roses on the left, I also want on the right. Will someone kindly help me...I would really appreciate it...:-) My E-Mail is Steph_A_Rios@yahoo.com or AIM SN is ChippyCheeksChik. You may also leave me a message on my MySpace, comment or personal, either will do. PLEASE contact me if anyone has a solution. Thank you so much. Sincerely, Steph R. First off, hello, this is my first post. Here is the code im using, which works great until i minimize the page. Seems like the shoutbox doesnt minimize with the rest of the page and it actually stays at position,I know i know thats why its called absolute. But how can i get my html code boxes to minimize and configure properly with the rest of the page? Thx for any help Code: <!-- Begin ShoutMix - http://www.shoutmix.com --> <iframe title="devilleather" src="http://www5.shoutmix.com/?devilleather" width="960" height="400" style="position:absolute; top:285px; left:350px"> frameborder="0" scrolling="auto"> <a href="http://www5.shoutmix.com/?devilleather">View shoutbox</a> </iframe> <!-- End ShoutMix --> I have made the usual searches but none of the information I found about Chrome positioning bugs seems to apply to this problem. I am using an absolutely defined div within a relatively defined div to position a marker box over sequential navigation bar graphics. The divs are defined in the CSS file, and then a single style line defines the box top margin in each page file. This works perfectly in FF and IE, but under Chrome the box position slowly creeps downward, by about 2 percent of the top distance, until the lowest instance is well off center. Can I fix this without going to browser-specific code? The page is temporarily he http://www.nitropress.com/CLIENT_TES...Pono/index.php And the relevant code is: Code: #navbar {
float: left;
width: 200px;
max-width: 200px;
position: relative;
padding: 9px 0 0 0;
}
#navbar img {
margin: 0 0 20px 0;
padding: 0;
}
#navbar .markbox {
position: absolute;
min-width: 200px;
max-width: 200px;
height: 30px;
border-top: 2px solid #c99;
border-bottom: 2px solid #c99;
z-index: -5;
}
...with lines like this in each page file to position the marker box vertically: Code: <style>.markbox {top: 3px;}</style>
Good afternoon, I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code: <div style="position:absolute; left:2px; top:2px; width:797px; height:151px;"> Can you please help solve my hair pulling issues with the absolute postioning. Good afternoon, I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code: <div style="position:absolute; left:2px; top:2px; width:797px; height:151px;"> Can you please help solve my hair pulling issues with the absolute postioning. Good afternoon, I am trying to design my own template for Constant Contact, so I can get away from paying a design fee andstill have a good looking template. Anyways, when I view the template I made using Serif PagePlus it looks good, however when I email it to myself from constant Contact all the images are viewed in one row, one by one. I believe the problem is with the code: <div style="position:absolute; left:2px; top:2px; width:797px; height:151px;"> Can you please help solve my hair pulling issues with the absolute postioning. Hi, Ive spent hours upon hours painfully sculpting this website and i can't for the love of gaaawd get the positioning of my element standard throughout the website. The home page and the watercolour-classes page have the bottom graphics bar in the same position But different from all the other pages. All i want it to do is be the same throughout and its only out by about 10px. why oh why Ive been struggling for days and weeks with this problem and cant work it out. Im sure its something simple but as a self taught web designer i dont know it all.... far from it. Any ideas or suggestions Please. The website is http://www.miriartist.co.uk Any help or light on the matter would be great THANKS Cheeeers Ben I'm new here so forgive me if I've posted in the wrong place. I'm working with HTML. My goal is to use an image as a link but I also need to use absolute positioning for the image as well. Is there a code that combines absolute positioning of an image where the image is also a link? I've attempted to combine : <IMG STYLE="position:absolute; TOP:35px; LEFT:170px; WIDTH:50px; HEIGHT:50px" SRC="---THE URL OF MY HOSTED IMAGE---"> with: <p align="center"><a href="---the URL of the link---" class="fw_link_page"></p> But I simply don't know how to do this. Any assistance would be greatly appreciated. The problematic page has this url: http://geosci.uchicago.edu/~moyer/Mo...GroupPage.html It shows up in firefox the way I want it to. The pictures enlarge right on top of their thumbnail accompaniments. The enlarged images are absolutely positioned. However, in chrome, internet explorer and safari, they enlarge several hundred pixels left of where I want them to. Is there a way I can have the enlarged images positioned relative to the thumbnails? Or can I add a margin to the code that only firefox will recognize? I can send you the code if you need it to figure out the problem. It is just long and confusing, because I was modifying somebody else's code and I am a newbie. I've been building web pages for lots of years but never came across this problem until recently and can't figure it out. I usually use the absolute url link to an image on a web page but recently I'd upload a page and no image would appear. Upon viewing the source of the uploaded page I'd see that where I'd written: <img src="http://www.domain.com/pics/image.jpg"> but what appeared on the uploaded page was: <!-- --> IF I re-write it and write a relative url intead such as: <img src="/pics/image.jpg"> then the same image will appear. I checked with my host if there were any changes in the server, no. I checked this in IE and in FireFox, same. I upgraded both browsers, same. Any ideas? Here's a sample page where there is actually an image link on the page but when I view it the image disappears: http://www.southernutahland.com/landtosell.html Thanks! his may be a dumb question but how do you get a table to align to the absolute top of a webpage? Thx Snaps01 I'm positioning an image within a divison that also has a paragraph of text. I've got the image floating right. It has these settings: display: inline; clear:both; float: right; I've added padding on the right side to move the image to the left or to control it's right margin so that it's not tight to the right edge of the page. When I apply a border to the image it also goes around the padding which is goes out away from the image. What is recommend as another way to control the right margin or to move image left without the padding? Think I might have it, making positioning relative and then changing right position. First off, hello everyone, I would like to start by telling everyone thank you for letting me a part of this forum. Now, as to my topic. I am looking for a script that generates a random image of four that I have selected and postions it in the lower left hand corner of the screen every time the screen is refreshed. The only thing is, I need this to be compatible with myspace's possibilites. I would tremendously help it if anyone could give me a helping hand on this issue. I have searched google several times for some help, but all the solutions involve either java script or a certain amount of knowledge of html, neither which I have. Thank you for your time, and here are the urls of the images, I would like shown. http://i23.photobucket.com/albums/b3...cience/All.jpg http://i23.photobucket.com/albums/b3...nce/Turkey.jpg http://i23.photobucket.com/albums/b3...ence/Panzy.jpg http://i23.photobucket.com/albums/b3...ce/Curious.jpg Again, thank you a lot. Hi all, Graphic designer here hell bent on learning web design with a question probably asinine for all those viewing but vexing to me for the last week. I have a site beautifully designed (can be seen here as a static jpeg) and seemingly straight forward and basic but making it functional on the web as I designed is proving to be quite the arduous task. I have many questions concerning this project but I'll keep this thread focused on the code for positioning images on the navbar. I have the buttons (67px by 14px) and sidebar (36px by 594px) all measured out and have tried a few different semantics to accomplish this but all for not. The images always end up stacking in the top left corner. HTML Code: <body>
<div id="butttons">
</div>
<div id="nav">
<img src="images/layout/images/Side_nav.png"/>
</div>
<div id="butttons">
<div id="nav_Home">
<img src="images/layout/images/Home.png"/>
<div id="nav_Portfolio">
<img src="images/layout/images/Portfolio.png"/>
<div id="nav_Contact">
<img src="images/layout/images/Contact.png"/>
</div>
</body>
And then this is the Refferenced style sheet HTML Code: #nav {
position: absolute;
top: 0px;
left: 0px;
}
div.nav_side {
background-image: url(images\layout\Side_nav.gif);
background-repeat: no-repeat;
background-position: top center;
width: 36px;
height: 594px;
}
#buttons {
position: absolute;
background-repeat: no-repeat;
background-position: top center;
top: 500px;
left: 36px;
}
.nav_home {
background-image: url(images\layout\Home.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 552; left: 35;
width: 67px;
height: 14px;
}
.nav_Portfolio {
background-image: url(images\layout\Portfolio.gif);
background-repeat: no-repeat;
background-position: top center;
position: absolute; top: 566; left: 35
width: 67px;
height: 14px;
}
.nav_Contact {
background-image: url(images\layout\contact.gif);
background-repeat: no-repeat;
background-position: top center;
style="position: absolute; top: 580; left: 35;"/>
width: 67px;
height: 14px;
}
I literally just started learning Html /CSS / Java a month ago; spare no details! ANY help with ANY (text formatting, background gradient that adjusts relative to a screen size, rollovers on the nav etc...) part of putting this site together will be more appreciated then most can fathom. I'd be willing to exchange some graphic work if any of you stuck this out to the end with me. Hello All- I'm trying to create a website and I am using Dreamweaver. While I'm fairly versed with Dreamweaver's nuances, there's one thing that I've never been able to do. I've created a white rectangle box in photoshop that I want to use as the main part of my site where all the text and pictures go. I want the rectangle positioned vertically and to go "off-screen." I have a blue background behind it. My problem is, the rectangle doesn't go to the furthest point of the top and bottom of the browser. Here is an example of what I want done: http://www.logoworks.com/ If you check out that website, you'll notice the rectangle shape in the middle behind the text and graphics. It goes to the furthest part of the top "off-screen." The picture I've attached is what happens to me what I try to play around with the padding and positioning (i've tried both html and css). Any help would be great. Thanks! I'm new to HTML but I think I'm slowly catching on. I have this block of code (I didn't write it) that I want to position on my webpage. The code creates a box with a menu on top containing five tabs (see attached pic). The tabs allow the user to switch between 5 embedded video streams inside the box. I want to take the whole thing and position it. Is there a way to position everything in the entire block of code? Or will I have to go into each piece and position it? How should I go about getting this box/menu/videos where I want them? I'm using a site builder that basically does the positioning for you, you just paste the code into a HTML box. But I can't get everything where I want it using that method so I'm now attempting to use absolute positioning. I'm thinking there must be a way to position everything at once because I assume that's how the site builder does it. HTML Code: <table>
<tbody>
<tr>
<td><br />
<style type="text/css">
div.TabTampil div.TTs {height: 24px; overflow: hidden; }
div.TabTampil div.TTs a:hover, div.TabTampil div.TTs a.Active { background-color: #15317E; }
div.TabTampil div.Halamans { clear: both; border: 2px solid #FFFFFF; overflow: hidden; background-color: #222;}
div.TabTampil div.Halamans div.Halaman { height: 100%; padding: 0px; overflow: hidden; }
div.TabTampil div.Halamans div.Halaman div.Alas { padding: 3px 5px; }
div.TabTampil div.TTs a { border-left:1px solid #FFFFFF; border-right:1px solid #FFFFFF; border-top:1px solid #FFFFFF; border-bottom:0px solid #FFFFFF; float: left; display: block; width: 100px; text-align: center; height: 24px; padding-top: 3px; vertical-align: middle; text-decoration: none; font-family: "Arial", Serif; font-size: 12px; font-weight: 900; color: #FFFFFF}
</style>
<br />
<form action="tabtampil.html" method="get">
<div id="TabTampil" class="TabTampil">
<div style="width: 650px;" class="TTs">
<a> Main Stream </a> <a> Stream 2 </a> <a> Stream 3 </a> <a> Stream 4 </a> <a> Radio </a></div>
<div style="width: 650px; height: 450px;" class="Halamans">
<div class="Halaman">
<div class="Alas">
<script type="text/javascript"> channel="CHANNELHERE"; vwidth="600"; vheight="450";</script>
<script type="text/javascript" src="http://www.castamp.com/embed.jsBACKSPACETHIS"></script>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/_woqNuDRPuA?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/rQ9vqVpNqWU" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="YouTube video player" width="640" height="390" src="https://www.youtube.com/embed/j3a1NwhsLVg" frameborder="0" allowfullscreen></iframe>
</div></div>
<div class="Halaman">
<div class="Alas">
<iframe title="AM 640 Radio Leafs Game" width="640" height="442" src="http://mapleleafs.nhl.com/club/RadioPlayer.htm?id=2010021217" frameborder="0" allowfullscreen></iframe>
</div></div>
</div></div>
</form>
<script style="text/javascript" src="http://www.mdn.fm/files/291528_3hhea/newscriptab.js"></script><br />
<script type="text/javascript">tabtampil_inisial('TabTampil');</script>
<br /> </td> <td><br />
Hi guys, just a quick question about positioning objects in HTML. Sorry if the is a noobish question, im new to html and dreamweaver. Basically, for a school assignments we nhave to create a webpage. There is one aspect though that i cant figure out. What is the best way to position pictures, divs etc in HTML? If I use absolute positioning with pixels, it changes where it is on different screen sizes (obviously). The best way i have found so far is by using percentages (eg top 40%) but this is slow and hard. Any better way? Too long didnt read- how to position things so it looks the same on any resolution Thanks in advance Hi all. I'm designing a website and for the first time using div tags. The style is controlled by CSS. I'm trying to get 2 div tags to be positioned next to each other, side by side. How do I do this, I just can't get it to work. Thanks |
|||||||