PHP/CSS Help - align text with php generated content

Scorpion Ghost

Scorpion Ghost

Elite Member
Executive VIP
Jr. VIP
Joined
Mar 22, 2013
Messages
9,144
Reaction score
10,489
I have this:

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

Makes this:

asd.PNG


I do some CSS magic:

CSS: 
display: block ruby;

I get this:

wewew.PNG


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
 
Advertise on BHW
I tried this:

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

But then I get this:

fffff.PNG


See, now it puts it under...
 
I tried this:

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

The same as above...
 
I tried this:

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

And got this:

8585.PNG


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

Boom

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

Boom

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

Boom

done.PNG


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

Done!
 
prvncqr said:
Is it better than Bootstrap?
Click to expand...
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
 
CPANathan said:
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
Click to expand...

Yall should listen to this guy man. This guy knows what he's talking about :D
 
CPANathan said:
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
Click to expand...
Scorpion Ghost said:
Yall should listen to this guy man. This guy knows what he's talking about :D
Click to expand...
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.
 
Scorpion Ghost said:
Okay I fixed it.

Boom

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

Boom

CSS: 
.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!
Click to expand...

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:

taggg.PNG


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

PHP

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

CSS

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

More CSS

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.

8525555.PNG


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 :p
 
4440 said:
forgive me, what layout do you want to achieve?
Click to expand...

I wanted something like this:

8525555.PNG


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 :p
 
Scorpion Ghost said:
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 :p
Click to expand...

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.
 
CPANathan said:
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
Click to expand...
this is so incorrect, how can you say this when bootstrap is completely CSS based?
 
Advertise on BHW
You must log in or register to reply here.
Sign up now!

Main Menu

Home Main Forum List Black Hat SEO White Hat SEO BHW Newbie Guide Blogging Black Hat Tools Social Media Downloads

Marketplace

Account Selling Content / Copywriting EBooks / Methods Hosting Misc Proxies For Sale SEO - Link building SEO - Packages Social Media Social Media - Panels Web Design More

Making Money

Affiliate Programs Hire a Freelancer IM Journeys Making Money Pay Per Click Site Flipping Want to Buy

BlackHat World

Dispute Resolution Forum Suggestions & Feedback Introductions Lounge
Back
Top