PDA

View Full Version : Resolved Can't figure out how to position divs correctly



greens85
Jul 12th, 2010, 04:53 PM
Hi all,

I am having a slight problem with positioning with CSS.

I have a scroller, built like so:


<div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/>
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
?>
<div>
<div>
<div class="thumbnail">
<div align="center"><a href="company.php?companyname=<?php echo $string ?>">
<img src="<?=$fullurl?>/thumbnail.php?gd=2&amp;src=employers/logo/big/<?=$aqm[image]?>&amp;maxw=<?=$a18[width]?>" alt="<?=$aqm[companyname]?>" title="<?=$aqm[companyname]?>" class="noborder" /></a>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<br/>
<br/>
<?php
if($i==22){
echo '</div><div>';
}
$i++;
}
echo '</div>';
?>
</div>
</div>

and the appropriate CSS:


#newsticker-demo {
background:#FFFFFF;
font-size:12px;
float:right;
width:20%;
height:1988px;
padding-right:1%;
margin-right:1%;
border-right:1px solid #000000;
border-left:1px solid #000000;
border-bottom:1px solid #000000;
}

#newsticker-demo a { text-decoration:none; }
#newsticker-demo img { border: 2px solid #FFFFFF; }

.newsticker-jcarousellite { width:100%; margin-left:5px; margin-top:6px; height:1980px; display:block; }
.newsticker-jcarousellite .thumbnail { float:left; width:20%; border:2px solid #CCCCCC; width:90%; padding:3%; margin-left:4.3%; }

.clear { clear: both; }

The problem is when I run the code, the scroller content starts off the screen and scrolls into view. It doesn't do this in all the examples I have seen so I'm pretty sure it is a problem with my CSS and imparticular a positioning error, but I can't get to the bottom of it!

You can see the scroller here:

http://www.beta.educationvacancies.com/index.php

You will see after the while the logos scroll into view, but if possible I would like them there from the start.

I would be grateful for any advice/help on this.

Many thanks,

Greens85

skywalker2208
Jul 12th, 2010, 05:47 PM
Might be helpful to post the script you are using to create the effect. When I turn off javascript in my browser options the images start at the top. So I think this might be something with the script you are using.

greens85
Jul 12th, 2010, 05:53 PM
Might be helpful to post the script you are using to create the effect. When I turn off javascript in my browser options the images start at the top. So I think this might be something with the script you are using.

Hi Skywalker,

Thanks for the response.. no problem I thought it was the CSS but maybe not!


<script type="text/javascript">
$(document).ready(function() {
$('.newsticker-jcarousellite').cycle({
fx: 'scrollUp', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
speed: 5000,
timeout: 7000,
pause: 1,
});
});
</script>

Thats it... and it comes from this page:

http://jquery.malsup.com/cycle/begin.html

thanks,

Greens85

agxphoto
Jul 13th, 2010, 04:45 AM
I do not code php, but I counted the flow of division openings and closings in the OP;

I noticed that in one way of counting the openings and closings, there remained an unclosed division.

Maybe that is messing up division nesting.

In summary, I counted:
*in HTML only, ignoring php openings and closings of divisions: all DIV closed.
*in HTML and PHP, counting all openings and closings of DIVs, sequentially: one division remains open at the end.

I have attached a plain text (.TXT) file with my DIV count in it.
Hope this helps.

I do not know if those DIVs opened in PHP are somehow separate from the HTML DIVs; but, I find that losing track of my open DIVs is usually a source of styling problems for me in regular HTML.

If all of a sudden the styling looked crazy, sometimes it's because the browser didn't know where to put the code. Sometimes that's because of a messed up DIV or SPAN, like one that's open when it's supposed to be closed.

Good luck

greens85
Jul 13th, 2010, 10:46 AM
Hi all,

This actually turned out to be a really simple issue!

I had a <br/> tag in the div which was causing the problem:


<div id="newsticker-demo">
<div class="newsticker-jcarousellite">
<br/> <!-- THIS <BR/> TAG WAS CAUSING THE PROBLEMS
<?php
$query = mysql_query("SELECT * FROM employers WHERE featured = 'Yes' AND image != '' ORDER BY rand()");
$i=0;
//$query = mysql_query("SELECT * FROM employers WHERE f_emp_active = 'Yes' and image !='' ORDER BY rand()");
echo '<div>';
while ($aqm=mysql_fetch_array($query)){
$string = "$aqm[companyname]";
$string = str_replace (" ", "_", $string);
$string = strtolower($string);
?>

Thanks to everyone who replied!