HTML - Wrap A Link

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,

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?

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,

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&nbsp;</span><span style="color: rgb(0, 119, 0);">=&nbsp;</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&nbsp;</span><span style="color: rgb(0, 119, 0);">=&nbsp;</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&nbsp;</span><span style="color: rgb(0, 119, 0);">=&nbsp;</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&nbsp;*&nbsp;FROM&nbsp;members&nbsp;WHERE&nbsp;username&nbsp;=&nbsp;'$username'&nbsp;AND&nbsp;password&nbsp;=&nbsp;'$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?

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>

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

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,

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

Hi there,

I need some help with this page:



I can't get the "In this section:" link list to go to the right of the body text of the page and have the body text wrap around it.

I'm also having trouble getting all the different headings and paragraphs to work right -- even if I set the CSS to display:block; the different headings display as inline elements. To get around this I've had to assign them all a width of 860 px -- which I think might be contributing to the problem getting the link list to go to the right of the body text, but horizontally aligned with the top heading.

Thanks for any help you can give!

Michael

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>

I am currently having an issue where Firefox allows my images to wrap according to window size but IE puts them one by one down the page instead of putting images side by side according to window size if they will fit.

Example is that I have 5 images. 4 of the images are 350pixels X 400pixels and 1 image is 700pixels X 500pixels.

I have code that loops through and gets images for each section that is setup.
Then I am just displaying the image in 1 line of code which loops through and displays the images for each section.

I have 5 sections setup with the five images listed above. My code then displays the section images with links to the sections.

<a href="<%= lTemplateFileName %>"><%= (sectionMediaFile != null) ? sectionMediaFile : "" %></a>

Firefox puts images side by side and since the 700pixel image will only fit on 1 row it puts that 1 image and then the next row shows 2 images because they will fit on that row.

With IE using that code it displays each image 1 by 1 on seperate rows.

I want to be able to use 1 piece of code that will allow images to wrap depending if multiple images can fit on that a row.

I don't want to limit a <td> to a colspan and create a table out of it. I just want the images to display as many as it can fit on a window size and wrap the next images to the next row and so on and so on.

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.

Hi... I have two (hopefully simple) questions:

First, is there any way to make a table resize automatically to fit a browser window regardless of the size of the window when the table contains images? I know how to make the table fit the window using <width="85%">, but that only works to a certain point. What I would like to have the image resize itself as the table shrinks. Is this possible?

Also, How do I get text to wrap around an image. Like have the image in the upper left corner. Then the text would start at the top of the image directly to it's right and continue on to the bottom of the image. Then it would drop down below the image all the way to the images left edge. I hope I am asking this correctly.

Thanks in advance!

G'day guys,

This will probably be a simple one for you.

I have a table set to 150px, it has to be this width, and I need to have text indented in each cell. Trouble is, when the text wraps to the next line in the cell, it doesn't stay inline or indented.

How do I get the text to stay indented when it travels to the next line?

Thanks very much for any help you can give me.

Cheers,
Jamie