Databases
StackOverflow2013
Postsdbo
POLogo image in the center of a menu doesnt sit right
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POLogo image in the center of a menu doesnt sit right
    text
    copied!<p>Ok so i have searched through probably 50 or so threads here on SO and cant find a solution yet. i have a navigation bar that is 1000px wide by 47px tall. i have a logo that is 135px tall and 167px wide. i want this image to sit dead center on the menu and extend above it. the image has the angled design i want to connect to the edges of the menu on either side. here is a mockup of what i would like for it to look like vs how it looks now.</p> <p><img src="https://i.imgur.com/mXsqsio.png" alt="Mockup + Current Screenshot"></p> <p>My CSS:</p> <pre><code>.masthead { height: 70px; background-image: url(../img/rmr-masthead.png); background-repeat: no-repeat; background-position: center center; } /* == Nav Menu == */ .ribbon { width: 1000px; max-height: 47px; position: absolute; text-align: center; font-size: 17px!important; background: #bd7d4c; background: -webkit-gradient(linear, left top, left bottom, from(#bd7d4c), to(#7a4520)); background: -webkit-linear-gradient(top, #bd7d4c, #7a4520); background: -moz-linear-gradient(top, #bd7d4c, #7a4520); background: -ms-linear-gradient(top, #bd7d4c, #7a4520); background: -o-linear-gradient(top, #bd7d4c, #7a4520); background-image: -ms-linear-gradient(top, #bd7d4c 0%, #7a4520 100%); -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; } .ribbon:before, .ribbon:after { content:''; position: absolute; display: block; bottom: -1em; border: 1.5em solid #754a15; z-index: -1; } .ribbon:before { left: -2em; border-right-width: 1.5em; border-left-color: transparent; -webkit-box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px; -moz-box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px; box-shadow: rgba(000, 000, 000, 0.4) 1px 1px 1px; } .ribbon:after { right: -2em; border-left-width: 1.5em; border-right-color: transparent; -webkit-box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px; -moz-box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px; box-shadow: rgba(000, 000, 000, 0.4) -1px 1px 1px; } .ribbon .ribbon-content:before, .ribbon .ribbon-content:after { border-color: #66320f transparent transparent transparent; position: absolute; display: block; border-style: solid; bottom: -1em; content:''; } .ribbon .ribbon-content:before { left: 0; border-width: 1em 0 0 1em; } .ribbon .ribbon-content:after { right: 0; border-width: 1em 1em 0 0; } .nav { list-style-type:none; margin:0; padding:0; margin-left: auto; margin-right: auto; width: 901px; height: 0; } .nav li { display:block; float: left; } .nav li a { display:block; position: relative; z-index: 1; padding-top: 13px; padding-bottom: 12px; margin-left: 1px; width: 120px; font-size: 16px; color: #f5f5f5; text-shadow: #493724 0 -1px 0; text-decoration: none; border-right: 1px solid #6b3700; -webkit-box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49); -moz-box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49); box-shadow: 1px 0px 0px 0px rgba(212, 154, 91, 0.49); } .nav li:first-child { border-left: 1px solid #6b3700; -webkit-box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49); -moz-box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49); box-shadow: inset 1px 0px 0px 0px rgba(212, 154, 91, 0.49); } .nav li a:before { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; z-index: -1; opacity: 0; background: #c3885b; /* Old browsers */ background: -moz-linear-gradient(top, #c3885b 0%, #905226 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c3885b), color-stop(100%, #905226)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c3885b 0%, #905226 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c3885b 0%, #905226 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c3885b 0%, #905226 100%); /* IE10+ */ background: linear-gradient(to bottom, #c3885b 0%, #905226 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c3885b', endColorstr='#905226', GradientType=0); /* IE6-9 */ -webkit-transition: all 250ms linear; /* before hack */ content:"."; text-indent: -99999px; } .nav li a:hover:before { opacity: 1; } .ribbon img { position: relative; margin-top: -100px; background-color: whitesmoke; float: left; padding: 0; margin: 0; width: 167px; height: 117px; vertical-align:bottom; display: inline-block; } </code></pre> <p>My HTML</p> <pre><code>&lt;div class="masthead"&gt; &lt;/div&gt; &lt;div class="ribbon"&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="index"&gt;Home&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="about"&gt;About Us&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="about"&gt;About Bison&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;img src="./img/logo-nav.png"&gt; &lt;ul class="nav"&gt; &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="recipies"&gt;Recipies&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="products"&gt;Products&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;span class="navhover"&gt;&lt;/span&gt;&lt;a href="contact"&gt;Contact Us&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload