asked on

dhtml slider

I came across a slider on the following page: http://carpe.ambiprospect.com/slider/

I was playing with it and I got it to work (easy part), but I am having issues trying to position it. I would like it in the center of my page (with text on either side), but no matter what I do, it stays on the left.

Any ideas?

Thanks,

Ed

0h4crying0utloud

You can try wrapping it in a div that centers with css:

<div style="margin-left:auto;margin-right:auto"> ... </div>

kawas

ASKER

that didnt work.

0h4crying0utloud

You would probably have to dump the code then. :)

kawas

ASKER

THe code is available from the link. All i did was follow the directions on the site.

Of course, i tried adding your suggestion to the code as well.

But just to be sure, my html is below (modify the localhost part as appropriate):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
language="JavaScript"
src="http://localhost/slider.js" type="text/javascript" >
</script>
<link
href="http:/localhost/default.css"
rel="stylesheet"
type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<p>Slider</p>
<div style="margin-left:auto;margin-right:auto"> <div align="center" class="carpe_horizontal_slider_track">
<div class="carpe_slider_slit"> </div>
<div class="carpe_slider"
id="your_slider_id"
orientation="horizontal"
distance="100"
display="your_display_id"
style="left: 0px;"> </div>
<div class="carpe_slider_display_holder" >
<input class="carpe_slider_display"
id="your_display_id"
name="your_var_name"
type="text"
from="0"
to="284"
valuecount="284"
value="50"
readonly="true" />
</div>
</div>
</div>
</body>
</html>

0h4crying0utloud

It appears centered in IE and FF... i ididn't do anything to this code but add borders...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
language="JavaScript"
src="http://localhost/slider.js" type="text/javascript" >
</script>
<link
href="http:/localhost/default.css"
rel="stylesheet"
type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<p>Slider</p>
<div style="margin-left:auto;margin-right:auto; border:1px solid red;">
      <div align="center" class="carpe_horizontal_slider_track" style="border:1px solid red;">
            <div class="carpe_slider_slit"> </div>

            <div class="carpe_slider"
                              id="your_slider_id"
                              orientation="horizontal"
                              distance="100"
                              display="your_display_id"
                              style="left: 0px;"> </div>

            <div class="carpe_slider_display_holder" >
                  <input class="carpe_slider_display"
                              id="your_display_id"
                              name="your_var_name"
                              type="text"
                              from="0"
                              to="284"
                              valuecount="284"
                              value="50"
                              readonly="true" />
            </div>

      </div>
</div>
</body>
</html>

0h4crying0utloud

can you send the css?

kawas

ASKER

/*      Default stylesheet for the Carpe Slider
      By Tom Hermansson Snickars
      2005-12-17 version 1.5
      Copyright CARPE Design
      carpe.ambiprospect.com
*/
*.carpe_horizontal_slider_display_combo {
      clear: left;
      margin: 0;
}
*.carpe_vertical_slider_display_combo {
      float: left;
      margin: 0;
}
*.carpe_horizontal_slider_track {
      background-color: #bbb;
      color: #333;
      width: 120px;
      float: left;
      margin: 0;
      line-height: 0px;
      font-size: 0px;
      text-align: left;
      padding: 4px;
      border: 1px solid;
      border-color: #ddd #999 #999 #ddd;
}
*.carpe_vertical_slider_track {
      background-color: #bbb;
      color: #333;
      padding: 3px 6px 15px 6px;
      width: 24px;
      height: 100px;
      border: 1px solid;
      border-color: #ddd #999 #999 #ddd;
}
*.carpe_horizontal_slider_track *.carpe_slider_slit {
      background-color: #333;
      color: #ccc;
      width: 110px;
      height: 2px;
      margin: 4px 4px 2px 4px;
      line-height: 0px;
      position: absolute;
      z-index: 1;
      border: 1px solid;
      border-color: #999 #ddd #ddd #999;
}
*.carpe_vertical_slider_track *.carpe_slider_slit {
      background-color: #000;
      color: #333;
      width: 2px;
      height: 100px;
      position: absolute;
      margin: 4px 10px 4px 10px;
      padding: 4px 0 1px 0;
      line-height: 0px;
      font-size: 0;
      border: 1px solid;
      border-color: #666 #ccc #ccc #666;
}
*.carpe_horizontal_slider_track *.carpe_slider {
      width: 16px;
      background-color: #666;
      color: #333;
      position: relative;
      margin: 0;
      height: 8px;
      z-index: 1;
      line-height: 0px;
      font-size: 0px;
      text-align: left;
      border: 2px solid;
      border-color: #999 #333 #333 #999;
}
*.carpe_vertical_slider_track *.carpe_slider {
      width: 20px;
      background-color: #666;
      color: #333;
      position: relative;
      margin: 0;
      height: 8px;
      z-index: 1;
      line-height: 0px;
      font-size: 0px;
      text-align: left;
      border: 2px solid;
      border-color: #999 #333 #333 #999;
}
*.carpe_slider_display_holder {
      background-color: #bbb;
      color: #333;
      width: 34px;
      margin: 0;
      float: left;
      padding: 0 2px 0 0;
      height: 20px;
      text-align: right;
      border: 1px solid;
      border-color: #ddd #999 #999 #ddd;
}
.carpe_slider_display {
      background-color: #bbb;
      color: #333;
      padding: 3px 1px 0 0;
      width: 30px;
      text-align: right;
      font-size: 11px;
      line-height: 10px;
      font-family: verdana, arial, helvetica, sans-serif;
      font-weight: bold;
      border: 0;
      cursor: default;
}

