Results 1 to 4 of 4

Thread: no word-wrapping!?

  1. #1
    Join Date
    Oct 2007
    Location
    Germany, Berlin
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default no word-wrapping!?

    Am I too tired?
    I want to make a horizontally scrolling image gallery like it is used sometimes in myspace.com. I just started writing the css code but it doesn't work. It has to scroll horizontally and not vertically!
    Code:
    a, img {
    	margin:0;
    	padding:0;
    	border:none;
    	display:inline;
    	float:left; }
    #gallery {
    	position:absolute;
    	margin:20px 0 0 0;
    	width:99%;
    	height:500px;
    	border:1px solid #000;
    	overflow:auto;
    	background:#bbb; }
    #gallery #scrollbox {
    	height:500px; }
    #gallery #images {
    	heigth:500px;
    	border:1px solid green; }
    ...
    <div id="gallery">
    	<div id="scrollbox">
    		<div id="images">
    [images generated by PHP]
    		</div>
    	</div>
    </div>
    Anybody an idea? Please help.

    greetings
    MAX

  2. #2
    Join Date
    Oct 2007
    Location
    Germany, Berlin
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Help!!!

    no answers?!
    Help!
    *push*

  3. #3
    Join Date
    Oct 2007
    Location
    Germany, Berlin
    Posts
    41
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Hey, this is serious. It doesn't work and I need help. That cannot be that difficult. I only want to have no word-wrapping in a div so that one image is next to the other in one line. Scrolling, Clicking, Dragging will then be done with Javascript.
    HELP!!!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    Many of the considerations here are interdependent.

    One can use the deprecated <nobr></nobr> tag around content that you don't want to have wrap:

    HTML Code:
    <div><nobr>
    non-wrapping content goes here
    </nobr>
    </div>
    But some folks don't want to use deprecated tags, and some browsers may not follow it. You can set the style of the division, using the white-space style property set to nowrap (style should be set in the stylesheet section, shown here inline):

    HTML Code:
    <div style="white-space:nowrap;"><nobr>
    non-wrapping content goes here
    </nobr>
    </div>
    I left the nobr tags in to support older browsers. You can fairly safely take them out. If you do, test in your target browsers.

    If you have any elements (div, p, or br, for example) that cause line breaks located inside the division though, there will still be line breaks.

    Now, all of this assumes that images are display inline. That is their default display property. But, if this is changed anywhere for the images that are in this division, it still won't work. Only worry about this last bit if you are still having problems.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •