Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Use orientation detection to determine position of an image

Use orientation detection to determine position of an image

Problem

I got a header(h1) on a HTML page where a title is centered. The portrait mode lets an image be above that title, and I want the image to be on the left side of the Title when changing orientation to landscape.

I've tried with
combining with @media screen and (orientation:portrait/landscape) and different settings without any progress. If I use float left the image still stay on the line above the Title etc. I really have no clue how to solve it..

 
 
 

"picture"
Car

Does anyone have any suggestions?

Problem courtesy of: Dean.V

Solution

Hope this Code will help you.

html Code

Call

Css Code for Normal View

h1{
    text-align:center;
}
h1 img{
    display:inline;
}
h1 span{
    display:block;
}

Css Code for landscape View

h1 span{
    display:inline;
    background-color:#3CF;
    position:relative;
    top:-25px;
}

adjust the top position according to your image height.

Solution courtesy of: Roy Sonasish

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Use orientation detection to determine position of an image

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×