Cant get logo to appear in right place plus cross-browser issues

1 Views

I’m using the Twitter bootstrap wordpress theme. I want the logo (the picture of a face) to appear next to the title of the blog. I’ve tried both absolute and relative positioning as well as other css styles, but i cant get the logo to appear in the right place without either extending the height of the toolbar, or inadvertently affecting an adjacent element.

How do i fix the css so the logo appears correctly in all browsers and does not inadvertently affect any other element?

Read More

Here is the source from the header.php, the toolbar is being generated in the body and positioned at the top of the page. 

<div class="container-fluid nav-container">
                        <nav role="navigation"><img style="z-index: 10; position:absolute; margin-left: -235px" src="http://blog.freeteacher.co.uk/wp-content/themes/wordpress-bootstrap-V2.1/images/logo_small.png">
                            <a class="brand" id="logo" title="Fun Learning for Children | Resources for Parents and Teachers" href="http://blog.freeteacher.co.uk">FreeTeacher – Blog</a>

                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>

                            <div class="nav-collapse">
                                <ul id="menu-main" class="nav"><li id="menu-item-8" class="menu-item menu-item-type-post_type menu-item-object-page"><a href="http://blog.freeteacher.co.uk/about/">About</a></li>

                        </nav>

                                                    <form class="navbar-search pull-right" role="search" method="get" id="searchform" action="http://blog.freeteacher.co.uk/">
                            <input name="s" id="s" type="text" class="search-query placeholder" placeholder="Search">
                        </form>

                    </div>

Here is a link to the css file which is just the twitter bootstrap css
http://blog.freeteacher.co.uk/wp-content/themes/wordpress-bootstrap-V2.1/css/bootstrap.min.css

Also – here is the page where this is being rendered

http://blog.freeteacher.co.uk/news/getting-to-know-each-other/

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. From my tests in Firebug, if you change the inline styling for the <img> element from margin-left:-235px; to left:35px; you end up with what you’re seeking. You can adjust the value from 35px in order to get it exactly where you want. To be positive that it is always where you want, it could be worthwhile to also set top: 0; but that is probably not necessary.

    For reference, this works because you have position:absolute; set, which means that it will position the element in reference to the first container element that has a position assigned, or to the document as a whole if (as in this case) there is no such parent element. Thus setting top:0; left:35px; tells the browser to place the image 0 pixels down from the top left corner and 35 pixels to the left.