Whats wrong here please??? :(

[jokerfool]

When the images load I have the word next and prev above and below the text and the buttons for the sliders are together. How can I fix this please?

 

<div style="position: relative;"><!-- "previous slide" button -->
<div class="position"><a class="backward">prev</a> <!-- container for the slides -->
<div class="images"><!-- first slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image1.jpg" alt="" /></div>
<!-- second slide -->
<div style="display: block;"><img src="templates/tmpl/banner/images/image2.jpg" alt="" /></div>
<!-- third slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image3.jpg" alt="" /></div>
<!-- fourth slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image4.jpg" alt="" /></div>
<!-- fifth slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image5.jpg" alt="" /></div>
</div>
<!-- "next slide" button --> <a class="forward">next</a></div>
<div id="whitebg" class="clearfix"><!-- the tabs -->
<div class="slidetabs"><a href="#"></a> <a class="current" href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a></div>
<div id="playpause" class="clsfloatleft"><button class="play" onclick="J(".slidetabs").data("slideshow").play();"></button> <button class="pause" onclick="J(".slidetabs").data("slideshow").stop();"></button></div>
</div>
</div> 

[Muddy_Funster]

this is a CSS issue, not PHP.  Have you tried using display:inline-block?

[leitning]

What's the actual problem?

[salem80]

U need to move next up 

 

<div style="position: relative;"><!-- "previous slide" button -->
<div class="position"><a class="backward">prev</a> <!-- container for the slides -->
<!-- "next slide" button --> <a class="forward">next</a>
<div class="images"><!-- first slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image1.jpg" alt="" /></div>
<!-- second slide -->
<div style="display: block;"><img src="templates/tmpl/banner/images/image2.jpg" alt="" /></div>
<!-- third slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image3.jpg" alt="" /></div>
<!-- fourth slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image4.jpg" alt="" /></div>
<!-- fifth slide -->
<div style="display: none;"><img src="templates/tmpl/banner/images/image5.jpg" alt="" /></div>
</div>
</div>
<div id="whitebg" class="clearfix"><!-- the tabs -->
<div class="slidetabs"><a href="#"></a> <a class="current" href="#"></a> <a href="#"></a> <a href="#"></a> <a href="#"></a></div>
<div id="playpause" class="clsfloatleft"><button class="play" onclick="J(".slidetabs").data("slideshow").play();"></button> <button class="pause" onclick="J(".slidetabs").data("slideshow").stop();"></button></div>
</div>
</div>