I am stumped with this...please help

Discussion in 'HTML & Website Design' started by quatto, Dec 1, 2010.

  1. #1
    http://webhostmaven.com/ipage/

    If you click the above link you will see a post page. If you scroll to the bottom of the post, firebug the button "click here to visit site".

    Even though I chose "center" in the plugin, the template seems to be overiding any images I put in a post and leaving them to the left.

    Now, if I change the CSS to float center - all images get centered. I just want the button or any image I choose to center. How and where do I do this in the code?

    Thanks
     
    quatto, Dec 1, 2010 IP
  2. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #2
    To center "click here to visit site" button

    
    .myrp_visit_link, .myrp_visit_link a {
    text-align:center !important; [COLOR="red"]<-- Remove[/COLOR]
    margin:0 auto; [COLOR="darkgreen"]<-- add[/COLOR]
    width:400px; [COLOR="darkgreen"]<-- add; width of the button[/COLOR]
    }
    
    Code (markup):
    There is no value "center" to the property "float". Below are values for porperty "float" and description -

    left - The element floats to the left
    right - The element floats the right
    none - The element is not floated, and will be displayed just where it occurs in the text. This is default
    inherit - Specifies that the value of the float property should be inherited from the parent element

    Hope this helps.
     
    radiant_luv, Dec 1, 2010 IP
  3. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks again, but where do I find this code?

    Also, what if I wanted to center an image in the post? Nothing is getting centered for some reason. Lets say I want to add html code for an affiliate image and link - that too is staying to the left...
     
    quatto, Dec 2, 2010 IP
  4. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #4
    in the style.css
    
    div.post a img {
    float: left; [COLOR="red"]<-- this you have used to float those little icon beside the h2 header, just remove and see what's happening (but you'll need this one the way you have marked up the code)[/COLOR] 
    margin-right: 10px;
    border: none;
    }
    
    Code (markup):
    You are assigning any image with anchor linked inside div.post should be aligned to the left.

    Now, you see "Click Here to Visit Site" button? That's an image with anchor link and under div.post, so it is taking the style (floating to left) you've defined, this style also overwriting the style for that button (text-align:center) which I'm guessing from some plugin you've used. Update the style over there.
     
    radiant_luv, Dec 2, 2010 IP
  5. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Thanks man, but this must be over my head because I can't find any of that code anywhere... :(
     
    quatto, Dec 2, 2010 IP
  6. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #6
    radiant_luv, Dec 2, 2010 IP
  7. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    If I could good rep you I would, I think I got it now, thanks bro...you magnificent bastard!!!!
     
    quatto, Dec 2, 2010 IP
  8. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Radiant was nice enough to answer me in a PM, but he suggested I post my question out here: Following the above issue which was resolved another popped up:

    Now that worked for any image or plugin link I use, the thumbnail (part of the theme) at the top of a post page gets offset to the center instead of upper left where it was before the CSS change.

    Radiant suggested I do this:

    <div style="padding: 10px; float: left;">
    <a href="http://webhostmaven.com/ipage/" class="img"><img src="http://webhostmaven.com/wp-content/themes/wordpressreviewtheme v1.4/images/ipage.jpg" alt=""></a><p><a style="clear: both;" href="http://webhostmaven.com/go/ipage.php" class="viewwebsite">View The Website</a></p>
    </div>

    which indeed posts and image to the left the way I want, however, now I have 2 of the same images, one on the left and one still in the center.

    How can I get those images back to the upper left without effecting the rest of the post?
     
    quatto, Dec 2, 2010 IP
  9. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #9
    Thanks quatto posting back to the forum.

    I'm not sure which 2 images are referred as same?
     
    radiant_luv, Dec 2, 2010 IP
  10. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    ok, i put the code in on the particular post page...go to http://webhostmaven.com/ipage/

    and you can see what I mean...
     
    quatto, Dec 2, 2010 IP
  11. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #11
    You'd have to replace the old code with the new code I posted. Right now you have what you had earlier and what i gave you, both.
     
    radiant_luv, Dec 2, 2010 IP
  12. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Ok, problem I am having is, the old code was part of the theme. If I replace that code, each post will have "ipage" as an image, won't it? The old code was not "in" the post. It was built into the theme.

    Am I making sense?
     
    quatto, Dec 2, 2010 IP
  13. radiant_luv

    radiant_luv Peon

    Messages:
    1,327
    Likes Received:
    34
    Best Answers:
    1
    Trophy Points:
    0
    #13
    So, wherever you have the code built, you'll have to edit. First, let me tell your entire layout code is kinda messy.

    Now, edit where you have the code which shows those two image.

    <div style="padding: 10px; float: left;">
    <a href="http://webhostmaven.com/ipage/" class="img"><img src="http://webhostmaven.com/wp-content/themes/wordpressreviewtheme v1.4/images/ipage.jpg" alt=""></a>(Just add <br/> or <p> here, this will push the visit button underneath the image) <p><a style="clear: both;" href="http://webhostmaven.com/go/ipage.php" class="viewwebsite">View The Website</a></p> 9close if you use <p>)
    </div>
     
    radiant_luv, Dec 2, 2010 IP
  14. quatto

    quatto Peon

    Messages:
    196
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I am new to this and still learning...messy how? How can I fix it? I just took a theme and added a few plugins...what are the consequences of a messy layout?

    Also, I have that code in my ipage post. I am not sure I understand how to get rid of the other ipage image? And I am not sure how I can make it so it doesn't happen on any post?
     
    quatto, Dec 2, 2010 IP