PHP/CSS Help - align text with php generated content

[Scorpion Ghost]

I have this:

        <div class="tags">Tags:
        <?php mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ?>
    </div>

Makes this:

I do some CSS magic:

display: block ruby;

I get this:

Very nice...

I check on Chrome, It's the same as the first image! I check on Google, apparently Chrome doesn't support display:ruby

https://stackoverflow.com/questions/39096794/displayruby-not-available-on-chrome
Wonderful, just wonderful...

So then, how do I twist and turn that PHP and CSS to make my ducks align?

Thanks

 

[Scorpion Ghost]

I tried this:

        <div class="tags">
        <?php echo 'Tags: ' . mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ?>
    </div>

But then I get this:

See, now it puts it under...

 

[Scorpion Ghost]

I tried this:

        <div class="tags">
        <?php echo "<b>Tags</b>"; mje_list_tax_of_mjob( $mjob_post->ID, '', 'skill' ) ?>
    </div>

The same as above...

 

[Scorpion Ghost]

I tried this:

        <div class="tags">
        <?php echo "<p><strong>'Output'</strong> mje_list_tax_of_mjob ( $mjob_post->ID, '', 'skill' ) </p>";?>
    </div>

And got this:

Well at least it's on the same line now. But it's broken. No good...

 

[Scorpion Ghost]

Okay I fixed it.

Boom

        <div class="tags">Tags:
        <?php mje_list_tax_of_mjob ( $mjob_post->ID, '', 'skill' )?>
    </div>

Boom

.mjob-single-page .list-require-skill-project.list-taxonomires.list-skill {
    display: inline-block;
}

Boom

Checked on Firefox, Chrome, Opera, Brave, looks good everywhere.

Done!

 

[prvncqr]

Use a flexbox and align items in center. Simple.

 

[CPANathan]

Use a flexbox and align items in center. Simple.

definitely wouldn't have been simple

flexbox hurts but she's so effective

 

[Scorpion Ghost]

 

[CPANathan]

tailwind is the way to goooo

 

[prvncqr]

tailwind is the way to goooo

Is it better than Bootstrap?

 

[CPANathan]

Is it better than Bootstrap?

Bootstrap = jS + HTML, Tailwind CSS = jS + HTML + CSS

When you're trying to mess with things from the object oriented perspective, it means you're not looking 20 places to edit one thing...

I can't really answer as to is it better than Bootstrap as I'm a rookie but it really is great for learning where's doing what

Think PHP/Laravel/React having the MVC method in use, and having all of your views in one-four understandable places(index, main.css, main.js, tailwind.css)... It leaves your model and your controller to be less confusing too!

inline = fun

 

[Scorpion Ghost]

Bootstrap = jS + HTML, Tailwind CSS = jS + HTML + CSS

When you're trying to mess with things from the object oriented perspective, it means you're not looking 20 places to edit one thing...

I can't really answer as to is it better than Bootstrap as I'm a rookie but it really is great for learning where's doing what

Think PHP/Laravel/React having the MVC method in use, and having all of your views in one-four understandable places(index, main.css, main.js, tailwind.css)... It leaves your model and your controller to be less confusing too!

inline = fun

Yall should listen to this guy man. This guy knows what he's talking about

 

[prvncqr]

Bootstrap = jS + HTML, Tailwind CSS = jS + HTML + CSS

When you're trying to mess with things from the object oriented perspective, it means you're not looking 20 places to edit one thing...

I can't really answer as to is it better than Bootstrap as I'm a rookie but it really is great for learning where's doing what

Think PHP/Laravel/React having the MVC method in use, and having all of your views in one-four understandable places(index, main.css, main.js, tailwind.css)... It leaves your model and your controller to be less confusing too!

inline = fun

Yall should listen to this guy man. This guy knows what he's talking about

I wonder why he's not so active in StackOverFlow. He could've helped a lot of newbies to save time coding CSS if he was active in SOF.

 

[CPANathan]

Yall should listen to this guy man. This guy knows what he's talking about

Blasphemy!

 

[Scorpion Ghost]

Okay I fixed it.

Boom

        <div class="tags">Tags:
        <?php mje_list_tax_of_mjob ( $mjob_post->ID, '', 'skill' )?>
    </div>

Boom

.mjob-single-page .list-require-skill-project.list-taxonomires.list-skill {
    display: inline-block;
}

Boom

View attachment 221831

Checked on Firefox, Chrome, Opera, Brave, looks good everywhere.

Done!

Damn it, this only works if the tags don't extend past the 1 line.

If it goes further than that, we get this shit:

Buuuuuuuuuuuuu!!!!!!!!!!!!

 

[Scorpion Ghost]

Well I fixed it, but it's not pretty. Not pretty at all...

PHP

        <div class="tags"><p class="tags-custom">Tags: </p>
        <?php mje_list_tax_of_mjob ( $mjob_post->ID, '', 'skill' )?>
    </div>

CSS

.single-mjob_post .tags-custom {
    margin-top: 24px;
    position: absolute;
}

More CSS

.mjob-single-page .list-require-skill-project.list-taxonomires.list-skill {
margin-left: 40px;
}

So I wrap the "Tags" in "p", then I make that "p" absolute and move it down, and then i take the "ul" tags and move them to the right.

I checked on Firefox, Chrome, Brave, Opera, logged in, logged out, and on phone. Looks good all over.

This is the best I can do.

Yeah, I know, you can do it better. Well if you can do it better, then be my guest

 

[4440]

forgive me, what layout do you want to achieve?

 

[Scorpion Ghost]

forgive me, what layout do you want to achieve?

I wanted something like this:

I mean, what I created works too, except I used position:absolute, and as far as I know that's not really recommended.

Who knows when someone will visit that page using some weirdo browser or device, and see a weird overlapping mess there because of what I did.


But if somebody who actually understands this stuff tells me that what I did is fine, then it's fine, and I'll sleep better

 

[4440]

I wanted something like this:

View attachment 221952

I mean, what I created works too, except I used position:absolute, and as far as I know that's not really recommended.

Who knows when someone will visit that page using some weirdo browser or device, and see a weird overlapping mess there because of what I did.


But if somebody who actually understands this stuff tells me that what I did is fine, then it's fine, and I'll sleep better

use flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
spend 5 minutes, you can learn the ultimate solution for all type of responsive layout designs.

 

[SharonHe]

Bootstrap = jS + HTML, Tailwind CSS = jS + HTML + CSS

When you're trying to mess with things from the object oriented perspective, it means you're not looking 20 places to edit one thing...

I can't really answer as to is it better than Bootstrap as I'm a rookie but it really is great for learning where's doing what

Think PHP/Laravel/React having the MVC method in use, and having all of your views in one-four understandable places(index, main.css, main.js, tailwind.css)... It leaves your model and your controller to be less confusing too!

inline = fun

this is so incorrect, how can you say this when bootstrap is completely CSS based?