[RESOLVED]I dont know how to apply my style

Hi,

what i would love to achive is to have a photo (center, left or right ) with text around and this photo and text inside a div which have an HR on the very bottom and a gradient inside form the bottom to the top

I manged to do my gradient with this :

.magazinearticlephotos {
background-color:#ffffff;
/*For creating shade inside */ 
background: -webkit-linear-gradient(#ffffff, #f2f7fb); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(#ffffff, #f2f7fb); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(#ffffff, #f2f7fb); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(#ffffff, #f2f7fb); /* Standard syntax */
font-size:30px;
}

and this is the code which works when the picture is centered but it does not work if the picture is on the left or right… why??

This is  what i have as a result

Ok when photo is center

Code :

<div class="col-md-12">
                <div class="magazinearticlephotos" align="Center" style="vertical-align:middle !important; text-align:center; text-align-last:center !important;">

    <img src="/Content/MagazineImages/2014-09-01-7-image006.png" alt="2014-09-01-7-image006.png" border="0" align="Center" title="CollectionHair - Articles sur la coiffure - Cheveux &amp; mode" style="padding-left: 15px; padding-right: 15px; padding-bottom: 5px; max-width: 350px;" />

                    <p>
 

 Douceur et originalit&eacute; pour ce style graphique &agrave; l&rsquo;allure futuriste, quelle audace d&rsquo;<em>Eugene Perma</em>!
 </p>
                    <div>
                        <hr style="display: block; height: 1px; border: 0; border-top: 1px solid #64809c; margin: 1em 0; padding: 0; " />
                    </div>
                </div>
             
                
            </div>

NOT OK whe photo is on the left or on the right

Code :

<div class="col-md-12">
                <div class="magazinearticlephotos" align="Left" style="vertical-align:middle !important; text-align:center; text-align-last:center !important;">

    <img src="/Content/MagazineImages/2014-09-01-7-image010.png" alt="2014-09-01-7-image010.png" border="0" align="Left" title="CollectionHair - Articles sur la coiffure - Cheveux &amp; mode" style="padding-left: 15px; padding-right: 15px; padding-bottom: 5px; max-width: 350px;" />

                    <p>
 

 

 

 

 Tout v&ecirc;tu de cuivre et de discr&eacute;tion, <em>Interm&egrave;de</em>estompe un ch&acirc;tain en intensifiant ses reflets.
 </p>
                    <div>
                        <hr style="display: block; height: 1px; border: 0; border-top: 1px solid #64809c; margin: 1em 0; padding: 0; " />
                    </div>
                </div>
             
                
            </div>

Somebody can tell me how to achive this? all the solutions are welcome!!

Add:

float:left;

to your magazinearticlephotos class, e.g.

.magazinearticlephotos {
float;left;
etc..

Hi, the problem is not how to center the picture…

this happen dinamically with database, i get if the picture need to be left, center or right form my database…

My problem is that i am not able to create a div which has a HR on the bottom and a
gradient as a background and inisde this my picture with my text…

today this work if the picture is CENTER but not when is RIGHT or LEFT..

I am happy with different solution!!

Did you try my solution?

Your problem is this – as soon as you align the image left or right it won’t clear the parent wrapper – so the wrapper element collapses.

The fix is to give the parent element float:left;

In your case, the parent element is element you target in your css – so you need to apply float:left; to that element as I mentioned.

That way the element with the HR and gradient will expand to wrap around the image as you want.

You might need to create a rule:

hr{clear:both;}

But first of all try the code I gave you.

Check out my example here: http://jsfiddle.net/1yk1hqh7/

loydall123, I like that fiddle. I think it does miss one point, when he wants the image to be in the middle.  I could see him using the left and right from the database to set the image’s align attribute to get it to the left or right, but center just keeps
it on left side but above the text.

Hi graphic.web,

According to your description, it seems that the picture position depends the value from the database.

if the position changed ,then the css style you need to change.

So you can dynamically create the div which has which has a HR on the bottom and a
gradient as a background and inside this my picture with my text

apply the css sytle on the div based on the position from the database in your javascript function ,then Append the div to your element in your  html page.

Best Regards,

Kevin Shen.

hi

Please check this

i just removed hr adn iapply its style to the div please check

<div class="magazinearticlephotos" align="Center" style="vertical-align:middle !important; text-align:center; text-align-last:center !important;"> <img src="/Content/MagazineImages/2014-09-01-7-image006.png" alt="2014-09-01-7-image006.png" border="0" align="Center"
title="CollectionHair – Articles sur la coiffure – Cheveux &amp; mode" style="padding-left: 15px; padding-right: 15px; padding-bottom: 5px; max-width: 350px;" />
  <p> Douceur et originalit&eacute; pour ce style graphique &agrave; l&rsquo;allure futuriste, quelle audace d&rsquo;<em>Eugene Perma</em>! </p>
  <div style="display: block; height: 1px; border: 0; border-top: 1px solid #64809c; margin: 1em 0; padding: 0; clear:both; ">

  </div>
</div>

Leave a Reply