CSS question

[Sir Osis of Liver]

Any way to combine linear-gradient background with opacity?

[SychO]

use translucent colors

[Sir Osis of Liver]

This works -

Code Select Expand



background: linear-gradient(to bottom, rgba(123,167,199,0.8), rgba(255,255,255,0.3));



I was in the wrong place.

[Antechinus]

Well go on then. Mark it as solved.

[Sir Osis of Liver]

Long as you're here, how come margin: auto almost never works for centering?

[Antechinus]

IME it works perfectly, as long as you don't screw it up with something else. Exactly how are you trying to use it?

[Sir Osis of Liver]

I've used it many times to try to center divs, it almost never works.  I usually have to wrap it in another div that's 100% width, and use text-align to center it.  If I set the margins in px, they work, but auto doesn't. 

[Antechinus]

That doesn't give me much to go on. It's the classic n00b bug report: "Hey man, this thing is broken."

Are you aware that it will not work on floated elements? The float will override the auto margin, so elements can't be declared as float: left; or float: right; if you want to use an auto margin.

[Sir Osis of Liver]

No, it's not because of float.  Don't have a current example, just used it past couple days and it actually worked.  Seems to have something to do with how elements are nested.  Next time it happens I'll try to remember to save the code.

[Antechinus]

K. Have you tried playing with that sidebar code yet?

[Sir Osis of Liver]

Not yet, been busy in 2.0.  Will get to it when I have a good block of time.

[Sir Osis of Liver]

Ok, here's one where margin auto doesn't center image -

Code Select Expand



<td class="windowbg2 info">
<h4><a href="', $board['href'], '" name="b', $board['id'], '">', $board['name'], '</a>';

// Has it outstanding posts for approval?
if ($board['can_approve_posts'] && ($board['unapproved_posts'] || $board['unapproved_topics']))
echo '
<a href="', $scripturl, '?action=moderate;area=postmod;sa=', ($board['unapproved_topics'] > 0 ? 'topics' : 'posts'), ';brd=', $board['id'], ';', $context['session_var'], '=', $context['session_id'], '" title="', sprintf($txt['unapproved_posts'], $board['unapproved_topics'], $board['unapproved_posts']), '" class="moderation_link">(!)</a>';


if($board[id] == 1.0)
echo '
<p>', $board['description'] , '<img src="http://www.thekrashsite.com/pics/catroom3.jpg" style="opacity: 1.0; margin: 20px auto 20px auto;"></p>';



It's in BoardIndex.template.php, top and bottom margins work, but it's always floated left.  It's in a td, doesn't make any difference if it's in <p></p> or <div></div>. 

If I wrap it in a <div> and text-align it, it centers -

Code Select Expand



echo '
<div style="text-align: center;">
<p>', $board['description'] , '<img src="http://www.thekrashsite.com/pics/catroom3.jpg" style="opacity: 1.0; margin: 20px auto 20px auto;"></p>
</div>';



[Antechinus]

You have to declare images as display: block; if you want margins to work properly on them.

This should work, if the image is meant to sit below the description:

Code Select Expand

.info p img {
display: block;
margin: 20px auto;
}

Just to be clear: you want the description text and the image centered? Is the image going below the description? What's the deal?

If you want the whole shebang centered, you could just declare text-align: center on the .info td in your CSS. That should nail it. It shouldn't need markup hacks.

[drewactual]

i think you also have to define a width for margin:auto to center... even if it's 100%. 

[Antechinus]

Yes you're right. I forgot to mention that detail. Not defining the width of the image will result in it filling the entire container.