CODEWITHSUNDEEP
csstwitter-bootstrapimage
ftbadolato
ftbadolato

Reputation: 23

Display an Image Without Pushing Down Content

I am using a template that was purchased to develop a site, and need to insert an image on the page without pushing the content down. Below is the link to the page I am working on: http://www.onepropertyway.com/WorkOrder/default.aspx?woid=26&code=8lPRt3hxtg&vid=7

I recently added the following div with the logo:

<div style="margin-left:-20px; display:inline; *zoom:1;text-align:center">
<img src="/uploads/logos/8_100h.gif">
</div>`

As you can see, the content of the page is being pushed down. I'd like this image to appear in the middle just between the main green menu, and the horizontal line without pushing any content down. I tried using z-index as well, but that did not work either. I am sure this is pretty simple for a seasoned CSSer, but that's not me unfortunately!

Here is a link to the desired look: desired look

Upvotes: 2

Views: 2109

Answers (3)

ankita patel
ankita patel

Reputation: 4251

Give this css to imgContainerclass.

.imgContainer {
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  text-align: center;
  top: -23px;
}
.row_6 {      
   position: relative;
}

Upvotes: 1

Dream_Cap
Dream_Cap

Reputation: 2302

Here is the img container:

<div class="imgContainer">
    <img src="/uploads/logos/8_100h.gif">
</div>

Here is the css. This will center the img below the menu and above the horizontal line:

.imgContainer {
    display: flex;
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex; 
    justify-content: center;
}

Take the padding off of the h2 "Word Order #26" and header like so. The padding is adding space above the h2 and below the menu. This removes the padding.:

header, h2 { //probably better if you make classes for these elements so you can target them
 padding: 0;
}

You may want to add a class like this:

<header class="headerClass">......</header>

<h2 class="workorder">Work Order #26</h2>

.headerClass {
    padding-bottom: 0;
}


.workorder {
    padding-top: 0;
}

Upvotes: 1

Hiren Vaghasiya
Hiren Vaghasiya

Reputation: 5544

use this for image set in center

.container{
position:relative;}
.absolute_logo{
width:200px;
height: 70px;
position:absolute;
left: 0;
right:0;
margin:auto;
top: -27px;
}
.absolute_logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
<div class="container">
<div class="absolute_logo">
  <img src="/uploads/logos/8_100h.gif" />
</div>
</div>

Upvotes: 1

Related Questions