|
HTML - Placing Text Over Image In Kompozer
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. Similar TutorialsI 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. how can i place text and pictures where i want i would be nice by using cordinates but i don't know how... Hello all! In my job, I talk to a customer or another rep, solve their problem, and note their accounts respectively. To avoid unnecessary repetition and typing the same thing over and over, I had knocked up a little html page (stored on my hd) with a javacode that had my most frequently used notes, such that I could click a form button, and the note was copied to the clipboard. Then I could just tab back to my working software and paste the note into the account. This worked beautifully until the company updated the security in our system, and now no page may use java. With my little html app, I just had a page full of pressable buttons that had one or two keywords on them, so that I knew which note I was picking. Having all of the notes listed longhand and having to select them by hand just takes so long, when I had such an elegant solution before. Does anyone know a method of accomplishing this task without using Java? 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?! Has anyone here used Komposer? Does it work for creating basic pages? 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 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 http://ps2cho.net/ At the top where it has ps2cho.net I would love to have an image span across. I don't know much about html...where would I start with this? Is it possible with the wordpress theme? Can anyone tell me why? <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Main</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #container { width:990px; padding:8px; border:1px solid #999; margin:auto; } #lefthome { width:100px; height:74px; border-top:1px solid #999; border-bottom:1px solid #999; border-left:1px solid #999; margin-bottom:4px; background-color:#fee; float:left; } #time { width:119px; height:74px; border-top:1px solid #999; border-bottom:1px solid #999; border-left:1px solid #999; margin-bottom:4px; background-color:#fee; float:left; } #banner { width:531px; height:74px; border-top:1px solid #999; border-bottom:1px solid #999; border-left:1px solid #999; margin-bottom:4px; background-color:#efe; float:left; } #date { width:119px; height:74px; border:1px solid #999; margin-bottom:1px; background-color:#eef; float:left; } #righthome { width:100px; height:74px; border-top:1px solid #999; border-bottom:1px solid #999; border-right:1px solid #999; margin-bottom:4px; background-color:#fee; float:left; } #about { width:482px; height:210px; border:0px solid #999; margin-right:2px; margin-bottom:4px; background-color:#ffe; float:left; } #program { width:482px; height:210px; border:0px solid #999; margin-left:2px; margin-bottom:4px; background-color:#eff; float:left; } .topic { height:110px; border:1px solid #999; margin-bottom:4px; background-color:#eee; float:left; } .left { width:320px; margin-right:2px; } .center { width:320px; margin-right:2px; margin-left:2px; } .right { width:320px; margin-left:2px; } #footer { width:970px; height:38px; border:1px solid #999; background-color:#fef; clear:both; } </style> </head> <body> <div style="font-family: Arial;" id="container"> <div id="lefthome">Click here to go home</div> <div id="time">Tianjin Time<iframe src="http://free.timeanddate.com/clock/is4qzpf/n33/th2/ts1" frameborder="0" height="18" width="62"></iframe></div> <div id="banner">name of site</div> <div id="date">Tianjin date<iframe src="http://free.timeanddate.com/clock/is4qzpf/n33/tt1" frameborder="0" height="18" width="218"></iframe></div> <div id="righthome">Click here to go home</div> <div id="about">me </div> <div id="program">program</div> <div class="topic left">western business</div> <div class="topic center">Chinese word</div> <div class="topic right">culture</div> <div class="topic left">calendar </div> <div class="topic center">links (sausage links) </div> <div class="topic right">archives</div> <div id="footer">bottom banner thermometer icon, weather icon, newspaper icon, chat with me, rss feeds, bookmark this site, guestbook, counter</div> my story/objective </div> </body> </html> What is the html code when placing multiple links on a single image? For example... the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link? What is the html code when placing multiple links on a single image? For example... the image is a tree with three leaves. Rather than having the entire image being a link, how would I set up an html code that makes each individual leave a link? ________________________________________________________________ Buying diamonds online - James allen review - Bluenile.com review - Mondera Diamonds Review - Online diamond store reviews - Engagement ring guide - Engagement ring guide here is the (ineffective) code currently: <img style="float: left; width: 169px; height: 73px;" src="img/logo1.png" alt="" /> <h1 style="text-align: center;">random text</h1> the image shifts the left margin such that the text is centered as though the page width was 169px less than it really is. i'm not debating the code itself; the code above behaves as its meant to. aka no surprises. i just cant figure out the appropriate code to center the text across the entire real width of the page as though there was no image. i've tried div tags & all the things google hunting advised. no luck. other than finding this forum, which seems like it'll be a boon! thanx in advance for advise/comments/feedback/help. 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. I 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 I have seen this many times but can not figure how to do it. Its the transparent images or text in text boxes, one example of this is http://au.movies.yahoo.com/Coming+Soon/to-cinemas/ At the top right you can see that transparent yahoo image in the text box and when you click it it disappears then comes back? can someone tell me how this works? Thanks 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 |
|||||||