Solved

Bootstrap - header image

Posted on 2014-02-20
3
439 Views
Last Modified: 2014-02-20
Live site is here
http://www.wiplastic.com/

Beta Bootstrap site here
http://nsitedesigns.com/nsitedesigns/wiplastic_scott/index.html

1.  How do I fix state icon so it floats off page like live site?
2.  Is there a more comparable font that I can use which is responsive?
0
Comment
Question by:nsitedesigns
3 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 250 total points
ID: 39874921
The two pages are built differently - the live site is an image of everything.

On the new site add a new div just before your "header row" class div.

and give it this css
   background: #000;
    height: 30px;
    margin: 0 -15px;


And add this class to your css file
.logoimg > img {
    margin-top: -20px;
}

Tweak as necessary
0
 
LVL 52

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 39875102
An alternative to the above is to give the container a background of black and a top padding of say 50px; then add a negative margin to the image.
<div class="container" style="background: black; padding-top: 50px;">
    <div class="header row">
      <div class="col-xs-4 col-sm-2 logoimg">
            <img src="img/wisc.png" style="margin-top: -40px;">
 ...

Open in new window

0
 

Author Closing Comment

by:nsitedesigns
ID: 39875166
yeah!  it worked!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery scrollTop 2 40
What about 192.168.1.0/28 3 30
Add animation to your css 12 32
Why is this panel heading creating extra space 2 33
This article discusses four methods for overlaying images in a container on a web page
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

919 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now