kawas

ASKER

I should mention that i am using firefox (dont care about ie).

It still doesnt render properly.

Thanks for you help by the way

0h4crying0utloud

looks like if you give that outside div a width it centers ok...

<div style="width:150px;margin-left:auto;margin-right:auto; border:1px solid red;">
      <div align="center" class="carpe_horizontal_slider_track" style="border:1px solid red;">
            <div class="carpe_slider_slit"> </div>

            <div class="carpe_slider"
                              id="your_slider_id"
                              orientation="horizontal"
                              distance="100"
                              display="your_display_id"
                              style="left: 0px;"> </div>

            <div class="carpe_slider_display_holder" >
                  <input class="carpe_slider_display"
                              id="your_display_id"
                              name="your_var_name"
                              type="text"
                              from="0"
                              to="284"
                              valuecount="284"
                              value="50"
                              readonly="true" />
            </div>

      </div>
</div>

kawas

ASKER

Cool, it is centered. Now the layout is wonkey. Everything is supposed to be on a single line (if that makes sense).

kawas

ASKER

Sorry to be persistent, but using the following as a template, could you center it?
I cant using the style from above. SOrry for being so thick.
____________________________________________________________

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script
language="JavaScript"
src="http://carpe.ambiprospect.com/slider/scripts/slider.js" type="text/javascript" >
</script>
<link
href="http://carpe.ambiprospect.com/slider/styles/default.css"
rel="stylesheet"
type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<div class="carpe_horizontal_slider_track">
<div class="carpe_slider_slit"> </div>
<div class="carpe_slider"
id="your_slider_id"
orientation="horizontal"
distance="100"
display="your_display_id"
style="left: 0px;"> </div>
</div>
<div class="carpe_slider_display_holder" >
<input class="carpe_slider_display"
id="your_display_id"
name="your_var_name"
type="text"
from="0"
to="100"
valuecount="101"
value="0"
typelock="off" /></div>
</body>
</html>

0h4crying0utloud

this fixes the wonkieness:

<div style="width:200px;margin-left:auto;margin-right:auto;">

<div class="carpe_horizontal_slider_display_combo" >

<div align="center" class="carpe_horizontal_slider_track" >
<div class="carpe_slider_slit"> </div>

<div class="carpe_slider"
id="your_slider_id"
orientation="horizontal"
distance="100"
display="your_display_id"
style="left: 0px;"> </div>
</div>
<div class="carpe_slider_display_holder" >
<input class="carpe_slider_display"
id="your_display_id"
name="your_var_name"
type="text"
from="0"
to="284"
valuecount="284"
value="50"
readonly="true" />
</div>

</div>

</div>

ASKER CERTIFIED SOLUTION

0h4crying0utloud

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

0h4crying0utloud

That's it, I quit! hehe :) seems to work ok

kawas

ASKER

Thanks!