|
HTML - Wrap Html Code
I am new to HTML and I need to know how to wrap code when it is too long and keeps going across the page. In VBA you use _. This will
wrap the code and you can keep it looking neater. Please help!!! Similar TutorialsI want to wrap a long line of text in a table for Firefox, IE 6, 7 and 8, Chrome and Opera. I try 'style="overflow:hidden; width:50px;' but the line is cut off. i.e. I see "longllllllllllllllllllllllllllllllllllllllllllll" but not "longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll llllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong". Code: <table border="1" cellpadding="2" cellspacing="0" width="600" style='table-layout:fixed'>
<col width=40>
<col width=97>
<tr valign="top">
<td align="center"><span class="Body2"><a href="index.jsp?ID=21">21<br>(22)</a></span></td>
<td style="overflow:hidden; width:50px; max-width:50px;"><a style="text-decoration: none" href="index.jsp?ID=21"><span class="bodySmall">longlllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllong<br></span><span class="Body2"></span></a></td>
</tr>
</table>
So a while back I experimented with doing text/image wraps in html. The best solution was using a array of divs. And i found a great site, that will analyze your image and generate the code for it. http://www.theboxoffice.be Today however I had a thought to try and get the text to be scrollable around the image wrap. any thoughts? HTML Code: <textarea wrap='soft' name='newsMsg' cols='20' rows='7'
class='newsMsg cleardefault'></textarea>
And that is my textarea code. The problem is that is doesn't wrap the text when typing it in the textarea. Any help would be appreciated. Thanks in advance. My html problem keeps failling, with all my image codes.. shown for 10 errors which are all for the images what's wrong? Here is the code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- New Perspectives on HTML and XHTML 5th Edition Tutorial 2 Case 2 Fiddler Home Page Author: Date: 2-16-2011 Filename: home.htm Supporting files: fiddler.jpg --> <title>, ITSE 1411 Lab Project 2, Tutorial 2 Case 2, Due 02/23/2011</title> </head> <body> <div> <img src="fiddler.jpg" alt="Fiddler on the Roof" /> <hr /> <a href="home2.htm"><img src="home.jpg" alt="home" /></a> <a href="slide1txt.htm"<img src="start.jpg" alt="start" /></a> <a href="slide1txt.htm"<img src="back.jpg" alt="back" /></a> <a href="slide2txt.htm"<img src="forward.jpg" alt="forward" /></a> <a href="slide6txt.htm"<img src="end.jpg" alt="end" /></a> <br /> <a href="slide1txt.htm"<img src="thumb1.jpg" alt="slide1" style="border-width: 5" /></a> <a href="slide2txt.htm"<img src="thumb2.jpg" alt="slide2" style="border-width: 0" /></a> <a href="slide3txt.htm"<img src="thumb3.jpg" alt="slide3" style="border-width: 0" /></a> <a href="slide4txt.htm"<img src="thumb4.jpg" alt="slide4" style="border-width: 0" /></a> <a href="slide5txt.htm"<img src="thumb5.jpg" alt="slide5" style="border-width: 0" /></a> <a href="slide6txt.htm"<img src="thumb6.jpg" alt="slide6" style="border-width: 0" /></a> </div> <hr /> <div> <img src="slide1.jpg" alt="slide1" /> </div> <blockquote> <p><i>Do You Love Me?</i> sung by Deb Ingalls and Thomas Gates</p> </blockquote> </body> </html> Hello! I have a blog on blogger and i want to make a c++ tutorial.. But every time i type "<iostream>" on post, when i see it, it is only "iostream". How can i make a code like the "[code]" from BBcode to cancel the compiling from HTML? Thanx! Hello everybody, I'm new here. I'm redesigning my own website and came up with some tricky situation. I write HTML lessons and I want to put just the pure code in my posts, but they appear as a regular html document... How do I make the code to be shown just as text (code), like we do in the forum boards (code tags or whatever)? I have a website where I want to make a drop down menu that will bring you to different pages. It is a very basic, sort of old-fashioned website that relies entirely on html. What I'm trying to do is make a drop-down menu that will be used as navigation for a section of a website and I want to have it in each internally linked page in that section, but I'm going to be adding more pages to it over time so I want to be able to put the drop-down menu code in a separate text file and then substitute it into the pages that I make that the options in the menu link to and then just edit the code in the text file when I add another page so that I don't have to go back and edit the code every single individual page whenever I add a new one among them. Basically all I'm asking is how I can put html code in a text file and then substitute that code into an html page by referring to the file. Thanks in advance for any help. Hi everyone. I'm new to HTML, so I've been reading a lot online and stuff but I haven't been able to find an answer to my question, so I figured I'd ask here since these forums looked really helpful. I have a mobile site where I have a link. The link is two words and I would like to force the link to wrap on to two separate lines. Am I able to do this? I haven't been able to find anything online like this. I would still like the link to work and everything. Any help and information would be greatly appreciated. Thanks Again, Hi all, I have a long text without any space inside it. I want that it wrapped by the browser. Which code should I use? Thanks in advance. Dear Forum-goers, If I knew what to search for I would, but I don't know what this idea is called. I want to create a website with code that does the following: <body> (INSERT FROM OTHER HTML FILE: Page introduction) (INSERT FROM OTHER HTML FILE: Content) (INSERT FROM OTHER HTML FILE: Sidebar) </body> Is there a way to do this? If not, then okay. I've tried using <link />, which doesn't do the job. You'll see the line in question in blue font: 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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>This is the main page.</title> <link type="text/css" rel="stylesheet" href="journal.css" /> </head> <body> <link type="text/html" rel="content" href="tobelinked.html" /> </body> </html> Hi, I need to wrap the text of button so that it fits in the button's fixed width and doesn't expand the button's width, only it's height. This can be done in a regular text using the WORD-BREAK:BREAK-ALL; attribute But I tried this on the button and it's not working? Is there any work around for that? any css attribut? Hi, I have a huge text that i need to display in a span tag on my page. Currently the words are breaking at the end of the line, i.e. if the word if "Understand" and there is not enough space to display the entire word, half of the word is displayed in the space available, and the remaining on the next line. However, i want that the entire word be displayed on the next line. Please suggest how this can be done. Regards, Ankit!! Hi folks, I have this menu (generated via menumatic), that needs to not wrap should users decrease the width of their browser too far (or if it does wrap..then I need the div to resize to fit the height properly which it currently does not). Any tips/suggestions welcome The website url: (click the Available Items which will show the 2nd level menu in question (located in div id='promo') http://www.borrownet.com/ the CSS is as follows (from mm2.css): /* Based partially on Matthew Carroll's keyboard accessible flavor of Suckerfish * Dropdowns by Patrick Griffiths and Dan Webb. * http://carroll.org.uk/sandbox/suckerfish/bones2.html */ /* ----[ LINKS ]----*/ /* all menu links */ #nav a, #subMenusContainer a{ text-decoration:none; display:block; padding: 8px 10px; color: #000; font: 70%/90% arial; -moz-border-radius: 4px; -webkit-border-radius: 4px; } /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/ #nav a{ margin:5; float:left; } /* Just sub menu links */ #subMenusContainer a, #nav li li a{ text-align:left; } /* All menu links on hover or focus */ #nav a:hover, #subMenusContainer a:hover { background-color:#90B557; color:#FFF; /* -moz-border-radius: 7px; -webkit-border-radius: 7px;*/ } /* sub menu links on hover or focus */ #subMenusContainer a:hover, #nav li a:hover { background-color:#B2D281; color:#000; } /* .subMenuParentBtn{ background: url(../img/arrow_right.gif) right center no-repeat; } .subMenuParentBtnFocused{ background: url(../img/arrow_right_over.gif) right center no-repeat; } .mainMenuParentBtn{ background: url(../img/arrow_down.gif) right center no-repeat; } .mainMenuParentBtnFocused{ background: url(../img/arrow_down_over.gif) right center no-repeat; } */ /* ----[ OLs ULs, LIs, and DIVs ]----*/ /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */ .smOW{ display:none; position: absolute; overflow:hidden; /*the 2px left & right padding lets you have a 1px border on the ul or ol inside since overflow is set to hidden*/ padding:0px 4px; margin:0 0 0 -2px; } /* All ULs and OLs */ #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol { padding: 0; margin: 0; list-style: none; line-height: 1em; } /* All submenu OLs and ULs */ #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol { /*border around submenu goes here*/ -moz-border-radius: 4px; -webkit-border-radius: 4px; background-color:#90B557; border: 2px solid #C3D46A; top: 0px; left:0; z-index:8; } /* List items in main menu --[for non-javascript users this applies to submenus as well] */ #nav li { /*great place to use a background image as a divider*/ display:block; list-style:none; position:relative; float:left; } #subMenusContainer li{ list-style: none; } /* main menu ul or ol elment */ #nav{ display:block; position: absolute; list-style:none; margin:0 0 0 0; z-index: 5; text-align: center; display:block; } #subMenusContainer{ display:block; position:absolute; top:0; left:0; width:100%; height:0; overflow:visible; z-index:1000000000; } /* --------------------------[ The below is just for non-javscript users ]--------------------------*/ #nav li li{ float:none; } #nav li li a{ /* Just submenu links*/ position:relative; float:none; } #nav li ul { /* second-level lists */ position: absolute; width: 11em; margin-left: -1000em; /* using left instead of display to hide menus because display: none isn't read by screen readers */ margin-top:2.2em; } /* third-and-above-level lists */ #nav li ul ul { margin: -1em 0 0 -1000em; } #nav li:hover ul ul margin-left: -1000em; } /* lists nested under hovered list items */ #nav li:hover ul{ margin-left: 0; } #nav li li:hover ul { margin-left: 10em; margin-top:-2.5em;} /* extra positioning rules for limited noscript keyboard accessibility */ #nav li a:focus + ul { margin-left: 0; margin-top:2.2em; } #nav li li a:focus + ul { left:0; margin-left: 1010em; margin-top:-2.2em;} #nav li li a:focus {left:0; margin-left:1000em; width:10em; margin-top:0;} #nav li li li a:focus {left:0; margin-left: 2010em; width: 10em; margin-top:-1em;} #nav li:hover a:focus{ margin-left: 0; } #nav li li:hover a:focus + ul { margin-left: 10em; } Hi, My code: Code: <div style="width: 100px;"><table style="border-collapse: collapse;" border="0" cellpadding="4" cellspacing="0"> <tbody><tr> <td> <table border="0" cellpadding="0" cellspacing="0"> <tbody><tr> <td> <code><span style="color: rgb(0, 0, 0);"> <span style="color: rgb(0, 0, 187);">$username </span><span style="color: rgb(0, 119, 0);">= </span><span style="color: rgb(0, 0, 187);">$_POST</span><span style="color: rgb(0, 119, 0);">[</span><span style="color: rgb(221, 0, 0);">"username"</span><span style="color: rgb(0, 119, 0);">]; <br></span><span style="color: rgb(0, 0, 187);">$password </span><span style="color: rgb(0, 119, 0);">= </span><span style="color: rgb(0, 0, 187);">$_POST</span><span style="color: rgb(0, 119, 0);">[</span><span style="color: rgb(221, 0, 0);">"password"</span><span style="color: rgb(0, 119, 0);">]; <br></span><span style="color: rgb(0, 0, 187);">$result </span><span style="color: rgb(0, 119, 0);">= </span><span style="color: rgb(0, 0, 187);">mysql_query</span><span style="color: rgb(0, 119, 0);">(</span><span style="color: rgb(221, 0, 0);">"SELECT * FROM members WHERE username = '$username' AND password = '$password';"</span><span style="color: rgb(0, 119, 0);">);</span> </span> </code><br> </td> </tr> </tbody></table> </td> </tr> </tbody></table></div> I have a DIV tag around the code which has style="width: 100px;" but for some reason the width is A LOT bigger. How to make it so that it will wordwrap? Problem: I have an image floated right, but my UL list appears below the image instead of next to it. I can get all text to wrap around my images except UL lists.. I have the image in a p tag & my UL list would show below it anyway .... The long way i think would be to place the image & UL list into 2 seperate divs like: 1) <div class="imgRight"><img>xxx/></div> use css to float right 2) div class="ulLeft"><ul>xxx</ul></div> use css to float left I have alot of pages with different size images & UL lists so im looking for the easy way out. here is my html <p><img class="floatRight" alt="" align="right" width="281" height="427" p="" src="...images/Photo_01.jpg" /></p> <p>SCQS Quantity Surveyors can provide full Estimating and Tendering solutions to all our clients, including Main Contractors, Sub-Contractors and Private Clients. Our coverage includes a wide variety of areas including residential, commercial, industrial, sports & recreation facilities, retail facilities and hotels etc...</p> <p>The services which we provide our clients with includes:</p> <h2>Estimating & Tendering for Main Contractors & Sub-Contractors</h2> <ul> <li>The Preparation and Submission of Competitive Tenders for Building Main Contractors and Sub-contractors for all Types & Value Ranges of Projects</li> <li>Negotiating and Tenders / Contracts with the Client's Quantity Surveyor for Agreement & Awarding of Contracts</li> </ul> <h2>Estimating & Tendering for Private Clients</h2> <ul> <li>Pre-Tender Price Estimating</li> <li>Advise on Tendering Procedures, Contractual Arrangements and Select Tenderers</li> <li>Preparation of Tender / Negotiation Documentation – (i.e. Bills of Quantities, Schedules of Rates and Contracts etc...)</li> <li>Tender Analysis</li> <li>Examination and Reporting on Tenders Received from Contractors</li> </ul> any help on the best possible way would be appreciated semaus First of all hope this is the right forum. I need to know how to wrap text so it flows around this twitter widget that I would like to place on my site in the center of page http://knowingabout.co.uk/bestinhulme/index.html. I have tried the usual way for an image but it doesnt seem to work. Below is a image and below that the actual code. <div id="twtr-search-widget"></div> <script src="http://widgets.twimg.com/j/1/widget.js"></script> <link href="http://widgets.twimg.com/j/1/widget.css" type="text/css" rel="stylesheet"> <script> new TWTR.Widget({ search: 'Manchester', id: 'twtr-search-widget', loop: true, title: 'Who\'s tweeting about...', subject: 'Manchester', width: 250, height: 280, theme: { shell: { background: '#887640', color: '#ffffff' }, tweets: { background: '#f3d2a5', color: '#444444', links: '#1985b5' } } }).render().start(); </script> Thx in advance Hello, I am trying to display an image on the bottom left corner of the text. The text is dynamic. Below is a sample code(the text below is going to be dynamic). Please Advice? <style> .imgst { float:left; text-align:right; overflow:hidden; } </style> <table width="471" border="0" cellspacing="0" cellpadding="0"> <tr><td> <span class="imgst"><img align="baseline" align="top" src="/images/adams.jpg" /></span> lwekjrwekj rweklrjwerl lwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerllwekjrwekj rweklrjwerl </td> </tr> </table> Hi, I'm working on an ecommerce website, my problem is that I cannot make some text in a cell wrap. Here's the details: The text in this particular cell is page numbers, and it is dynamically generated, so it changes depending on what the user selects in the shop. For example, if they are viewing a category that only has a couple pages of product, it's fine. But if they are viewing a category that has a couple hundred pages of product, the page number goes out horizontal in a straight line, and obviously causes some serious horizontal scrolling. I've tried setting a fixed width for the cell both in the <td> with width="whatever" and that didn't work, I tried setting it in the stylesheet with CSS but it still breaks the table. I just want it to wrap down a line when it gets to a certain width. Any ideas? Hi All... I am having problems with a page...the table displays on one page, but not on another page...and all I've done is c + p from the bad page into the working one and voila! It went bad this is when viewed in Firefox... Here's the page that works...the middle column keeps the text all the way down the page: http://www.ediblog.com/audjblog.htm Here's the page where the table ends, but the text continues down the page: http://www.ediblog.com/rae.htm Can someone tell me what I'm doing wrong here?? wacko.gif I'm very confused... Thanks take a loot at my template. i need help with the glitch. hover your mouse below the template need payment,about us etc. please help http://fortressht@lowpricehighdef.co...00Aaabbbb.html |
|||||||