Three Blocks Inside a Block: CSS

Discuss the development and implementation of Joomla! 1.0.x templates here.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
danlee58
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Mon Mar 05, 2007 2:07 am

Three Blocks Inside a Block: CSS

Postby danlee58 » Wed Mar 07, 2018 3:32 pm

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;
 }



User avatar
Jaydot
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 171
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Three Blocks Inside a Block: CSS

Postby Jaydot » Wed Mar 07, 2018 3:37 pm

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
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

danlee58
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Mon Mar 05, 2007 2:07 am

Re: Three Blocks Inside a Block: CSS

Postby danlee58 » Wed Mar 07, 2018 7:57 pm

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>


User avatar
sozzled
Joomla! Champion
Joomla! Champion
Posts: 5012
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Three Blocks Inside a Block: CSS

Postby sozzled » Wed Mar 07, 2018 8:03 pm

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.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

danlee58
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Mon Mar 05, 2007 2:07 am

Re: Three Blocks Inside a Block: CSS

Postby danlee58 » Wed Mar 07, 2018 8:16 pm

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.

User avatar
sozzled
Joomla! Champion
Joomla! Champion
Posts: 5012
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia
Contact:

Re: Three Blocks Inside a Block: CSS

Postby sozzled » Wed Mar 07, 2018 8:28 pm

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.
https://www.kuneze.com/blog
Former member of Kunena project team
If you think I’m wrong then say “I think you're wrong.” If you say “You’re wrong!”, how do you know?

danlee58
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Mon Mar 05, 2007 2:07 am

Re: Three Blocks Inside a Block: CSS

Postby danlee58 » Thu Mar 08, 2018 12:42 am

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.

User avatar
Jaydot
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 171
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Three Blocks Inside a Block: CSS

Postby Jaydot » Thu Mar 08, 2018 10:11 am

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;
  }
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl

danlee58
Joomla! Intern
Joomla! Intern
Posts: 66
Joined: Mon Mar 05, 2007 2:07 am

Re: Three Blocks Inside a Block: CSS

Postby danlee58 » Thu Mar 08, 2018 7:02 pm

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
You do not have the required permissions to view the files attached to this post.

User avatar
Jaydot
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 171
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Three Blocks Inside a Block: CSS

Postby Jaydot » Fri Mar 09, 2018 8:24 am

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.
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl


Return to “Templates & CSS - 1.0.x”

Who is online

Users browsing this forum: No registered users and 4 guests