HTML - Word-wrap In Span Tag

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; }

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

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!!!

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 &amp; recreation facilities, retail facilities and hotels etc...</p>
<p>The services which we provide our clients with includes:</p>
<h2>Estimating &amp; Tendering for Main Contractors &amp; Sub-Contractors</h2>
<ul>
<li>The Preparation and Submission of Competitive Tenders for Building Main Contractors&nbsp;and Sub-contractors for&nbsp;all Types &amp; Value Ranges of Projects</li>
<li>Negotiating and Tenders&nbsp;/ Contracts with the Client's Quantity Surveyor for Agreement &amp; Awarding of Contracts</li>
</ul>
<h2>Estimating &amp; 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 &ndash; (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

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?

I 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>

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>

What exactly do the Span and Div tags do? I've read definitions on the web: "defines a block of text," etc., but I don't see any examples of what the difference is from normal text to text that is used using the span and div tags. Could someone provide any examples?

Thanks, Brad

Does anybody know how to get the grab hand image for the onmouseover event for spans?

Hi,

I have build up a mouseover functionality that shows a light gray boks around the 4 categories on the frontpage on http://www.jjas.dk. It works perfectly under all the browsers except IE6 and IE7. In this browsers I can only click on the text placed right from the picture. But when I try to click on the picture or the picture related text, nothing happens.

Now, after I had used 5 days finding a solution I'm giving up. There is nothing wrong with the code at all, so why is it, that it won't work under Internet Explorer?

This is the code I'm using:

HTML
Code:

<div class="row">
  <ul>
    <li>
      <a href="/produkter-og-loesninger/komponenter.aspx">
        <span class="picture">
          <img src="/media/3899/komponent-teaser.jpg" alt="Agenturprodukter" />
          <span class="content">
            <strong>Agenturprodukter</strong>
            <small>Vi er forhandler af flere produkter. </small>
          </span>
        </span>
        <span class="right_content">
          <h2>Handelsvarer</h2>
          <small>Vi forhandler passive og perifere komponenter. 
      Kabinetter, keyboards, displaysystemer m.v.</small>
        </span>
      </a>
    </li>
  </ul>
</div>

CSS
Code:

#top_section .row {
	float:left;
	width:948px;
}
#top_section .row ul {
	float:left;
	width:948px;
	list-style:none
}
#top_section .row li {
	float:left;
	width:474px;
}
#top_section .row li a {
	float:left;
	width:440px;
	padding:10px;
	height:145px;
	text-decoration:none;
	cursor:pointer;
	border:1px solid #eeeeee;
}
#top_section .row li a:hover {
	float:left;
	width:440px;
	height:145px;
	background:#dddddd;
	border:1px solid #d3d2d2;
}
#top_section .row li a .picture {
	float:left;
	width:220px;
	position:relative
}
#top_section .row li a .picture img {
	float:left;
	z-index: -1;
}

#top_section .row li a .picture .content {
	float:left;
	width:210px;
	background:url(../common/images/picture_content_bg.png) repeat-x 0 0;
	padding:5px 0 0 10px;
	position:absolute;
	bottom:0;
	left:0;
	height:41px
}
#top_section .row li a .picture .content strong {
	float:left;
	width:210px;
	font:bold 12px/14px Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
}
#top_section .row li a .picture .content small {
	float:left;
	width:210px;
	font:11px/13px Verdana, Arial, Helvetica, sans-serif;
	color:#fff;
	padding:3px 0 5px
}
#top_section .row li a .right_content {
	float:left;
	width:200px;
	padding-left:20px
}
#top_section .row li a .right_content h2 {
	float:left;
	width:200px;
	font:bold 18px/20px Arial, Helvetica, sans-serif;
	color:#336699;
}
#top_section .row li a .right_content small {
	float:left;
	width:200px;
	font:12px/17px Verdana, Arial, Helvetica, sans-serif;
	color:#666;
	padding-top:3px
}

You can see it live on:
http://www.jjas.dk/ (right under the slideshow)

I really hope someone out there can help me with my problem. I guess it's pretty easy, though I haven't found the easy part yet


Kind regards,
Niels Kristiansen

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?

Hi all, I'd like some help with the coding so that I can wrap text around embedded video. I'm not a genious at HTML so if you could make it easy to understand that would be great. Thanks in advance.

Hey I'm trying to have this text surround this flash player but I can't get it to work, How can I do it?

::text::
My Chemical Romance Nine Inch Nails The Cure Taking Back Sunday The Used Emery Breaking Benjamin 30 Seconds To Mars The Spill Canvas Matchbook Romance Matchbox 20 Puddle of Mudd A Perfect Circle Seether Hoobastank Muse Atreyu Three Days Grace 3 Doors Down Audioslave Billy Talent Bloc Party Bloodhound Gang Blur Bush Cake Chevelle Coldplay Creed Death Cab For Cutie Deftones Faith No More Flyleaf Foo Fighters Garbage Goo Goo Dolls Green Day Incubus Interpol Jimmy Eat World Lifehouse Linkin Park Lostprophets Marilyn Manson Nickelback Nirvana Oasis Papa Roach Pearl Jam Placebo Queens Of The Stone Age REM Radiohead Rage Against The Machine Red Hot Chili Peppers Snow Patrol Soundgarden Staind Stone Temple Pilots System of a Down ♥ The Cranberries The Killers ♥ The Mars Volta The Offspring The Smashing Pumpkins The White Stripes U2 Weezer Yeah Yeah Yeahs Many More.. Emo Rock Alternative Gothic Screamo Pop

:layer::
HTML Code:

 <p style="visibility:visible;"><object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="110" width="265" style="visibility:visible;width:265px;height:110px;" align="middle" border="0" data="http://assets.myflashfetish.com/swf/mp3/mff-pill.swf">
  <param name="allowScriptAccess" value="never" />
  <param name="allowNetworking" value="internal" />
  <param name="movie" value="http://assets.myflashfetish.com/swf/mp3/mff-pill.swf" />
  <param name="quality" value="high" />
  <param name="wmode" value="transparent" />
  <param name="flashvars" value="myid=13933683&path=2008/10/12&mycolor=FFFFFF&mycolor2=FFFFFF&mycolor3=c2878f&autoplay=false&rand=0&f=4&vol=100&pat=0&grad=false" />
</object></p>

HI all,

Pretty new to web design and I was having some trouble centering my columns, or rather having my columns evenly space between each other in my wrap and from my warp borders.

Also, I'm using a background image as my wrap border and for some reason there's a gap at the top and bottom of my pages.

HMTL attached

Any ideas?

Thanks