|
HTML - Alternative To Layers?
Hello, I have an image that I want to make "float" above a small green bar, so that it sticks out above it. I have been able to achieve the effect with the <layer> tag, but the problem is that it only displays correctly in Firefox and not in IE. Also, I want to avoid the layer tag since it is not universally supported.
Here is an example with the layers: http://dqnmusic.googlepages.com/indexenlayer.html Here is what it looks like when I try to avoid layers: http://dqnmusic.googlepages.com/indexen.html Is there away around the layer tag that can still achieve the effect I want? Similar TutorialsTheoretically, a webpage is made up of layers, of which some things can go on top - or bottom - of others. Does anyone here know if it is possible to change the position of them? Thanks hello all.. i am pretty new to web creation, so this question might be pretty studpid.. Anyhow, I am using layers in my website. But everytime i view it on a browser (safari, firefox, ie) they are all over the place... Sometimes its just a small displacement or something.. but the layers just dont stay where i specify them in dreamweaver. I was wondering if anyone would be able to help me fix this problem? or if there is workaround to this.. thanks Hello guys, ew to this forum and relatively new to the world of infinite coding! I have a small dilemma, in that my funky 'competition' boxes, when put onto my page, mess up all the other styling. I have come to the conclusion that using <div> tags was a bad idea. I have a main CSS file called master.css controlling most of the syling, however the bulk of the text and content parts are made using div tags. Being really difficult to explain, I'll post a link: http://www.area51clan.seemeplayme.net/ben/test2.html The code for this: Quote: <form action="competition.php" method="post" target="_blank"> <div><img src="images/competition.jpg"></div> <div id="linkinput" style="background-image:url(images/competition2.jpg); background-repeat: no-repeat; width:180px; height:30px"> <input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Forename" align="center"/> <img src="images/competition6.jpg" align="center"></div> <div id="linkinput" style="background-image:url(images/competition3.jpg); background-repeat: no-repeat; width:180px; height:30px"> <input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Surname" align="center"/> <img src="images/competition7.jpg" align="center"></div> <div id="linkinput" style="background-image:url(images/competition4.jpg); background-repeat: no-repeat; width:180px; height:30px"> <input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Email" align="center"/> <img src="images/competition8.jpg" align="center"></div> <div id="linkinput" style="background-image:url(images/competition5.jpg); background-repeat: no-repeat; width:180px; height:30px"> <input type="text" style="background-color: transparent; border: solid 0px #FFFFFF;" size="180" maxlength="150" name ="Answer" align="center"/> <img src="images/competition10.jpg" align="center"></div><br /><br /> <input type="submit" value="Submit"> </form> This is what I want, on this page: [note that the lighter coloured parts are fields which do feed into a database and work.] http://www.area51clan.seemeplayme.net/ben/home.html The little box on the right side with 'ABC' in it is where I want it. Alt > View source [in IE] will show you the HTML. I wasnt sure if you needed the CSS, as Im not very good with that and it isnt my code, so here it is: Quote: body{ background: url(images/bg2.jpg); margin: 0px; padding: 0px; text-align: center; } td{ vertical-align: top; text-align: left; } #div-table{ margin-left: auto; margin-right: auto; width: 1000px; } .table{ width: 1000px; } .left-side{ background: url(images/left-ex2.jpg) repeat-y; width: 110px; } .right-side{ background: url(images/right-ex2.jpg) repeat-y; width: 110px; } .top{ background: url(images/ate-fat2.jpg) no-repeat; width: 779px; height: 36px; } .foot{ background: url(images/foot2.jpg) no-repeat; width: 779px; height: 43px; } .head{ background: url(images/head.jpg) no-repeat; width: 779px; height: 125px; } .left-content-t{ background: #FFFFFF; width: 569px; } .right-content-t{ background: #FFFFFF url(images/nav-bg-right2.jpg) repeat-y; width: 210px; } .content-header{ background: url(images/content-head2.jpg) no-repeat; width: 569px; height: 47px; } .c-head-div{ margin-left: 25px; margin-top: 22px; margin-right: 25px; font-size: 10px; font-family: Verdana; } .c-head-div a:link{ text-decoration: none; color: #1C1C19; } .c-head-div a:hover{ text-decoration: underline; font-weight: bold; color: #2C4D00; } .c-head-div a:visited{ text-decoration: none; color: #1C1C19; } .c-head-div a:active{ text-decoration: none; color: #1C1C19; } .content{ background: #1C1C19 url(images/content-bg2.jpg) no-repeat; width: 568px; height: 487px; border-left: 1px solid #3D3D31; } .content-div{ margin-left: 22px; margin-right: 22px; margin-top: 3px; font-family: Verdana; color: #999999; font-size: 10px; } .nav-top{ background: url(images/nav-topb.jpg) no-repeat; width: 210px; height: 34px; } .nav-text{ margin-left: 12px; margin-right: 17px; margin-top: 10px; font-family: Verdana; color: #999999; font-size: 10px; } .nav-div{ margin-left: 12px; margin-right: 15px; margin-top: 9px; font-size: 10px; font-family: Verdana; } .nav-bg{ background: url(images/nav-bg2.jpg) no-repeat; height: 89px; } /* Nav Linsk */ .home{ width: 81px; height: 31px; } .roster{ width: 82px; height: 31px; } .forums{ width: 87px; height: 31px; } .join{ width: 80px; height: 31px; } .servers{ width: 91px; height: 31px; } .info{ width: 118px; height: 31px; } .dl{ width: 120px; height: 31px; } .irc{ width: 120px; height: 31px; } So, is there an alternative to using div tags, do I put the code in the CSS or is there something else? Sorry to be such a bore guys, but ive been trying this for ages and it just doesnt want to work...Ignore the content too - this is for my ICT coursework. Thanks again guys, and sorry for the huge post! TracNav Hi, I have a problem with my fileserver which might take a long time to fix, it works randomly, so I was wondering if there was a way to supply TWO SRCs in ONE HTML string, both serving as ALTERNATES. This is what I mean. Will this work? I tried to see if it works, and it does NOT work. How can I make ALT SRC work. <img src="URL1/johnhall.jpg" alt src="URL2/johnhall.jpg"> Once again, what I mean is...if URL1 fails for some reason, then URL2 loads johnhall.jpg....that means the website reader does not face any interruptions. How to make this work Thank you in advance for any advice. Hi all, I have a problem with two layers i want to place on top of an iframe in at table. The website: http://kvc.dk/CTC7/2.htm As you can see its positioned below the iframe. I know it can be done because i have done on this: http://kvc.dk/CTC7/index.htm The problem is that its not working in firefox. Hope you can help. Thanks Hi, I have a cell within a table and into that I would like to place 4 x layers, all on top of each other. Adjacent to this I have 4 rows in a table, each with an image - the aim is to use OnMouseOver to hide / unhide the layers depending on which of the 4 smaller images are hovered over... The problem I have is that my website uses tables (width 950px) that are centred on the screen - and with resizing the screen in different browsers, the layers go out of alignment. Is there an easy way to ensure the layers always stay within the table cell? I'm using Dreamweaver MX2004. Thank you in advance for your very kind help. Matt I own a website at, www.Catwiskers.co.nr If you look, there are two characters on both sides of the main page. In order to position them there, I used a div position:absolute; script. Also if you notice, there is movement behind them. That's a flash movie I made, but then the movie disappears. But I also used div position:absolute; to place that there as well. How do I get the flash movie to be ONTOP of everything else on the page? Is there some sort of alpha:true or something? Hello all together, I'm trying to build this layout: The grafics are ready. I have the 4 corners as well as 1px slices for the left, top, bottom, right sides. I don't / can't use tables as I have done in the past. I have read dozens of tutorials and know about properties like "floating", display as table by using "display: ...." but didn't make it! Apart from that do I have to look at what HTML definition I have in my files? HTML4.0 etc.? Thanks alot for any tips! Hi, if you take a look at the following page: http://www.vub.ac.be/ARCH/reis.php you will see that - in IE - the footer overlaps with the content layer. in FF everything is ok any ideas? thanks I have this Web page I'm working on and I'm not sure on how to get the overlayed images to line up 'automatically'. Here is the code I have: <div id="main-copy"> <h3>NorthEast Regional Radar</h3> <div id="topo" style="Z-INDEX: 1; LEFT: 0px; POSITION: relative; TOP: 0px" > <img src="http://www.srh.noaa.gov/ridge/Overlays/Topo/Short/box_Topo_Short.jpg" border="2" alt="Topo Base" ></img> </div> <div id="radar" style="Z-INDEX: 2; LEFT: 0px; POSITION: relative; TOP: -555px"> <img src="http://www.srh.noaa.gov/ridge/RadarImg/N0R/box_N0R_0.gif" border="2" alt="Radar Image"></img> </div> <div id="county" style="Z-INDEX: 3; LEFT: 0px; POSITION: relative; TOP:-1113px"> <img src="http://www.srh.noaa.gov/ridge/Overlays/County/Short/box_County_Short.gif" border="2" alt="State Borders" ></img> </div> <div id="legend" style="Z-INDEX: 4; LEFT: 0px; POSITION: relative; TOP: -1668px"> <img src="http://www.srh.noaa.gov/ridge/Legend/N0R/OKX_N0R_Legend_0.gif" border="2" alt="Legend Overlay"></img> </div> </div> You can see I've attempted to get these to line up by specifying a "-" TOP offset. Doesn't work in all cases. How do I fix this the proper way ?? Thanks. http://www.zouklambada.com/eventsNew.asp This is the page I'm working on. Basically i need it to work in the following way. When you click on all the images at the moment, it is working fine (sort of)- each time you click, a layer comes up over the three small ones - BUT i need the small images to stay in position and these big images to go ontop (ie. you dont see the small images in that same row - they should not jump to the bottom. There will be more rows. When a big image is displayed in first row, the second row must slip underneath. Hope this makes sense! Please help! Hi everyone, I was wondering if it's possible to stack images on top of each other in html so that the position of the images stacked on top are relative to the bottom image, instead of being relative to the screen edges (eg, 100 pixels above bottom of screen, 200 pixels left, etc)? I want to create a simple image menu like this: Where I have one large image on the bottom, and three image-links on top of it, aligned so that they're always in the same spot relative to the base image no matter what the computer screen resolution is. If I make them relative to the screen edges then computers with different resolutions would display the images out of order. I'm pretty new to html, using Adobe Dreamweaver CS5.5 at the moment. This is what I have so far: Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<LINK href="style.css" rel="stylesheet" type="text/css">
<title>Main Playlist</title>
</head>
<body>
<!-- Layering priority low -->
<DIV STYLE="{z-index:1;}">
<p><img src="pictures/baseimage.png" alt="baseimage" align="middle"/></p>
</DIV>
<!-- Layering priority high -->
<DIV STYLE="{z-index:2;}">
<p><img src="pictures/button1.png" alt="button1" align="middle"/></p>
</DIV>
<DIV STYLE="{z-index:2;}">
<p><img src="pictures/button2.png" alt="button2" align="middle"/></p>
</DIV>
<DIV STYLE="{z-index:3;}">
<p><img src="pictures/button3.png" alt="button3" align="middle"/></p>
</DIV>
</body>
</html>
Quite obviously it's not right as I have no idea how to set the buttons so they are "X pixels from the top/bottom/left/right of the base image". Thanks! I'm adding some ad sense code into my second side bar of my blog. However i have a large widget image which i have placed in my first (left) side panel and it's taking over both panels. I'm un-able to add a widget into the second (right) side pannel as it overrights the code for the right side pannel for 'archives' and 'blogroll', which is fine. But i'm wanting to place some adsense code under my large image in the right side, but the ad sense code over rights the image! So, i need to add a bunch of paragraphs to make it shift down lower, i'm using close to 30 <p< </p> so i can get the adsense code low enough to not cover over the left panels large image. So i'm wondering, is there a smarter, or better way of getting this code down lower? I know i could use CSS and a margin, but i'm not really sure how to make that change. Is there a HTML way of doing this, or is the large amount of spaces i've put in ok? Thanks! www.nikkisblogspot.com if my description was a bit confusing. PS. Whats with IE? My widgets are all over the shop and some aren't even showing?? I was wondering... I really don't want to use Iframes on my website, because everybody tells me they're really unreliable. What I'm trying to do is make it so that my site navigation code is in a seperate file than the rest of the page, so if I need to update it I don't have to redo fifty-something pages. I've heard this can be done, but I have no idea how. I am currently designing a site for my band, we require an mp3 player to be embedded into the site, but dont want the player to be reloaded (and therefore restarted) everytime a new link is visited - basically the music should continue to play no matter what "page" is visited and without interruption. The mp3 player we are using is xspf_player. I am able to use css and html fairly well and have a little experience with php. I know one way to do it is to put the player in a frame and then all the other content in another frame and just have that frame updating when links are clicked, but I think frames are ugly. Is there any other way I could implement this feature, perhaps using php or css/divs? My thinking was to have all of the content on just one page and have different "sections" becoming visible or invisible but it seems too lengthy for such a simple problem. Am I just being stupid and overlooking the simplest method? Thanks in advance, Matt Hi - so I'm a bit of a noob to all this html business, but have done a bit of C at uni. Basically I'm embarking on a little home project trying to create a notepad web app- that way i can have it in my bookmarks, as an app on my iphone, as a webclip on my mac's dashboard etc. I'm hosting it from my dropbox, got that bit sorted. I thought I had it sorted when i found contenteditable, but alas no ios support, so I was wondering if anyone new of an alternative, basically all i want is a text box thats editable, a save and a refresh button. Any help greatly appreciated, Thanks, Geoff. I have a website build with frames. I have a section called "News" that I want to be able to put the most updated news in, similar to a blog. I want a blog style interface, that way I don't have to edit the HTML of the page every time I want to add a new piece of news. I do not want an SQL based blog however. I've looked into some PHP based blogs, but it "looks" too much like another website loading inside this frame (which I know it IS, but I don't want to give that appearance). My website is *White* so is there a solution to adding new news in a blog style format without an entire blog inside the frame? I just want to be able to easily add new news to an HTML page without actually going in an editing the HTML. How do other websites deal with adding news to a news page so that a client could easily edit their own news? Thanks! I've spent the past three days trying different codes in order to get this layout to align - literally it's been the most frustrating thing I've ever had to do. www.aftermath.russian-silver.net/index2.html Basically I'm trying to get the "left" div to cover the left side of the background image (so that when people click on the blue rose, paw print, or heart, a new navigational image appears on that side. I can get it to line up in just IE or just Firefox - but not both. Usually there is a pixel or two difference from the top and things are off (or I can't get the image map to work because other div layers are covering it). My brain is fried and I'm at a loss as to what to do - and I feel like I'm sitting on a jumble of coding. If anyone knows what to do, please share! this issue has been solved Dear HTMLForums.com! I'm currently new to designing pages from scratch, and i have some questions about how to "frame" your website in Dreamweaver. So, i found out that AP-divs would let you draw layers / boxes, but at the same time, it doesent center the content of the AP-divs on every computer. It kind of has a fixed position, wich of course, if viewed on a different monitor, then would not center. (if the layer is placed at W:300px and H:400 px, then it would not be centered on every viewers screen) Is there any way i could get the same posibillities, where the content would be centered in any browser, on any resolution etc.? If there is any function in Dreamweaver that would let me design boxes etc. to get somewhat of a structure on the page, while also making the boxes centered, etc. Sorry for describing my problem so badly, i really don't know how to explain properly. Cheers. |
|||||||