Editing Notes

  • ... I'm just really tired and I can't really be bothered to code in the usual pre-coded features so you will have to deal with it XD
  • Anything not enclosed with (ul) or (p) tags will be centered.
  • This layout I believe works in IE 10 but probably blows up in older versions of IE, since position: fixed; doesn't work in older versions of IE on petpages. Everything else should be fine.
  • First you have the #container, which houses everything -- title, content, navigation, and focal image. Nested are the #sidebar and the #opaque. The #sidebar has two components: the #nav (navigation) and #focal_image. The #opaque is actually the semi-opaque border thing, which nests the #content.
  • Did you make sense of the previous point? Probably not. Anywho, you can adjust the widths to your liking, but it is a bit tricky. The #container is 900px wide. When you adjust the #sidebar and #opaque divs, you have to make sure it adds up to or close to 900px. For example, you could make it 500px/400px. Or 700px/200px. HOWEVER. There is a catch. Notice how the #sidebar has margin-left: 620px; declaration. If you decide to make the #opaque div say, 700px, you will also have to adjust that margin-left to 700px or whatever. If none of this made sense to you just don't touch the widths or anything okay.
  • You can adjust the width of the #focal_img (the maraquan aisha in the corner there) to anything you want, really. However if you make it like 600px wide or something crazy like that, it's going to cover up the content and annoy people. It's intended for your to replace with your own artwork. This layout works best if the orientation of the #focal_img is facing left 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.
  • I put in red borders to help illustrate the last three points. If you want to remove them, wherever it says border: 1px red solid; you can delete that or change the 1 to 0.
  • 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") top center repeat fixed; } Generic abstract backgrounds work well too, like the ones at /~Lazahrus, or /~kiarlie, or /~quinsai.
  • As for link anchors, in order to create an anchor place (a name="anchorname")(/a) directly right before the (h1)Heading(/h1) of the segment of the page. And then to link to it, it's basically (a href="#anchorname")Link Here(/a). You can really name the anchor anything, as long as you keep the spelling and capitalization of the anchor name and its corresponding hyperlink the consistent. For example, notice how the link (a href="#char")Character Profile(/a) leads to the section Character Profile when clicked on. That's because I placed (a name="char")(/a) right before (h1)Character Profile(/h1)

Character Profile

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.

Sed odio metus, ultrices non ultrices vitae, lobortis et nisl. Phasellus ullamcorper, quam id varius iaculis, turpis lectus auctor magna, sit amet sagittis ante tortor sed purus. Quisque euismod nisl ullamcorper eros eleifend vel cursus augue bibendum. Aenean dignissim convallis dignissim. Nam rutrum nisl et enim aliquam sed interdum turpis commodo. Pellentesque elit enim, dapibus id aliquam nec, sagittis rutrum leo. Quisque ornare arcu non mauris congue rhoncus. Curabitur mauris ipsum, convallis vitae ornare vel, porttitor at mi.

In auctor massa et metus placerat tempor. In laoreet sollicitudin mattis. Ut dapibus dignissim velit quis auctor. Vivamus sollicitudin, eros a euismod adipiscing, dolor magna luctus libero, sed pellentesque ipsum mauris vitae nulla. Nam a pulvinar ante. Maecenas nec risus libero. Phasellus euismod tellus massa, eget rutrum odio. Phasellus nisi odio, euismod in venenatis ut, bibendum eu mauris. Suspendisse id velit tellus. Nam a turpis magna.

Conclusion

Template from That Kills Me. PNG from Details. Background from Silent Serenity.