Jump to content


Photo
- - - - -

box image on top, left allign


  • Please log in to reply
14 replies to this topic

#1 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 02:24 PM

I have been using CSS to try and align the graphic to the left, this is the page:

Please Login or Register to see this Hidden Content

 

 

#boxes .page-id-124  .fbox .graphic {float:left;}

 

help is appreciated.
 



#2 batman

batman

    Bat Learning

  • Members

  • 1743 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 29 June 2013 - 02:51 PM

Hi robdesigner

Please you can try 

 

.fboxgraphic.pl-imageframe {text-align: center;}

or

.top_thumbs .fboxgraphic  {text-align: center;}



#3 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 03:08 PM

Hi,

 

The CSS on your site includes:

Please Login or Register to see this Hidden Content

To align the image to the left, try:

Please Login or Register to see this Hidden Content



#4 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 03:08 PM

nope, no good. Any other ideas.



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 03:12 PM

Which was no good?



#6 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 03:13 PM

both lines, tried one after the other.



#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 03:14 PM

Well, first, remove your code.

Next, copy the second group in my recommendation and paste it on its own line to Dashboard > PageLines > Site Options > Custom Code.

 

Also, you should use Chrome's Inspection Tools or Firebug for Firefox.



#8 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 03:19 PM

yes we did, still no joy.



#9 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 03:21 PM

just got it working, I didn't see your first post, only the other members first recommendations, all working ok thanks to your code. Can you confirm how we can add a bottom padding to the boxes on this page. At what point do we have the page ID code, at the very start? Would the padding be {padding-bottom: 20px}



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 03:26 PM

You prefix your CSS code with .page-id-124 and simply add padding-bottom: 20px; but it must be in the proper element. 

 

The question becomes, do you want to do it to the box, or add it to the excerpt, which is probably much easier, and yields the same effect?



#11 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 03:27 PM

Well we want to adding bottom padding to the text, so would it be:

 

.page-id-124 .fboxes (padding-bottom: 20px;)



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 03:29 PM

The code for the entire row is:

Please Login or Register to see this Hidden Content

To add 20px at the bottom on that page only, try:

Please Login or Register to see this Hidden Content



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 03:30 PM

I strongly urge you go get Firebug at

Please Login or Register to see this Hidden Content



#14 robdesigner

robdesigner

    Advanced Member

  • Members
  • 64 posts

Posted 29 June 2013 - 03:34 PM

We do use firebug...  we cant see where you got .media overview from?



#15 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 June 2013 - 04:15 PM

See the image below.  There is a line, where the left-most red arrow is. That line should be checked as it relates to the levels of code affecting each element you're inspecting. The left-most arrow points to a little grey arrow, which lets you slide through the line in question.  The next 2 arrows point to different layers of the same element. 

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

  124.47KB   0 downloads

You can then see the one I used, and in the code box, the code it uses. 

 

The right-most arrow points to the corresponding arrow, letting you slide through the layers going to the right.