Jump to content

Valid <nobr> alternative?


Recommended Posts

Hi.I'm building a site for a photographer. Instead of using frames to put pictures out, I am using a css-box with custom js-scrollbars. The problem is getting all the pictures on one horizontal line. I can achieve this by using the <nobr> which both IE and FF understands, but as soon as I try using the css-nowrap alternative, I am no longer able to scroll. CSS FOR THE BOX:

#gallery{	width: 70%;	border: dotted 1px #312b27;	height: 510px;	position: fixed;	top: 260px;	left: 12%;	overflow: auto;	background-color: #48413b;}

HTML

<div id='gallery' class='flexcroll'><nobr><img src='gfx/music/1/1.jpg' alt='' /><img src='gfx/music/1/2.jpg' alt='' /></div>

Any hint, answer or direction to a tutorial would be very much appreciated.Thanks in advance.

Link to post
Share on other sites

First, get rid of <nobr>. It's legacy markup at best, won't validate, and could lose support in the next version of any browser without warning.Maybe if you posted a link and/or explained a little more what effect you want and what you're actually getting. For starters, "all the pictures on one horizontal line" could mean aligned at the top or the bottom, and that will mean a different solution.Are the images guaranteed to be the same size or at least the same height?You could define a class for your images and play around with the position property and maybe the top or bottom coordinate, even the left coordinate if you knew in advance how wide these guys are. While you're there, you could give your images some margins so they don't bumptogether. I wonder what float:left might accomplish, if anything.Just throwing out some stuff.

Link to post
Share on other sites
First, get rid of <nobr>. It's legacy markup at best, won't validate, and could lose support in the next version of any browser without warning.Maybe if you posted a link and/or explained a little more what effect you want and what you're actually getting. For starters, "all the pictures on one horizontal line" could mean aligned at the top or the bottom, and that will mean a different solution.Are the images guaranteed to be the same size or at least the same height?You could define a class for your images and play around with the position property and maybe the top or bottom coordinate, even the left coordinate if you knew in advance how wide these guys are. While you're there, you could give your images some margins so they don't bumptogether. I wonder what float:left might accomplish, if anything.Just throwing out some stuff.
Thanks for responding so quickly. I have not published anything yet, since I am waiting for the webhotel to kick in, but I could try to explain a little better.The pictures is 500px high, just as the <div> i created. When I add photos in the <div> with the <img>-tag they only get posted vertically without the <nobr>-tag. You had some good suggestions there, and I will dive into the floating to check if that could take me any further.Thanks again :-)
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...