WordPress.org

Forums

How to position logo to the right of header? (18 posts)

  1. rob33
    Member
    Posted 4 years ago #

    Ok so I have a couple of pulling my hair out threads running at the mo', so apoligize if it seems like I'm not doing my research here, but I literally have run out of options.

    Site: bestchristmasgiftsformen.org/

    Using css code:

    <quote>#logo {
    position:absolute;
    top:30px;
    right:30px;
    }</quote>

    And php:

    <quote>
    <!-- Logo Start -->
    <h1 class='logo'><img src="http://bestchristmasgiftsformen.org/wp-content/themes/christmas-wordpress-theme/wp_christmas/images/logo.png" height="125" width="600" alt="Christmas Gifts for Men"/></h1>
    <!-- Logo End --></quote>

    Is that right o_0 ?

    Thanks.

  2. Joseph
    Member
    Posted 4 years ago #

    Try this:

    #logo {
    	position: relative;
    }
    #logo img {
    	position: absolute;
    	right: 30px;
    	top: 30px;
    }
  3. rob33
    Member
    Posted 4 years ago #

    Hi Josph,

    No, hasn't worked - but thanks!

    If I use:

    <!-- Logo Start -->
    <a>/"><img id="logo" class="correct-png" src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="<?php bloginfo('name'); ?>" title="<?php bloginfo('name'); ?>" /></a>
    <!-- Logo End -->

    Then it sticks it where it should - bottom right - but squeezes it in hence reduces width and height.

    Noob at css php so maybe you might know.

    Before putting css code in btw there was no logo code in style sheet but worked- sort of.

  4. Joseph
    Member
    Posted 4 years ago #

    My mistake. Wrote those according to the html of your site at the time.

    Try this

    .logo {
    	position: relative;
    	margin: 0;
    }
    .logo img {
    	position: absolute;
    	right: 30px;
    	top: 30px;
    }
  5. rob33
    Member
    Posted 4 years ago #

    Hi mate,

    No hasn't worked.

    Mmmmmmm.

    Appreciate your help though.

    Do you think that by replacing old code it can be achieved?

    I just need to stretch it out.

    If you visit my site now - this is what i mean:

    http://bestchristmasgiftsformen.org/

  6. Joseph
    Member
    Posted 4 years ago #

    Oh, you modified the html again.

    .logo {
    	position: relative;
    	margin: 0;
    }
    .logo img {
    	position: absolute;
    	right: 30px;
    	top: 30px;
    }

    was written according to the html in your first post.

    Edit: If you want to keep the current html and just stretch the image out, remove width: 300px; from:

    span#logo, img#logo {
    	border:0 none;
    	height:125px;
    	position:absolute;
    	right:30px;
    	top:65px;
    	width:300px;
    }
  7. rob33
    Member
    Posted 4 years ago #

    I just replaced the original "header php" code. But shrinks the logo.

    Just trying to put full size logo in same place.

    Do I need to mess with css or alter php - like i said - bit noob on this!

  8. Joseph
    Member
    Posted 4 years ago #

    Posting again in case you didn't see my edit, remove width: 300px; from

    span#logo, img#logo {
    	border:0 none;
    	height:125px;
    	position:absolute;
    	right:30px;
    	top:65px;
    	width:300px;
    }
  9. rob33
    Member
    Posted 4 years ago #

    No - no joy - I'm afraid!

  10. Joseph
    Member
    Posted 4 years ago #

    Well, you didn't remove width: 300px; because I can still see it on your site.

  11. rob33
    Member
    Posted 4 years ago #

    I've removed it now - mistake.

    Thanks for your help on my other thread btw - not working as yet testing various tries now.

  12. Joseph
    Member
    Posted 4 years ago #

    Well, I don't know then. I can still see it in your layout.css.

  13. rob33
    Member
    Posted 4 years ago #

    This is what i have in css:

    span#logo, img#logo {
    	border:0 none;
    	height:125px;
    	position:absolute;
    	right:30px;
    	top:65px;
    }

    Maybe delete cache.

  14. Joseph
    Member
    Posted 4 years ago #

    I did clear cache.

  15. Alx Block
    Member
    Posted 4 years ago #

    Joseph, I also still see the width: 300px in your layout.css file.

    If you go into that file (layout.css), down to line 51 and replace this:

    span#logo, img#logo{position:absolute;top:65px;right:30px;width:300px;height:125px;border:0;}

    with this:

    span#logo, img#logo{position:absolute;top:65px;right:30px;height:125px;border:0;}

    the logo will stretch back out to its regular size, just as @rob33 suggested.

  16. rob33
    Member
    Posted 4 years ago #

    Maybe namecheap server issue.

    width:300px; - is definitley deleted.

  17. Alx Block
    Member
    Posted 4 years ago #

    Sorry that I had switched your names in my head.

    That's very odd. I still see it in there.

  18. rob33
    Member
    Posted 4 years ago #

    Hi Alx and Joseph!

    Replaced:

    span#logo, img#logo {
    	border:0 none;
    	height:125px;
    	position:absolute;
    	right:30px;
    	top:65px;
    }

    With:

    span#logo, img#logo{
    	position:absolute;
    	top:65px;
    	right:30px;
    	height:125px;
    	border:0;
    }

    No joy - but thanks! Effort!!!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.