WordPress.org

Ready to get started?Download WordPress

Forums

How can I align a Google Map embed (13 posts)

  1. gemurrayx
    Member
    Posted 7 months ago #

    Hello! I'm new here, so please excuse any flubs on my part. I'm running the site at pccwichita.com and have a design question. On our events page at

    http://pccwichita.pairsite.com/?page_id=57

    we're selling advance tickets to our upcoming event. This isn't the first time I've noticed that I can't place the Google Map and the PayPal Button side-by-side instead of one above the other, regardless of how I try to set justifications or anything else I can control. I've searched the forums several times and can't find anyone else asking about this (although maybe I don't know the correct search terms).

    I've tried everything I can think of and the closest I can get it when I use a two-column, single-row table to place them side-by-side. I know I shouldn't use a table for laying out text, but nothing else comes close, and this is layout for two embedded items that I can't really control very much about.

    When I try this, it looks OK in the editor but when the page is displayed the PayPal button is "forced" downward in its cell and creates a large empty space equal to the height of the map above the PayPal button. This "forced downward" effect also happens if I use an image from my media library in the cell instead of a map, and again the empty space in the cell above the PayPal button is the height of the image.

    Right now the page is alright, but I would really prefer a more organized look. Any thoughts?

  2. graphical_force
    Member
    Posted 7 months ago #

    Why not create a container div the put another div that has the paypal buttons in it and use css to float that to the left then create another div that contains the map and float that to the right.

    Something like:

    <div id="container">
    <div id="left-side">
    /* paypal buttons are in here */
    </div>
    <div id="right-side">
    /* google map here */
    </div>
    </div>
  3. gemurrayx
    Member
    Posted 7 months ago #

    Um. Hm. OK.

    Graphical_force, I've tried inserting the div id code on the page itself as you suggested and nothing has changed, so it must be more involved than that, correct?

    I have a basic understanding of what css does. Using css to solve this means not using the text editor window in my edit page but instead going to edit the style.css in the Appearance section of my Dashboard, correct? Would this then apply any changes to
    other pages
    on the site?

  4. w3x64
    Member
    Posted 7 months ago #

    This is correct.

  5. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    I think the suggestion above was that you should make your own divs with your own ids or classes assigned to those divs - then they won't be applied anywhere else. So try adding this:

    #right-side {
       float: right;
       width: 68%;
    }
    
    #left-side {
       float: left;
       width: 30%;
    }

    But you should not modify any theme files at all - rather use a custom CSS plugin so that your changes won't be overwritten when WP is updated.

  6. graphical_force
    Member
    Posted 7 months ago #

    You beat me to it! LOL

  7. WPyogi
    Volunteer Moderator
    Posted 7 months ago #

    LOL - I should have left it for you, but at least we said the same thing (more or less) :).

  8. gemurrayx
    Member
    Posted 7 months ago #

    Got it. I'll hopefully get it working soon (wish this was my day job). Thanks!

  9. gemurrayx
    Member
    Posted 7 months ago #

    OK, I've been trying everything I can to make this work. In addition to the information here, I've tried to get face-to-face help at the university I work at and found a plugin called Div Shortcode that should have simplified everything. I always hate to say this, but I can't figure this out.

    I'm a content person by training, not a technical person. Anything that I've picked up on the technical side has been by keeping my eyes open and can be a bit hit-or-miss. I hate to ask anything that might take up too much of anyone's time, but if I'm to fix this (and I would love to, because I'm sure I'll need it again later) then I'll need step-by-step instructions. Lead me by my nose.

  10. graphical_force
    Member
    Posted 7 months ago #

    If you feel that this is out of your comfort zone, you can always hire someone in http://jobs.wordpress.net/

  11. gemurrayx
    Member
    Posted 7 months ago #

    Sorry-I can't really hire anyone for this.

    I just can't help but think I'm missing something obvious or that I don't know about a step that's taken for granted I would know. I'm rather proficient in the CMS used where I work, and it has a lot of similarity to WordPress. I'm not even sure why this won't work when I try to use a table to organize the layout. Why does content get pushed downward in the cells?

    I'm going to keep trying, I just wouldn't mind any other help.

  12. gemurrayx
    Member
    Posted 7 months ago #

    Aaaand I got it. I'm not sure how much of what I did was necessary, but I found this thread and the full code provided (substituting my own content, of course) seems to have done the trick. The problem seems to have been the map itself.

    Thanks again for anyone who was helping me here. I do realize that this is volunteer, and I appreciate the time.

  13. deanquenton
    Member
    Posted 1 week ago #

    Okay, WPyogi and graphical_force... You guys rock!

    Your solution was simple and worked like a charm! Thank you :)
    Step.1: I rendered my CSS as WPyogi suggested
    Step 2: I inserted the <div id="container"> coding in the 'Text' part on the page that I wanted all the alignments done on and voila!

    I have two google maps with two different addresses display on the same page. Basically: Address on the left and the Google map directly on the right hand side neighbouring eachother.

Reply

You must log in to post.

About this Topic