Forums

burnzedy

Hi,

I have a problem that seems very simple but for now I did not find any solution (don't really know where and how to search for this...).
I want the html output of a page to be in this order (it's a one column full width layout also content and menu-images are not fixed in height):

<div class=\"page\">
    <div class=\"header\"></div>
    <div class=\"content\"></div>
    <div class=\"menu-images\"></div>
</div>

And I would like the visual appearance (CSS) of that page to be in that order:

<div class=\"page\">
    <div class=\"header\"></div>
    <div class=\"menu-images\"></div>
    <div class=\"content\"></div>
</div>

Now I have tried this (HTML and CSS):


<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\" /><title>Document sans nom</title>
<style type=\"text/css\">
* {margin:0;padding:0;}
body {
 background-color: #000;
}
#page>div {
  width: 100%;
}
#header {
  height: 100px;
  background-color: magenta;
} 
#container {
  position: relative;
}
#content {
  position: absolute;
  top: 100%;
  background-color: pink;
  width: 100%;
}
#menu {
  height:150px;
  background-color: red;
  line-height: 150px;
  text-align: center;
}
</style>
</head>

<body>
<div id=\"page\">
  <div id=\"header\"><h1>Header site</h1></div>
  <div id=\"container\">
    <div id=\"content\"><h2>Titre page</h2><p>Lorem ipsum dolor sit amet...</p></div>
    <div id=\"menu\"><p>Ici il y a un menu avec plein d'images.</p></div>
  </div>
</div>
</body>
</html>

It does the job to put the menu before the content, but since the content is in absolute position it will hide any extra content after it (so adios footer)...

So does anyone has a better idea?

Thanks!

ikthius

I dont think I know what your on about, but if you are trying to code for example....HTML 1,2,3,4,5 CSS 5,3,4,1,2...

then go down the road of everything being absolute positioning

burnzedy

Thanks for your reply!

In fact I can't go for everything in absolute position because I don't know the height of the reversed blocks.

And if I need to do this,it's because the website is about photography and I would prefer that google sees the textual content first and that the users sees the images and the menu first (which is composed of many lists whith losts of keywords..).

treehouse : what would you like to learn today?

Forums

Reversed Html Flow with CSS