• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1169
  • Last Modified:

HTML DIV CSS

Would it be possible to move the bullet points on the site http://theonlinebeatz.com/test3.html little lower to another DIV section <div id="middle2">.  This is the portion I want to move


<!-- Bullets working o.k -->
<div class="ws_bullets"><div>
<a href="#wows1" title="80" onclick="new_win(1)" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows2" title="Disco ball" onclick="new_win(2)"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows3" title="latin" onclick="new_win(3)"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows4" title="Lips" onclick="new_win(4)"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows5" title="Merengue" onclick="new_win(4)"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows6" title="Music" onclick="new_win(6)"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows7" title="rock" onclick="new_win(7)"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows8" title="rockband" onclick="new_win(8)"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows9" title="salsa" onclick="new_win(9)"><img src="data1/tooltips/salsa.jpg" alt="salsa"/></a>
 
</div>

Open in new window


I been trying but each time I do I brake the page.


 screenshot
below is the code of the site.

<!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>
 
<meta http-equiv="Pragma" CONTENT="no-cache"; charset=iso-8859-1" />
      <title>TheOnlineBeatz</title>
      <link rel="stylesheet" type="text/css" href="style3.css">
 
<script language="JavaScript">
var links = new Array("http://theonlinebeatz.com/Music/IBachata.html","http://theonlinebeatz.com/Music/Isalsa.html",
                        "http://theonlinebeatz.com/Music/I80.html","http://theonlinebeatz.com/Music/Iclub.html",
                        "http://theonlinebeatz.com/music/Isoul.html","http://theonlinebeatz.com/Music/Ihiphop.html",
                        "http://Theonlinebeatz.com/Music/Iclasic.html", "http://theonlinebeatz.com/Music/IDisco.html",
                        "http://theonlinebeatz.com/Music/Ireggeaton.html","http://theonlinebeatz.com/Music/IPOP.html",
                        "http://theonlinebeatz.com/Music/ISPanishRock.html","http://theonlinebeatz.com/Music/IFreeStyle.html");
function new_win(pagetype)
{
    myWindow = window.open(links[pagetype-1],"Playlist","width=300,height=210,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes,resizable=no");
     myWindow.focus();
}
 
</script>
 
 
<title>WOWSlider generated by WOWSlider.com</title>
 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<meta name="keywords" content="WOW Slider, jQuery Carousel Light, jQuery Carousel Demo" />
 
<meta name="description" content="WOWSlider created with WOW Slider, a free wizard program that helps you easily generate beautiful web slideshow" />
 
<!-- Start WOWSlider.com HEAD section -->
 
<link rel="stylesheet" type="text/css" href="engine1/style.css"/>
 
<style type="text/css">a#vlb{display:none}</style>
 
<script type="text/javascript" src="engine1/jquery.js"></script>
 
<script type="text/javascript" src="engine1/wowslider.js"></script>
 
<!-- End WOWSlider.com HEAD section -->
 
</head>
 
<body>
<div id="container">
<div id="menu">
 
<ul>
          <li id="m01"><a href="http://www.TheonlineBeatz.com">Home</a></li>
            <li id="m02"><a href="http://www.TheonlineBeatz.com/Playlist.html">PlayList</a></li>
            <li id="m03"><a href="http://www.TheonlineBeatz.com/ListenLive.html">Listen Live</a></li>
            <li id="m04"><a href="http://www.TheonlineBeatz.com/Contactus.html">Contact Us</a></li>
            <li id="m05"><a href="http://www.TheonlineBeatz.com/Aboutus.html">About Us</a></li>
</ul>
 
</div>
<div id="header">
<div id="dj" align="center">
 
 
<!-- Start WOWSlider.com BODY section -->
<!-- Center big pictures click not working -->
 
<div id="wowslider-container1">
 
<div class="ws_images">
 
