Jump to content


Photo

Trying to create a grid of divs


  • Please log in to reply
10 replies to this topic

#1 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 17 December 2017 - 06:49 PM

Here is the link:  

 

http://courtsideindi...ag/aaron-henry/

 

On the page could be instances ranging anywhere from 1 to 9, getting information from a database.  I'd like them to create a grid of 3 columns across, each row as tall as the tallest instance.  This is for a standard sized web page.  (On a phone, it should be just one instance for per row.)

 

I have the container set up as display:  table and each DIV set up as display:  table-cell.  It's not working (of course).

 

Here is the PHP:

echo '<div class="review_container">';

$query = "SELECT * FROM a_players_reviews
	WHERE CONCAT(nameFirst,' ', nameLast) = '".$slug."' order by id desc limit 9";

$results = mysql_query($query);
echo mysql_error();
while($review = mysql_fetch_assoc($results)) {

$date = date("F j, Y", strtotime($review['time']));

	 echo '<div class="review_column">';
	 	
	 	// Event, game opponent or just a general assessment
	 		
	 		// This is if it's a single game
	 		if (isset($review['opp_school'])) {
				echo '<span class="opponent">vs.  ';
		
				if (isset($review['opp_city'])) {	 
					echo  $review['opp_city'] . ' (';
					}
				echo $review['opp_school'];
					if (isset($review['opp_city'])) {
						echo ')';
					}
				echo '</span>';
				}	
					
			// If this is about an event		 		
			elseif (isset ($review['event'])) {
				echo '<span class="opponent">Event:  ' . $review['event'] . '</span>';	
				}
			// Just a general assessment	
			else {
				echo '<span class="opponent">Assessment</span>';
				}	
	 			
	// Finish up with the date and the review
	echo '<span class="review_date"><b>' . $date . '</b></span>
	<span class="review">' . $review['review'] . '</span>
	</div>';

}

echo '</div>';
echo '<div class="clear"></div>';

Here is the CSS:

.review_container {
	display: table;
	margin-left: 20px;
	
}


.review_container div {
	float: left;
	width: 33%;
	padding: 5px;
	border-right: 1px;
}

.review_container span {
	display: block;
}

.review_column {
	display: table-cell !important;

}
 
 .review_date {
 	color: #ccc;
 }
 
 .opponent {
 	font-size: 18px;
 	font-weight: bold;
 }

Edited by Jim R, 17 December 2017 - 06:50 PM.


#2 requinix

requinix
  • Administrators
  • Maddening Administrator
  • 9,558 posts
  • LocationWA

Posted 18 December 2017 - 02:29 AM

Ever used Bootstrap? Seen how its grid system works? You have something like that already: .td-pb-row and .td-pb-span1-12.

Put each "row" of 3 in a .td-pb-row and each "cell" in the right .td-pb-span* such that there's 3 per row.

And forget most of that CSS you've written. Don't need it.
The Reimann Zeta Function Trolley Problem | "Summer is when I, the great ice fairy, can show my true power!"

#3 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 18 December 2017 - 05:59 AM

Ever used Bootstrap? Seen how its grid system works? You have something like that already: .td-pb-row and .td-pb-span1-12.

Put each "row" of 3 in a .td-pb-row and each "cell" in the right .td-pb-span* such that there's 3 per row.

And forget most of that CSS you've written. Don't need it.

 

I'll dig more into bootstrap, but as I have implemented header code and scripts, it's created a conflict with images.  

 

 

The CSS I used came from W3school.com.  Are you saying there is no way to make it work via regular CSS?



#4 requinix

requinix
  • Administrators
  • Maddening Administrator
  • 9,558 posts
  • LocationWA

Posted 18 December 2017 - 06:15 AM

This is "regular CSS".
The Reimann Zeta Function Trolley Problem | "Summer is when I, the great ice fairy, can show my true power!"

#5 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 18 December 2017 - 06:18 AM

Yeah, but I have to link to upload directories of files and/or place >scripts< in locations which will get overwritten any time I update the theme.  



#6 requinix

requinix
  • Administrators
  • Maddening Administrator
  • 9,558 posts
  • LocationWA

Posted 18 December 2017 - 06:42 AM

I have no idea what you're talking about.

Your existing CSS has rules you can make use of to get the result you want. What is the problem?
The Reimann Zeta Function Trolley Problem | "Summer is when I, the great ice fairy, can show my true power!"

#7 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 18 December 2017 - 06:43 AM

Am I going to have to account for rows?  Because I'm not really hard coding how many rows there will be.  It could be one.  I could be three. 


Edited by Jim R, 18 December 2017 - 06:45 AM.


#8 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 18 December 2017 - 06:44 AM

I have no idea what you're talking about.

Your existing CSS has rules you can make use of to get the result you want. What is the problem?

 

Bootstrap are files I have to upload or link to.  



#9 requinix

requinix
  • Administrators
  • Maddening Administrator
  • 9,558 posts
  • LocationWA

Posted 18 December 2017 - 07:50 AM

Forget I mentioned it. You clearly didn't notice the "you have something like that already" and fixated on the "Bootstrap", which apparently drove your imagination wild - and in entirely the wrong direction.

No. You do not have to account for the rows in the way you're thinking. Yes, you do have to account for the rows in the sense that you said you wanted three per row normally so your markup should resemble that.
<div class="the class that does rows">
	<div class="the class that does a cell">...</div>
	<div class="the class that does a cell">...</div>
	<div class="the class that does a cell">...</div>
</div>
Repeat for all the rows you need.
The Reimann Zeta Function Trolley Problem | "Summer is when I, the great ice fairy, can show my true power!"

#10 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 18 December 2017 - 02:54 PM

Ok, but even at that, I don't have fixed number of rows or even columns.  I'll have over 1,000 pages like that, created dynamically.  Most will have one thing written about them in that area.  Others anywhere from two to nine.  I'm not hardcoding all the divs or the rows.

 

I'd rather not give them a fixed height.  



#11 Jim R

Jim R
  • Members
  • PipPipPip
  • Advanced Member
  • 576 posts

Posted 18 December 2017 - 08:22 PM

I found this, and it works:

 

.review_container {

display: table;
margin-left: 20px;
display: flex;
flex-wrap: wrap;
 
}





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users