 Floating links over an image |
  |
| xizardy |
 Jan 23 2011, 06:22 PM
Post
#1
|
|
Group: Members Posts: 3 Joined: 23-January 11 Member No.: 13,690  |
So basically I'm trying to floating links over an image.
As of right now I have slide show inside a table, then next i made another table that has 7 links inside the table. then i used <div> tags to float the link table over the slide show that is in a separate table. I thought this worked until the browser minimizes and then the slide show table will float away from where I want it to be. I'm assuming its doing this because i have it located according to the sides of the browser. If you go to www.sonymusic.com, I am trying to do what they have done on there website. I want my links to float over the slide show in the same spot with out them floating from side to side when the browser minimizes If you need my html code just let me know, or need me t be any more clear. Thx |
  |
 
|
| Darin McGrew |
Jan 23 2011, 06:57 PM
Post
#2
|
|
WDG Member  Group: Root Admin Posts: 8,365 Joined: 4-August 06 From: Mountain View, CA Member No.: 3 |
Can you provide the URL (address) of a document that demonstrates the problem?
|
|
|
|
| pandy |
Jan 23 2011, 07:06 PM
Post
#3
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
This thread is basically about the same thing.
http://forums.htmlhelp.com/index.php?showtopic=13139&hl= When you say "float", do you mean the CSS property 'float'? 'Cause that won't work. You need positioning. DIVs aren't essential and it sounds like a lot of tables. But I'm just guessing... |
|
|
|
| xizardy |
Jan 23 2011, 07:23 PM
Post
#4
|
|
Group: Members Posts: 3 Joined: 23-January 11 Member No.: 13,690 |
my problem is simliar but im not sure what code im suppose to do, im new to this so.
HERE IS MY EXACT CODE. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <titleBusiness 7</title> <link rel="stylesheet" type="text/css" href="style.css" /> <script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script> <script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script> <link href="Spry-UI-1.7/css/SpryImageSlideShow.css" rel="stylesheet" type="text/css" /> <style type="text/css"> /* BeginOAWidget_Instance_2141542: #ImageSlideShow2 */ #ImageSlideShow2.ImageSlideShow { width: 1000px; height: 350px; border: solid 0px #ffffff; } #ImageSlideShow2 .ISSClip { background-color: #000000; } /* EndOAWidget_Instance_2141542 */ </style> <script type="text/xml"> <!-- <oa:widgets> <oa:widget wid="2141542" binding="#ImageSlideShow2" /> </oa:widgets> --> </script> </head> <body> <center> <table width="125" style="width: 500px;"> <tr> <th scope="col"></th> <th scope="col"></th> <th scope="col"><img src="img/header22.jpg"</a></center></td></th> <th scope="col"></th> <th scope="col"></th> </tr> <tr> <th scope="row"></th> <td></td> <td> <ul id="ImageSlideShow2"> <ul><a href="../pictures/jrdn.jpg"><img src="../pictures/jrdn.jpg" alt="" height="347" /></a></ul> <ul><a href="../pictures/tanngy.jpg"></a></ul> <ul><a href="../pictures/through.jpg"></a></ul> <ul><a href="../pictures/Untitled-6.jpg"></a></ul> <ul><a href="../pictures/tanngy.jpg"></a></ul> </ul> <script type="text/javascript"> // BeginOAWidget_Instance_2141542: #ImageSlideShow2 var ImageSlideShow2 = new Spry.Widget.ImageSlideShow("#ImageSlideShow2", { widgetID: "ImageSlideShow2", injectionType: "replace", autoPlay: true, displayInterval: 4001, transitionDuration: 1000, componentOrder: ["view"], plugIns: [ ] }); // EndOAWidget_Instance_2141542 </script> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <th scope="row"> </th> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> <ul><img src="img/home.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> <ul><img src="img/studios.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> <ul><img src="img/events.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> <ul><img src="img/clients.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> <ul><img src="img/media.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> <ul><img src="img/videos.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> <ul><img src="img/contacts.jpg"border=0 style="opacity:0.4;filter:alpha(opacity=40)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.4;this.filters.alpha.opacity=40"/></a></ul> </div> </div> </center> <body background="img/background22.jpg"> </body> </html> Im using dreamweaver, to edit. I basically want those 7 links to be on top of my slide show to the left. Just like this website "www.sonymusic.com". I toke the links out of table, so the only thing in the table is the slide show and a header. Cant you be more exact on what im suppose to do, step by step kind of. Thx |
|
|
|
| pandy |
Jan 23 2011, 10:56 PM
Post
#5
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
Do you have a URL for that? Too much we can't see from the HTML alone.
|
|
|
|
| xizardy |
Jan 23 2011, 10:56 PM
Post
#6
|
|
Group: Members Posts: 3 Joined: 23-January 11 Member No.: 13,690 |
So can any tell me how i can place one table inside and on top of another table, so that i can center based on the table and it won't be floating around.
|
|
|
|
| pandy |
Jan 23 2011, 11:27 PM
Post
#7
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,733 Joined: 9-August 06 Member No.: 6 |
QUOTE(Darin McGrew @ Jan 24 2011, 12:57 AM)  Can you provide the URL (address) of a document that demonstrates the problem? QUOTE(pandy @ Jan 24 2011, 04:56 AM) Do you have a URL for that? Too much we can't see from the HTML alone. |
|
|
|
| sfhdweb |
Jan 24 2011, 12:51 AM
Post
#8
|
|
Group: Members Posts: 1 Joined: 24-January 11 Member No.: 13,691 |
Thanks everybody for sharing great info.
|
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 27th April 2024 - 09:29 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC