|
HTML - How To Include Images Between Text In <li> Tags
I have the following code:
<li><?php echo t("You are logged in as <strong>!user</strong>", array('!user' => l($user->name, "user"))); ?><?php echo user_badges_for_uid($user->uid); ?> <b>|</b> <?php echo l(t("Edit"), "user/" . $user->uid . "/edit");?> <b>|</b> <?php echo l(t("Log out"), "logout"); ?> </li> user_badge_for_uid function returns an image, a badge for the user. This, however, is causing a line break. The output is coming like this; You are logged in as: Navs image | Edit | Logout How can I do without the line breaks? Please help thanks Navs Similar TutorialsPerhaps 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 I am just new, i just started HTML a week ago and pls help me. Hello Everyone, I have just started learning html and I am facing a problem. I have wrote the following code in notepad: Code: <h3> HTML Images - The <img> Tag and the Src Attribute </h3> <p> The <img> tag is empty, which means that it contains attributes only, and has no closing tag.<b/><br/> When I open this html file in browser, text "<img>" does not display correctly. Please help me asap. Thanks! Is it possible to get the initial value of a text area to be in any tags (like the italics tag for example)? I've read all over various ways of making the image and the text align horizontally, yet somehow I can't get the darn thing to work in my website. I'm thinking it maybe because of DIV tags I have the following code: <div class="column1"> <div class="column2"><img src="images/logo_sm.png" border=0 height=97 align="bottom"> It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of </div> <div class="clear"></div> </div> The text is still aligning to the top of the image even though I've indicated bottom alignment. What am I doing wrong or what don't I know? Please help. thanks Navs Im moving to a strict Doctype and I can't be bothered inserting alt = "" tags to images that need them. Can anyone provide a regular expression that I could use in dreamweaver that would insert alt = "" into an <img > tag if it already didn't contain the alt = "" attribute i'm looking for a cheap way out of making collapse/expand code. i've learned a lot of 'ghetto' techniques n thought mayb i can use something similar to the html tricks i've learned in the past. the theory i have is.. i use the title of the collapse/expand text as a link to the text below it to open and close by using the navigating tags: Code: <a name="content">opening/closing text here</a> and the title above the content: Code: <a href="#content">Title</a> to open the area of text. now my idea of a shortcut around the whole css/html/javacript combo is to make the text below it use a Code: <font size=0>content</font> at default and have the href title link change the font size to the default 9pt but I don't know if that's even possible. Is it possible with the Code: <div> tags? and if so, using that, would i still b able to make a link like that? I'm a newbie and I need help with using the #include directive. below is a sample file usinging the #include directive: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Untitled</title> </head> <body> <!-- #include file="test.html" --> </body> </html> Here is the contents of test.html: <h1>header</h1> When I display the test.html in my brower the text show up. When I run the main file above with the include statement the contents of the test file will not appear. I've tried using #include virtual and I get the same results. both files reside in the same directory. How can I get the above files to work. I'm working with windows XP on a home computer. This problem occured in my actual website files becasue I want to include a header and a footer. These files of course have table tags etc in them and I get the same results where the include files contents do appear. I need help asap if that is possible. please, check http://members.dodo.com.au/~rouslan/...ite/index.html I need to know how to get rid off strange effect down the bottom and how do I make text and image aligned on the same "line", "level" e.g. image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text image image text text text text text text text text I'm writing a blog posta nd I want to enter text and images. But when I do, the text and images appear next to one another and I don't want that. I want the text to come UNDER and ABOVE the image rather than on the side of it. Currently, I have: Code: <img src="/images/menu.jpg" alt="Menu" /> <p> </p><p> </p> <p> </p><p> </p> <p> </p><p> </p> Text Here As you can see, I have to enter a lot of manual paragraphs. Is there a better way of separating the text from the images Hello HTML experts; a nooby here. Searched for this and found tons of posts but none seemed to fit my question or fix my problem. To show what I am trying to do, I put all the details he http://www.sticksite.com/align/ Is there a solution that a nooby can understand? THANKS for your time! hey ive been doing html a little while now and to move things around my webpage ive been using the <div> tag but when i change the screen resolution the images / words move to a different placee is there another way of doing it so they dont move if im adjusting the screen resolution somebody please help <div id="myBox"> <p>4 Wheel Madness</p> <img src='sampleimage.png' width="65" height ="65" alt="img"> </div> What would i add to this to make the image go to the LEFT of the box, and then the text to go to the RIGHT of the box? ##### Text here, ##### Text here, ##### Text here, ^ Just like that Thank you for any comments Hello All, I cant seem to lock a form and images in a browser, I have all center and when it opens it remains centered but when I shrink the browser window the images/form moves... My CSS is <style type="text/css"> <!-- body { background-image: url(); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin: 0; padding: 0; } --> </style></head> <style type="text/css"> <!-- #centerDIV0 { width: 100%; text-align: justify; overflow: hidden; position: absolute; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; visibility: visible; background-image: url(CS_bkgd.jpg); background-repeat: repeat; } #centerDIVX { text-align: center; overflow: hidden; position: absolute; margin: 0px; padding: 0px; vertical-align: middle; z-index: 2; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; } #centerDIVZ { z-index: 2; overflow: hidden; position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; vertical-align: middle; left: 0px; top: 0px; right: 0px; bottom: 0px; margin-top: 380px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; visibility: visible; padding-top: 0px; padding-bottom: 0px; padding-left: -300px; } --> </style> And Html is... <body> <div id = "centerDIV0"> </div> <div id="centerDIVX"><img src="CS_bkgd.gif"/></div> <div id="centerDIVZ" bgproperties="fixed"> <form action="mailto:tastetation301@yahoo.com" method="post" enctype="text/plain" onsubmit="location.href='thanks.html'"> <p><br/> <strong>Name:</strong> <input type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> <br/> <strong>Email: </strong><input type="text"STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> </p> <input type="submit" value="Submit"/><input type="reset" value="Reset"> </form> </div> </body> </html> THANKS FOR YOUR ASSISTANCE!!!! I've got a line of text that includes some IMG tags. The images are 23 pixels high and the text is about 16 pixels high. So the IMGs increase the height of the line. Normally, Text and IMGs are aligned to "the bottom", so that the IMGs are much taller than the text. I could increase the size of the text so that it was as tall as the IMGs, but I'd rather not. I want the text to be vertically aligned to the "middle", so that the line looks better. Is that possible? Hey All, I would like to have a site similar to lol.com, in which the page changes upon every visit. I have been researching and i have found this : http://baremetal.com/gadgets/sequence.html It looks very cool, however i can't implement this, as i NEED to have their hosting, Gay! Anybody know of a random script thing i could use? I would be very gracious, I found a dhtml script, however it was not good enough, somebody could eaisily copy the source, which they wouldn't of been able to had they done the above URL^ Thanks all! I'm trying to position text, links and pictures to follow one after the other, but it doesn't work. I want to see "Homepage" on the left corner of my webpage "Next" on the right corner of my webpage Unfortunately this command doesn't work properly. <div style="text-align:left;solid 2px #ff0000;"><a href="F:\Webcomic\Website Folder\NWvisuals-Index.html"> Home</a> <p align=right><a href="F:\Webcomic\TheEyeoftheWorld3.html">Next</a></div></p> It makes the "Next" go down a line, instead of being in the same line of the "Homepage". Also, on that vein, is there any way I can align images and text on the same line without using spaces*? As in: <p align="left">Hello</p> <p align="center">Hello</p> <p align="right">Hello</p> But they all should stay on the same line. Any guides, or even links to tutorial about my issue would be appreciated. I've been trying to google for a while, it's becoming frustrating. *I think the problem with spaces is that people with different resolution would see the text in different places than I want them to see. --deleted-- i am new, i found this site through google and seen how helpful everyone is and decided to join to try and find an answer. i got the design for the site from a template but i remade a majority of it and used photoshop to slice it. so heres the problem, the page is fine the way it is, but i need to be able to type in the white area. i dont know if a code exists to do such a thing but i attempted to will in the white area with a table instead of the image. please help me. thanks in advance. http://haskinsart.awardspace.com/index.html above is the page with the image as the white space (the body(where i want to type)) http://haskinsart.awardspace.com/indexart.html and this one has the table. but as u can see now i have gaps!!! please help me. |
|||||||