Center scroll box

  • Deathmachine
  • Born
  • Born
  • Deathmachine
  • Posts: 3

Post 3+ Months Ago

hey, i have a scroll box, i just wondered how i make it go into the center, cos at the moment it sticks to the left. i can make the text align to center, but not the box. The stuff in the box is some random text i got off the other topic about scroll boxes because i was trying to use its code.
Code: [ Select ]
<div STYLE="
border-style: solid;
border-width: 2px;
width:300;
height:200;
overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
  <img src="http://www.ozzu.com/templates/smartDark/images/top02.gif">
  <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit√° de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </p>
  <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
</div>
  1. <div STYLE="
  2. border-style: solid;
  3. border-width: 2px;
  4. width:300;
  5. height:200;
  6. overflow: auto;">
  7. <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem veleum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel willum lunombro dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. </p>
  8.   <img src="http://www.ozzu.com/templates/smartDark/images/top02.gif">
  9.   <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit√° de un nov lingua franca: on refusa continuar payar custosi traductores. It solmen va esser necessi far uniform grammatica, pronunciation e plu sommun paroles. </p>
  10.   <p>Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues. It va esser tam simplic quam Occidental: in fact, it va esser Occidental. A un Angleso it va semblar un simplificat Angles, quam un skeptic Cambridge amico dit me que Occidental es.</p>
  11. </div>
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

this should help you:

<shamelessplug> css centering tutorial </shamelessplug>

Only use the first method. Method 2 is really quite crap ;)
  • Deathmachine
  • Born
  • Born
  • Deathmachine
  • Posts: 3

Post 3+ Months Ago

Thankyou, you have been most helpful. My problem is solved.
  • Mas Sehguh
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1853

Post 3+ Months Ago

Just so you know rtm, you _can_ use a work-around for min-width in IE. The article linked below describes explicitly how to use it for min-height, but the same idea works for width. I am not sure whether it also solves that usability issue [1] mentioned on your page though.

http://www.greywyvern.com/code/min-height-hack.html
Also, you might want to do a search and replace in the tutorial, replacing "Chaeck" with "Check."

[1] It is actually an accessibility issue, because the content cannot be read at all by people with such small windows. Making a horizontal scroll bar appear turns it into a usability issue, because people whose windows are small now have to scroll back and forth for every line that they read, which is unlikely. Of course, the best action to take for improving the user's experience is not attempting to set the width of the page at all.

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 29 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.