CSS Help!

[Nathan]

So I'm having some problems here.

 

http://Digitize Design.net/pm/

Username: nathan

Password: test123

 

As you can see the project boxes fall under each other. I need them to go 3 accross then have a line break and continue that way for as many projects as there are. Any suggestions?

[__Darknite]

why not use divs?

 

<div class="project_wrapper">

    <div class="project">
    </div>

    <div class="project">
    </div>

    <div class="project">
    </div>  

</div>

 

The projects class would be float:lefts with clear:none. The Project_Wrapper would be float:left with clear:both.

 

Hope that helps

[Nathan]

I'm extremely new to CSS and HTML so trying to learn. I will give that a try, I thought I already have divs in there.

[Nathan]

I've tried the suggestions, still no luck at all, any chance you would want to take a look?

footer.php

front.css

header.php

projects.php

[SpikeTheLobster]

Your while loop's screwed in projects.php.

 

If you want them three across, you'll need to do something like a stepped FOR loop, taking them three at a time ("number of rows div 3" times) or a FOR inside a while (though it'll be weird) or a complex IF with a manual counter (which is a bit old-school but works and is sooooo easy to read).

 

Effectively something like this (which is only one way of doing it):

 

while the current display row number < total number of rows

if there is a row of 3 to show

show three from current display row number

increment current display row number by 3

elseif there are 2

show those 2

increment current display row number by 2 (or 3, whatever makes it bigger than the total so the loop ends)

elseif

show the one remaining

increment current display row number by 1 (or 2 or 3, whatever makes it bigger than the total so the loop ends)

end if

end loop

 

 

Or alternatively:

 

get number of rows returned MOD 3; (call it leftovers)

get number of rows returned DIV 3; (call it cycles)

FOR cycle times

show a line of three projects (at row numbers cycle*3, cycle*3+1, cycle*3+2 (assuming it starts at 0))

add a line break

END loop

FOR leftovers times

show one project and make sure there's no line break

END loop

 

Hope it helps. Note that it's not in PHP because I only taught myself the language in an hour on Tuesday and it's probably less confusing (for you!) for me to write in pseudocode than try to do real PHP.

Edited May 26, 2012 by SpikeTheLobster

[Nathan]

Got it all cleaned up and working now thanks!

[SpikeTheLobster]

Oooh, looks very swish now.

 

What did you change, by the way? Just wondering whether I get to feel warm and fuzzy or if you did things a completely different way!

[Nathan]

Changed the css to float left and had to modify the divs slightly.

 

Now on to: https://forums.prodjex.com/topic/3113-basecamp-clone/?do=findComment&comment=13889

[Microsuck]

It looks very nice! Great work on this, Nathan!