CODEWITHSUNDEEP
cssimagehtmlalignment
user818700
user818700

Reputation:

Image aligning in divs

I'm in the process of creating a header section for a webapp. I'm having some difficulty aligning and positioning things the way it should.enter image description here

The logout button you see there on the right should move up into the light grey area. So in other words, in the same lign as the logo. This is the html for that section:

<div>

    <img src="Images/logo.png" id="imgLogo" alt="" />
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />

</div>

The CSS for these elements:

#imgLogo{
    margin: 0 auto;
    display: block;
}

#imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}

What am I doing wrong? What can I do to get that darn logout button to move more to the top? Thanks in advance!

Upvotes: 0

Views: 154

Answers (3)

debianek
debianek

Reputation: 589

You should set width for each element. Second img should has 

display: block

as well.

Or you could use something like this 

#imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
}


#imgbg {

    background-image: url(Images/logo.png);
    background-position: 50% 50%;
    background-repeat: no-repeat;
}




<div id="imgbg">
    <img src="Images/logout-idle.png"
         alt=""
         id="imgLogout"
         onmouseover="this.src='Images/logout-hover.png'"
         onmouseout="this.src='Images/logout-idle.png'"
         onmousedown="this.src='Images/logout-down.png'"
         />
</div>

Upvotes: 1

frontendzzzguy
frontendzzzguy

Reputation: 3242

If you set the 

 #imgLogout{
    float: right;
    margin-top: 4px;
    margin-right: 10px;
    }

to 

 #imgLogout{
     position: absolute;
     top: 4px;
     right: 10px
     }

this will put it where you want it.

Upvotes: 4

Patrick Toner
Patrick Toner

Reputation: 61

For the img logo, I would make an div element and have that as a background so like:

#imglogo{
    background: url('Images/logo.png') no-repeat;
}

Then for the log out button I would put that inside the div like so:

<div id="imglogo">
<img src="Images/logout-idle.png"
     alt=""
     id="imgLogout"
     onmouseover="this.src='Images/logout-hover.png'"
     onmouseout="this.src='Images/logout-idle.png'"
     onmousedown="this.src='Images/logout-down.png'"
     />
</div>

I hope that helped.

Upvotes: 4

Related Questions