HTML - Placing Un-aligned Images / Scattered?
Hi all,
I'm currently working on a website for our office, but absolutely not an expert. Usually, I can find plenty information on the internet to fix more or less what I like to make. This time, however, I'm clueless... The bottom 1/4 of the screen will be a menu bar with images. (small, approx 120x63px). I want these images scattered across the bar. They will be image links to our current projects. By varying in size and place (chronologically from left to right), the importance will be visualized. Thus, the images won't be placed in a grid. I hope I made myself clear and you guys understand what I'm looking for. I've tried working with the AP-elements in Dreamweaver, thus far, unsuccessful. (I'm not even sure if this should be here or in the CCS forum...my apologies) Your advise would be appreciated! Similar TutorialsI want to use <a href="...">thumbnail.png</a> or something similar to place an image in a layer on a different part of the same page. Can this be done in HTML or do I need to write something else? Or am I asking the impossible?? I'd like to avoid calling another page as this could result in slow performance, and I'm trying to avoid using frames. The various layers on the page are defined in CSS. I've managed to do this much of a page myself, putting the first image in the upper left corner using <table>, but all of my attempts to place another image in the upper right corner have failed. I'm trying to do it in separate tables: Code: <img> <left></left> <table style="text-align: left; width: 25%;"> <tbody> <tr> <td align="left" width="100%"><img src="http://www.mediafire.com/imgbnc.php/8c949126f0375905b2efe0813fda35e44g.jpg" alt="A Barbarian Dwarf" mouseover="A Barbarian Dwarf" align="left" border="0" height="385" width="260"></td> </tr> </tbody> </table> I've tried doing it this way: Code: <img><right></right><table style="text-align: right; width: 25%;"> <tbody><tr><td align="right" width="100%"><img src="" alt="" mouseover="" align="right" border="0" height="385" width="260"></td></tr></tbody></table> But it keeps placing the 2nd image under the 1st one....huh Perhaps this really belongs in the CSS section, but it seems more of a HTML issue to me, so I'm sticking it here. :p Here's my question! I've got a set of links, and I used an external CSS sheet to make it so that when the links are hovered over, the image changes. That all works fine and dandy, but now the links are lined up one on top of another. I'd like to make them sit next to one another, like so: http://img411.imageshack.us/my.php?i...lllinksgy4.jpg How can I do this? I've tried adjusting the table tr height and I tried to put the links in a div layer, but the divs of the CSS code seem to be overiding everything else. I'm really not sure what else to try, and any help would be entirely welcome. This is the page I'm working on: http://www.freewebs.com/ramsus-kun/S...ssingabout.htm and these are the particular links in question: <div class="nav"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Home.htm"> <img src="http://img356.imageshack.us/img356/4239/link01home01rl1.png" width="81" height="37" alt="Home" /> </a> </div> <div class="nav2"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Translation.htm"> <img src="http://img514.imageshack.us/img514/2622/link02translations01za4.png" width="138" height="37" alt="Translation" /> </a> </div> <div class="ForumCSS"> <a href="http://suikogaidentranslation.freeforums.org/index.php?sid=9c56e6b8ae5bbb47f0fd206ccc660b89" target="_blank"> <img src="http://img262.imageshack.us/img262/7061/link03forum01yb3.png" width="82" height="37" alt="Forum" /> </a> </div> <div class="MemCSS"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Members.htm"> <img src="http://img356.imageshack.us/img356/664/link04members01vk8.png" width="112" height="37" alt="Members" /> </a> </div> <div class="LinkCSS"> <a href="http://www.freewebs.com/ramsus-kun/Suikogaiden/Links.htm"> <img src="http://img262.imageshack.us/img262/3954/link05links01mu9.png" width="76" height="37" alt="Members" /> </a> </div> Thanks! --rin_uzuki Please help anyone... even though they appear normally aligned and centered from inside DW all my table are aligned left when previewed in a Firefox. It's all good in IE. Have spent half of a day trying to figure it out <table width="527" height="2180" border="1" align="center"> <tr> <td><span class="style23">xxxxx</span></td> </tr> </table> I doubt that this means much but here is one of the tables. If it means something, this started to happen when I had to put a whole book online for one of my customers that had problems downloading it. So, in the process I copy/pasted from Word to DW. I had to do it. I know that these kind of things can sc... everything up so I made sure that I first cleared all the formatting from Word. So, I'm in a pickle now... the text on My Browse button shows half only. How do you fix it? attached please find pic Greetings from Norway! This is my first post on this forum! I am currently developing my website, and when I checked the page in Firefox, Safari and Chrome it seemed perfectly fine, but when loading it in IE and Opera it looked strange. the page: http://aksjefinans.com/bilde.html In Opera and IE the text in the tables are centered while in the other browsers it is aligned to the left (this is how it should look). Why is the table text centered in IE and Opera? I have looked over my code several times and tried a lot of different moves, but it always ends up like this in IE and Opera. Centered text does not look any good. What should I do to make the page look the same in IE as in firefox? Hope someone could help me! Well, I am new to HTML and I would just like to say that I appreciate anyone who takes their time to busy themselves with my concerns. I have a simple problem that I am not sure how to fix. My problem is that in all the tables I create, the first row of the table (the titles) are all centered, but pushed a bit to the left. I use the the text align center and <center> tags and it works on everything except the table titles, which are centered, but a bit to the left. It is fairly noticeable and is extremely annoying. Can someone try helping me out? Thanks. -fenzo666 Hi.. is there any possibility to do something like on that screen pictu http://www.speedyshare.com/387574283.html i mean a page layout with two frames, both aligned to the center of the page ? plz help :/ thx in advance Hi. I can't figure out how to have all the tables on my site aligned to the centre yet have the text in them aligned to the left. In other words I want 2 margins either side of the central body of my site. How can I do this? Thanks. I have no idea why, but the pictures in the table at https://www.wagnermeters.com/california1.php are aligned vertically instead of horizontally as it seems they should be. Am I going crazy? What can I do about it? How can i place an image so it is at the exact x and y that i want it? Becuase if i put my image right after the body tag, it is hanging off the left a little bit. I need it right at 0,0. Please help me?! hello, how can i place pictures i wrote a poem left side and need place a pic right side of the poem but it goes right side of where the poem end any help appreciated Hi again I decided to use divs instead of tables for the html layout, now i have some issues and would like to ask you guyz around here. this is the html : PHP Code: <body> <div id="wrapper"> <div id="top"> <div id="logo"></div> </div> <div id="menlog"> <img src="logo.png" width="231" height="54" /> <ul> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Contact us</a></li> <li><a href="#">Search: </a></li> <li><div id="searchbx"><form class="search" action=""> <input type="text" class="text-field"/> <input type="submit" class="submit" value="submit" /></form> </div></li> </ul> </div> </div> </body> and this is the css: PHP Code: #wrapper { text-align: left; margin: 0px auto; padding: 0px; width: 100%; /* border: 1px solid black; */ } #top { width: 100%; /* border: 1px solid black; */ } #logo { background: url('bg-top.png') no-repeat; padding: 0px 0px; margin: 10px 0px 0px 0px; width: 100%; height: 90px; position: relative; } #menlog { /* width was 100% */ width: 100%; font-size:15px; } and this is what i get : now my problem is that my menu wont remain in the same line as the logo and it goes to the next line under the logo which i dont want! i tried also to put this line : PHP Code: <img src="logo.png" width="231" height="54" /> inside a div which i gave "display:inline" property but that failed too ! it would be nice if someone can advice me. how can i place text and pictures where i want i would be nice by using cordinates but i don't know how... Hi, I have to draw divs over an image. When the mouse is over a div, the bgcolor of the div is changed to show it highlighted with some opacity. Am using following code for it Code: <!DOCTYPE html> <html> <head> <title>test.html</title> <style type="text/css"> .mouseOutClass { border: 1px dotted #74CFFA; } .mouseOverClass { cursor: pointer; border: 1px solid #74CFFA; background-color: #ffeaab; filter:alpha(opacity=60); -moz-opacity:0.6; opacity: 0.6; } </style> <script type="text/javascript"> function highlightBox(obj, show) { var attr = obj.getAttribute("boxList"); if (show) { obj.className = "mouseOverClass"; } else { obj.className = "mouseOutClass"; } } </script> </head> <body> <div style="height: 100%;width: 100%;"> <div > <div style="position:absolute; left:0px; top:0px; height:150px; width:150px;" class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" > <table width="100%" height="100%"> <tr> <td> </td> </tr> </table> </div> <div style="position:absolute; left:200px; top:100px; height:200px; width:200px;" class="mouseOutClass" onmouseover="return highlightBox(this, true);" onmouseout="return highlightBox(this, false);" > <table width="100%" height="100%"> <tr> <td> </td> </tr> </table> </div> <img src="someImage.jpg" /> </div> </div> </body> </html> This is working fine in all browsers except IE 9. It works in IE 9 too if I use the HTML 4 doctype instead of HTML5. Am I missing something here or is it a bug with IE9? Thanks Kapil I am new to HTML and all and was wondering how you place text next to an image? Here is an illustration of what I am trying to accomplish... PICTURE PICTURE PICTURE text text text text text PICTURE PICTURE Pretend that the words PICTURE illustrate one picture. I want the text to be centered on the right of the picture. How do I do this? Thanks!! Ok, I'm fairly new to html, so I photoshopped me a simple layout which I hope to use to help teach myself HTML. I have got some of it done ok, but I'm having a little problem with the text, as you can see if you look at the page. http://aa-anonymous.co.nr The text is just in the center of the content area. How can I make it go to the top. And if I have to use CSS, I will do, but I dont particularly want to jump into that until I know and understand HTML a little more. Thanks to anyone that can and does help. Was wondering how I'd place an image at the very top of the page so there's no white space (this site has it's logo pretty high up there). At the moment i get about .5cm white using just a standard <img> tag. Anyway, I'd appreciate some help. Thanks, Cam I'm a total noobie, so don't shoot me if this has been answered before. What is the best way to place text and a link image on top of another image in Kompozer (version 0.8b3 for Mac OSX)? I want the page to be centered in the browser. Or a simple html markup to help me understand would be good too. Seems simple enough, but I cannot figure it out. |