Aligning Buttons On Website

  • Resolved keith_e

    (@keith_e)


    9 years, 11 months ago

    Hi

    I want to align two buttons I’ve put on a website with the left hand side of the header image. The way I’ve got it at the moment it using an offset in px has the buttons in different positions depending on the resolution of the screen the website is being viewed on.

    Help please?

    Details:
    Site : homebeachmediademo5.com
    Code in header.php:

    <div class="lang-english">
    <a href="<?php echo 'https://www.cjljewellery.com.au'.$_SERVER['REQUEST_URI']; ?>" id="logo"><img src="<?php bloginfo('template_url'); ?>/images/ausflag-50x25.png" title="English"></a>
    </div>
    <div class="lang-french">
    <a href="<?php echo 'https://www.homebeachmediademo5.com'.$_SERVER['REQUEST_URI']; ?>" id="logo"><img src="<?php bloginfo('template_url'); ?>/images/frenchflag-50x25.png" title="Francais"></a>
    </div>

    style.css entry:

    .lang-english {
float:left;
top:265px;
margin-left:110px;
z-index: 3;
}

.lang-french {
float:left;
top:265px;
margin-left:10px;
z-index: 3;
}

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi Keith,

    If the left edge of the english language flag is what you want to align with the left edge of the header image, try the following CSS:

    Add this to .bg1 (on or near line 140 in your style sheet):

    width: 1030px;
margin: 0 auto;

    Remove this for .lang-english (on or near line 153 in your style sheet):

    margin-left: 110px;

    You can also remove the following CSS for both .lang-english & .lang-french (on or near lines 153 and 160 in your style sheet):

    top: 265px

    Please let me know if that works, or if it is something else you are looking to align.

    Hope this helps!

    Christi

    Thread Starter keith_e

    (@keith_e)

    Hi Christi

    That worked perfectly. Thank you so much!

    Cheers
    Keith

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Aligning Buttons On Website’ is closed to new replies.