Single Column Layout Tutorial HELP

lRhyss · 25-04-2011, 10:17 PM

their used to be a tutorial to code a single column layout on Habboemotion, It was a pink content box with some song lyrics inside. Just wondering if anyone has this link?

I think it was posted on HxF somewhere but I can't seem to find it! D:

Fiendly · 26-04-2011, 10:20 AM

Single column layout?
That's pretty simple..

Here's my version of one:

Index.html

Code:

<!DOCTYPE HTML>
 <head>
  <title>YourFansite.COM</title>
   <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
<body>

 <div id="container">
  <div id="m_top"></div>
   <div id="m_mid">
    <div id="content">

     <center>
     YourFansite is currently under scheduled maintenance, <br>
     Sorry for your inconvenience.<br><br>
     YourFansite Staff
      <br>
      <br>
       <a href="javascript:history.go(-1)"><img src="images/gback.PNG" border="0"></a>
     </center>

    </div>
   </div>
  <div id="m_bot"> 
  </div>
 </div>

</body>

Style.css

Code:

body {
    
    font-size:        9px;
    background-image:    url(images/bg.gif);
        font-family:        volter;
    font-weight:        bold;
}

#container {
    width:            504px;
    height:            auto;
    margin-left:        auto;
    margin-right:        auto;
    margin-top:         100px;
}

#m_top {
    background-image:    url(images/m_top.PNG);
    width:            504px;
    height:            59px;

}


#m_mid {
    background-image:    url(images/m_mid.PNG);
    width:            504px;
    height:            auto;

}

#m_bot {
    background-image:    url(images/m_bot.PNG);
    width:            504px;
    height:            19px;
}

#content {
        width:            481px;
    margin-left:        13px;
}

@font-face {
    font-family:         Volter;
        src:             url(volter.ttf);
}

Just use the m_ parts.
Uses a top, middle and bottom.

Here is a preview: http://mat.6.je/Maintenance%20Design/
Note: There are some adverts on this.. Using a free site. Will not buy a website yet.

Jack! · 26-04-2011, 11:03 AM

Its on here:

http://www.habboxforum.com/showthrea...=453923&page=1

Fiendly · 27-04-2011, 08:12 AM

Originally Posted by Jaaaack!

Its on here:

http://www.habboxforum.com/showthrea...=453923&page=1

I could of sworn that tutorial is the exact same style as the old HabboEmotion one.
Except they had the blue one.. So someone recoloured..? DOn't like the explanation though.

Whoever made it did a good effort though.

Jack! · 27-04-2011, 09:07 AM

Originally Posted by Fiendly

I could of sworn that tutorial is the exact same style as the old HabboEmotion one.
Except they had the blue one.. So someone recoloured..? DOn't like the explanation though.

Whoever made it did a good effort though.

That was made before the habboemotion one, look at the date of it.

Fiendly · 28-04-2011, 10:41 AM

Originally Posted by Jaaaack!

That was made before the habboemotion one, look at the date of it.

2008?
I'm pretty sure it was on HabboEmotion's previous site name (HabboRing??).

Jack! · 28-04-2011, 06:53 PM

Originally Posted by Fiendly

2008?
I'm pretty sure it was on HabboEmotion's previous site name (HabboRing??).

Habboring was nothing to do with habboemotion.

Fiendly · 29-04-2011, 11:18 AM

Originally Posted by Jaaaack!

Habboring was nothing to do with habboemotion.

I cant remember the original name.
Before HabboEmotion was open, there was a resource site before it which transferred everything to it.

Do you think HE would take everything the previous site had?

Thread: Single Column Layout Tutorial HELP

Thread Tools

Single Column Layout Tutorial HELP

Posting Permissions