Page 1 of 1

Three Blocks Inside a Block: CSS

Posted: Wed Mar 07, 2018 3:32 pm
by danlee58
I am trying to place 3 Blocks across, inside a block, but I can only get 2 Blocks. Here is my CSS code.

Code: Select all

#top_inner {

  border: 1px solid #cccccc;
	padding: 2px;
  height: 144px !important;
  height: 150px;
  overflow: hidden;
  float: none !important;
  float: left;
}

#top_inner1 {
    float: left;
      
  width: 100px;
  text-align: center;
  font-family: fantasy;
  font-size: 20px;
  border: 1px solid #cccccc;
	padding: 2px;
 }

#top_inner2 {
    float: none;
   display: block;
   margin-left: auto;
    margin-right: auto;  
  width: 100px;
  text-align: center;
  font-family: fantasy;
  font-size: 20px;
  border: 1px solid #cccccc;
	padding: 2px;
 }

#top_inner3 {
    float: none;
   display: block;
    margin-left: auto;
    margin-right: 1px;
   
  width: 100px;
  text-align: center;
  font-family: fantasy;
  font-size: 20px;
  border: 1px solid #cccccc;
	padding: 2px;
 }



Re: Three Blocks Inside a Block: CSS

Posted: Wed Mar 07, 2018 3:37 pm
by Jaydot
I would strongly advise you to learn how CSS Flexbox (or CSS Grid) works, it's easier to maintain, it will give you much more flexibility AND it will be responsive (if you give your blocks a fixed width in pixels, they will not be responsive).
Here's a link to get you started: https://www.w3schools.com/css/css3_flexbox.asp

Re: Three Blocks Inside a Block: CSS

Posted: Wed Mar 07, 2018 7:57 pm
by danlee58
Jaydot,

This is what I have now, but the blocks are in a single column. I need a row.

Code: Select all

.flex-container {
  display: flex;
  flex-direction: row;
}
.flex-container > div {

border: 1px solid #cccccc;
	padding: 2px;
  
   margin: 10px;
   font-size: 20px;

  width: 100px;
  text-align: center;
  font-family: fantasy;
  }

</style>


Re: Three Blocks Inside a Block: CSS

Posted: Wed Mar 07, 2018 8:03 pm
by sozzled
J! 1.0 is so old, outdated and unsupported. Seriously, you should do something (like use the latest, supported version of Joomla) and then you may receive the help you need.

Re: Three Blocks Inside a Block: CSS

Posted: Wed Mar 07, 2018 8:16 pm
by danlee58
I have tried to update to Joomla 3.8. I downloaded Bitumi, but have not found a template similar to the one that I use.
At this time, I am trying to make a single page with 3 blocks in a row, inside a larger block. I have the page all set up, but cannot get 3 blocks in a row.

Re: Three Blocks Inside a Block: CSS

Posted: Wed Mar 07, 2018 8:28 pm
by sozzled
It's your website and (to put it bluntly) it's your problem, sorry. Although there is a forum category for "J! 1.0-related" discussions, people who continue to use J! 1.0 are living outside the rest of the community that has moved on. J! 1.0 ceased to be supported as of 22 July 2009. With literally millions of templates to choose from, saying that you "have not found a template similar to the one that I use" is more of an excuse than a reason to keep using what you're using.

As I say, it's your website but it's not really something most of us may be able (or willing) to assist you with. Good luck.

I agree with @Jaydot's advice.

Re: Three Blocks Inside a Block: CSS

Posted: Thu Mar 08, 2018 12:42 am
by danlee58
I set flex-direction to row, but it produces a column. Is my problem because flex-direction doesn't work in Joomla 1.0?

I am working on the upgrade to Joomla 3.8, but I have to build my own template. In the meantime, I need to a 3 block row.

Re: Three Blocks Inside a Block: CSS

Posted: Thu Mar 08, 2018 10:11 am
by Jaydot
Heavens, Joomla 1!! I picked up your question in the "new posts" feed, and I never noticed which forum you posted in. I completely agree with Sozzled, you really should upgrade.
However, I don't think the Joomla version should influence the CSS, unless you are also using an ancient browser (See Can I Use)?

So I couldn't say why you are seeing a column.
The following code works flawlessly for me...

Code: Select all

.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.flex-container > div {
   border: 1px solid #cccccc;
   padding: 2px;
   font-size: 20px;
   text-align: center;
   font-family: fantasy;
   
   width: 30%;
   min-width: 100px;
  }

Re: Three Blocks Inside a Block: CSS

Posted: Thu Mar 08, 2018 7:02 pm
by danlee58
I am working on the Joomla upgrade to 3.8.5. One reason that I haven't upgraded before is that the website is mature & well understood, and works with no glitches. That being said, I did a screen shot of the page with the 3 blocks in the debugger. I reduced the code to the simplest, just 3 blocks with the numbers 1, 2, and 3. What that indicates is that the text is inline. It appears the <style></style> is ignored.
Screen Shot.doc

Re: Three Blocks Inside a Block: CSS

Posted: Fri Mar 09, 2018 8:24 am
by Jaydot
You're doing this inside a table? :eek:
I have no idea what the effect of flexbox in a table cell is, and I won't have time to test it, sorry.