<span onclick="new_win(1)"><img style="cursor:pointer" src="data1/images/80.jpg" alt="80" title="80" id="wows1"/ ></span>
<span onclick="new_win(2)"><img style="cursor:pointer" src="data1/images/disco_ball.jpg" alt="Disco ball" title="Disco ball" id="wows2"/></span>
<span onclick="new_win(3)"><img style="cursor:pointer" src="data1/images/latin.jpg" alt="latin" title="latin" id="wows3"/></span>
<span onclick="new_win(4)"><img style="cursor:pointer" src="data1/images/lips.jpg" alt="Lips" title="Lips" id="wows4"/></span>
<span onclick="new_win(5)"><img style="cursor:pointer" src="data1/images/merengue.jpg" alt="Merengue" title="Merengue" id="wows5"/></span>
<span onclick="new_win(6)"><img style="cursor:pointer" src="data1/images/music.jpg" alt="Music" title="Music" id="wows6"/></span>
<span onclick="new_win(7)"><img style="cursor:pointer" src="data1/images/rock.jpg" alt="rock" title="rock" id="wows7"/></span>
<span onclick="new_win(8)"><img style="cursor:pointer" src="data1/images/rockband.jpg" alt="rockband" title="rockband" id="wows8"/></span>
<span onclick="new_win(9)"><img style="cursor:pointer" src="data1/images/Salsa.jpg" alt="Salsa" title="salsa" id="wows9"/></span>
</div>
<br>
<br>
 
 
 
<!-- Bullets working o.k -->
<div class="ws_bullets"><div>
<a href="#wows1" title="80" onclick="new_win(1)" /><img src="data1/tooltips/80.jpg" alt="80"/></a>
<a href="#wows2" title="Disco ball" onclick="new_win(2)"><img src="data1/tooltips/disco_ball.jpg" alt="Disco ball"/></a>
<a href="#wows3" title="latin" onclick="new_win(3)"><img src="data1/tooltips/latin.jpg" alt="latin"/></a>
<a href="#wows4" title="Lips" onclick="new_win(4)"><img src="data1/tooltips/lips.jpg" alt="Lips"/></a>
<a href="#wows5" title="Merengue" onclick="new_win(4)"><img src="data1/tooltips/merengue.jpg" alt="Merengue"/></a>
<a href="#wows6" title="Music" onclick="new_win(6)"><img src="data1/tooltips/music.jpg" alt="Music"/></a>
<a href="#wows7" title="rock" onclick="new_win(7)"><img src="data1/tooltips/rock.jpg" alt="rock"/></a>
<a href="#wows8" title="rockband" onclick="new_win(8)"><img src="data1/tooltips/rockband.jpg" alt="rockband"/></a>
<a href="#wows9" title="salsa" onclick="new_win(9)"><img src="data1/tooltips/salsa.jpg" alt="salsa"/></a>
 
</div>
</div>
<a style="display:none" href="http://wowslider.com">jQuery Carousel Tabs by WOWSlider.com v1.9</a>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="engine1/script.js"></script>
 
<!-- End WOWSlider.com BODY section -->
 
 
 
</div>
<div class="clear"></div>
</div>
 
<div id="middle"></div>
<div id="middle2"></div>
 
<div id="footer"><p></div>
</div>
</body>
</html>

0
Zirwo01
Asked:
Zirwo01
1 Solution
 
njain1985Commented:
Dear Author,

The simplest and the best tool available for testing front-end development is an extension on firefox
mozilla called firebug. You should install it on your firefox. You would notice that a black and white bug will appear on the bottom-right corner of your browser after installation. On installation, click the firebug icon on the bottom-right corner of your firefox browser screen and modify your html, css, javascript via the window that will appear / divide your screen into 2 on firebug icon click. This shall help you massively on seeing the changes on code-editing without actual editing of your codes. Try it, its available for download on https://addons.mozilla.org/en-US/firefox/addon/firebug/?application=firefox&id=1843
0
 
LZ1Commented:
In looking at the bullets and the construction of the slide show, it seems that the bullets must be in the same container as the images. Otherwise you'll break it, as you've already found out.

What you could do and I have tried it in FF, however it did not work as expected. You could move your bullets to the <div id="middle2"> and then adjust your CSS by taking away the #wowslider-container1 in your declarations.

So this:
 
#wowslider-container1 .ws_bullets {
    float: left;
    font-size: 0;
    padding: 10px;
    position: absolute;
    z-index: 70;
}

Open in new window


Becomes this:
 
.ws_bullets {
    float: left;
    font-size: 0;
    padding: 10px;
    position: absolute;
    z-index: 70;
}

Open in new window


When I did this though, the slide show did not work at all. My guess from there is that it's a JS issue that would need to be revised as well.
0
 
Zirwo01Author Commented:
This worked. with little more tweeking I was able to make it look good.

Thanks!

se results

http://theonlinebeatz.com/test5.html


.ws_bullets {
    float: left;
    font-size: 0;
    padding: 0px;
    position: absolute;
    z-index: 50;
} 

Open in new window


0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now