Introduction [Section One]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae nisl vitae nibh porttitor dignissim a sed eros. Vestibulum nulla ligula, tristique sit amet cursus non, lacinia non ante. Curabitur urna elit, facilisis vitae elementum nec, placerat a elit. Suspendisse quis turpis vel ante dapibus pulvinar. Fusce vitae justo metus. In hac habitasse platea dictumst. Aliquam non diam elit. Morbi nibh sem, lobortis hendrerit egestas sed, lacinia in dui. Fusce vel dui est, non sagittis lectus. Aliquam tincidunt semper libero posuere sagittis. Nam nulla augue, egestas nec, condimentum sed arcu. Proin sed elit urna, luctus elementum eros. Aliquam erat volutpat. Integer tempus ante sit amet dolor rhoncus nec luctus nunc posuere. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.


Editing Notes

  • Any text that is not enclosed without (p) or (ul) tags will be centered by default.
  • What's up with the red borders, you ask? It's to help you customise the layout even more. If you wish to remove them, every time you see border: 1px red solid; you can delete the entire declaration. Or change the 1 to 0.
  • This layout combines relative and absolute positioning, which allows for a centered layout while utilizing absolute positioning. Notice how, the #container div is relatively positioned (div id="container" style="position: relative") in the HTML. Take note (img src="urlhere" id="focal_img" style="position: absolute"). In the CSS, #focal_img { top: 0; left: 0; } which means that it's shifted down 0 pixels and to the left 0 pixels /WITHIN/ the relatively positioned #container div -- not the entire browser. I don't know if that made any sense lolyep. The same goes for the #nav div.
  • The #container is currently 900px wide (you can set it to 1000px if you want idk). Note how the #header & #opaque div is 700px wide, and the #focal_img & #nav div is approximately 200px wide -- this is so that both side adds up 900px. You can change the ratio of the widths. For example, you can make it 600px/300px; or, if you change the width of the #container div to 1000px, even 750px/250px. The #focal_img is slightly bigger so that it overlaps the #opaque div... it looks more dynamic that way okay ;A;
  • This layout works best if the orientation of the #focal_img is facing right and if the image is a transparent png or gif -- which you'll have to render in photoshop or GIMP (which is free!). If you're not that great of an artist, try going to here or here [adoptables directories] or use a png from Details. Depending on the dimensions of your image, you may find it beneficial to adjust the positioning/width of the #focal_img (or the #nav div). Notice how in the CSS it has #focal_img {width: 300px;} yeah, change that 300px to anything you want really.
  • There are a LOT of nested divs. First, you have the #container (which houses the navigation, focal image on the left, header, and content), then #opaque (which is the 30% semi-opaque background border thingy), then you have #content (which is the completely white background), and then finally you have each .page (which is for each section). Be very careful not to delete any stray ending (/div) and remember to close all (/div) tags properly -- because that's the difference between this layout working properly and looking like a trainwreck.
  • Currently, this layout accomodates for seven sections ish. It is possible to add more sections and create more subpages. You can actually change the anchor names to anything you want, really as long as the spelling and capitalization remain consistent. For example, notice how (a href="#two")Character(/a) links to the subpage Character Profile [Section Two]. That's because I placed the anchor (a name="two")(/a) right before the corresponding (div class="page"). If you want to create a new subpage or section, just stick a (a name="eight")(/a)(div class="page")Section Eight(/div) right before the (/div)(/div)(/div).
  • I used a background from Felleia, although really any type of background works. All you have to do is grab the image URL from their textarea and in the CSS... body {background: url("copy-pasta-dat-img-URL-right-here") repeat fixed; } Generic abstract backgrounds work well too, like the ones at /~Lazahrus, or /~kiarlie, or /~quinsai.
Next »

Character Profile [Section Two]

Start describing their personality here or something idk. You can talk about their background (childhood), personality quirks, general temperament, good qualities and bad qualities, etc. Whatever it is your people do in character profile pages lol. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vitae nisl vitae nibh porttitor dignissim a sed eros. Vestibulum nulla ligula, tristique sit amet cursus non, lacinia non ante. Curabitur urna elit, facilisis vitae elementum nec, placerat a elit. Suspendisse quis turpis vel ante dapibus pulvinar. Fusce vitae justo metus. In hac habitasse platea dictumst.

Aliquam non diam elit. Morbi nibh sem, lobortis hendrerit egestas sed, lacinia in dui. Fusce vel dui est, non sagittis lectus. Aliquam tincidunt semper libero posuere sagittis.

Nam nulla augue, egestas nec, condimentum sed arcu. Proin sed elit urna, luctus elementum eros. Aliquam erat volutpat. Integer tempus ante sit amet dolor rhoncus nec luctus nunc posuere. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Likes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam.

Fusce et quam dui, sit amet faucibus massa.

Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros.

Praesent congue ultrices porta.

Vestibulum ac dui eu libero venenatis pharetra ut et turpis.

Dislikes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tincidunt magna sit amet odio dapibus lacinia at vel quam.

Fusce et quam dui, sit amet faucibus massa.

Fusce condimentum tempor sagittis. Curabitur eu tellus nec ipsum dignissim ultrices nec sit amet eros.

Praesent congue ultrices porta.

Vestibulum ac dui eu libero venenatis pharetra ut et turpis.

« Previous | Next »

History/Story [Section Three]

Start typing here I guess.

« Previous | Next »

Future Plans [Section Four]

Text Here.

Start typing here I guess.

« Previous | Next »

About Me [Section Five]

Start typing here I guess.

« Previous | Next »

Meet the Family [Section Six]

Start typing here I guess.

« Previous | Next »

Conclusion [Section Seven]

Start typing here I guess.

Credits

Template from That Kills Me. Bullets and divider from The Lunch Box. Background from Silent Serenity. PNG from Details.

« Previous



Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
Heads Up! You're about to leave Neopia!

You've clicked on a link that will take you outside of
Neopets.com. We do not control your destination's website,
so its rules, regulations, and Meepit defense systems will be
different! Are you sure you'd like to continue?



It is a journey
I must face...alone.
*dramatic music*
I want to stay on Neopets,
where the dangers of
Meepit invasion
are taken seriously.
/help/bumper/headers/log-in-to-facebook

NEOPETS, characters, logos, names and all related indicia
are trademarks of Neopets, Inc., © 1999-2014.
® denotes Reg. US Pat. & TM Office. All rights reserved.

PRIVACY POLICY | Safety Tips | Contact Us | About Us | Press Kit
Use of this site signifies your acceptance of the Terms and Conditions