CODEWITHSUNDEEP
htmlcssresponsive-design
OzzC
OzzC

Reputation: 821

trying to put my <h1>title</h1> above my image

Im trying to do something, but I dont know if its possible.

I have a html structure for desktop and tablet devices and its working fine, but now for mobile, I want to change a little bit the structure of my news.

In mobile version I want to put my <h1>Title of the news</h1> above the image, but its appearing below the image, because in my html I have the title image first, but I dont want to change my html structure, its not possible to put my title above my image with only CSS?

Im trying some tests but nothing is working!

I put my example in this fiddle:

http://jsfiddle.net/Zkpj7/

For a better understanding, I have this images to show what I Want:

enter image description here

Upvotes: 0

Views: 92

Answers (2)

JRulle
JRulle

Reputation: 7568

The CSS answers will all be less than ideal since CSS is for changing style not structure. I would recommend using jquery. Call this on the id's for the title and picture to reorder them.

$("#title").insertBefore("#pic");

If you want, add something like this to fire when the screen size gets too small (set whatever threshold you want).

$( window ).resize(function() {
  if($(window).width() < 400){
     $("#title").insertBefore("#pic");
  }
});

Upvotes: 1

sebastian
sebastian

Reputation: 17328

Try changing CSS like this:

#news
{
    height:140px; 
    margin-bottom:5px; 
    border-bottom:1px solid #f3f3f3;
    padding-bottom:43px;    
    position:relative;
    padding-top: 45px; /*CHANGE VALUE ACCORDING TO YOUR NEEDS*/
}

#news h2 {
    position: absolute; top: 0px; left: 0px; /*ABSOLUTE POSITIONING*/
    margin: 0px;
}

#news span 
{
    color:#7a7a7a;
    position: absolute; top: 25px; left: 0px; /*ABSOLUTE POSITIONING*/
}

I can't think of a good solution that would not use absolute positioning...

I really would suggest changing the markup though :p

http://jsfiddle.net/Zkpj7/9/

Upvotes: 1

Related Questions