The Lovely fail of coding!

[chili]

Before I go ahead and post these lovely crappy templates, I'm going to go ahead and say this.

I KNOW THEY SUCCCCKKKKK!

Try not to judge them too hard lol I mean I already know they suck since this is my first time attempting to create a template and I'm trying to learn how to make them. They are so annoying! So here they are!

First attempt after looking at a tutorial, a bit similar to the second attempt but I tried it on my own.

[atrb=border,0,true][atrb=cellSpacing,0,true] [atrb=style, width:420px; height:250px; background-color: cbe0b9; border:3px; solid:#abe171,bTable]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget dolor ut velit tincidunt tempus ut id ipsum. Donec elit ligula, porta et vestibulum id, porta vel arcu. Donec ornare arcu nec magna lobortis pretium. Donec laoreet orci ac ligula sagittis sit amet tempus lorem interdum. Duis rutrum velit eget sapien egestas scelerisque. Vivamus vitae lorem nulla, eu porta ligula. Nunc consequat porta nunc vitae placerat. Aliquam ac tellus dui. Nam ultrices felis id libero pharetra posuere. Vestibulum ut erat posuere est tristique commodo. Sed ornare auctor commodo. Suspendisse lacus felis, ullamcorper in congue sit amet, euismod at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ultricies ligula. Duis vulputate sollicitudin enim, vitae ullamcorper nisl elementum eget. Sed pharetra dui dolor. Cras malesuada nulla quis ipsum scelerisque dapibus. Curabitur egestas quam ut erat luctus ornare. Suspendisse mollis purus nec nunc varius euismod vehicula est vehicula. Proin pharetra enim vitae arcu molestie vel molestie dui ornare. Morbi felis mi, aliquet eu cursus feugiat, congue a urna. Donec blandit fringilla ultricies. Nunc ullamcorper imperdiet lorem, et mollis ligula faucibus id. Donec elementum varius nunc vel rhoncus. Cras sem nibh, pharetra in faucibus sed, rutrum eu purus. Nam viverra molestie lectus eget fringilla. Morbi risus dolor, semper quis iaculis eu, dignissim ac arcu. Nunc sem nisl, euismod a porta consequat, faucibus eu massa. Quisque lobortis pellentesque condimentum. Ut rutrum venenatis turpis consectetur convallis. Ut nec eros eget metus ullamcorper malesuada. Sed scelerisque condimentum libero vel ultrices. Aenean sit amet erat diam, ut consequat enim. Quisque interdum, est nec consequat aliquam, mi ipsum aliquam nisi, pulvinar consequat purus magna et neque. Mauris euismod mattis nisi sit amet viverra.

This was 2nd attempt. It doesn't work well with dark skins unless you change the colors...wait why am I saying you? I should be saying ME!

[atrb=border,0,true][atrb=cellspacing,3,true][atrb=style, width: 100px; height: 100px; background-color: #000000;border: 4px;solid:#e6e6e6; bTable][style= width: 100px; background-image:url(http://i45.tinypic.com/24nfs5t.jpg);border: 4px;solid: #000000; padding: 5px; margin-right: 5px; margin-top: 5px; margin-left: 5px;]

[/div][style=width: 100px; background-image:url(http://i45.tinypic.com/24nfs5t.jpg);border: 4px;solid: #000000; padding: 5px; margin-right: 5px; margin-top: 5px; margin-left: 5px;][/style][style= width: 100px; background-image:url(http://i45.tinypic.com/24nfs5t.jpg);border: 4px;solid: #000000; padding: 5px; margin-right: 5px; margin-top: 5px; margin-left: 5px;][/style][/td][td]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget dolor ut velit tincidunt tempus ut id ipsum. Donec elit ligula, porta et vestibulum id, porta vel arcu. Donec ornare arcu nec magna lobortis pretium. Donec laoreet orci ac ligula sagittis sit amet tempus lorem interdum. Duis rutrum velit eget sapien egestas scelerisque. Vivamus vitae lorem nulla, eu porta ligula. Nunc consequat porta nunc vitae placerat. Aliquam ac tellus dui. Nam ultrices felis id libero pharetra posuere. Vestibulum ut erat posuere est tristique commodo. Sed ornare auctor commodo.

Suspendisse lacus felis, ullamcorper in congue sit amet, euismod at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ultricies ligula. Duis vulputate sollicitudin enim, vitae ullamcorper nisl elementum eget. Sed pharetra dui dolor. Cras malesuada nulla quis ipsum scelerisque dapibus. Curabitur egestas quam ut erat luctus ornare. Suspendisse mollis purus nec nunc varius euismod vehicula est vehicula. Proin pharetra enim vitae arcu molestie vel molestie dui ornare. Morbi felis mi, aliquet eu cursus feugiat, congue a urna. Donec blandit fringilla ultricies. Nunc ullamcorper imperdiet lorem, et mollis ligula faucibus id. Donec elementum varius nunc vel rhoncus.

Cras sem nibh, pharetra in faucibus sed, rutrum eu purus. Nam viverra molestie lectus eget fringilla. Morbi risus dolor, semper quis iaculis eu, dignissim ac arcu. Nunc sem nisl, euismod a porta consequat, faucibus eu massa. Quisque lobortis pellentesque condimentum. Ut rutrum venenatis turpis consectetur convallis. Ut nec eros eget metus ullamcorper malesuada. Sed scelerisque condimentum libero vel ultrices. Aenean sit amet erat diam, ut consequat enim. Quisque interdum, est nec consequat aliquam, mi ipsum aliquam nisi, pulvinar consequat purus magna et neque. Mauris euismod mattis nisi sit amet viverra.

[/td][/tr][/table][/center]

[chili]

Notes: OMG this thing was a Pain in the freaking a**. I had to look at a bunch of examples to figure this one out and then sometimes my code wouldn't work so I would have to look at other codes to see how they got it to work and what had gone wrong. Of course what I imagined for this template is slightly off. The Words, Tags, and Notes I wanted it to be on the Right but it wouldn't go there so I decided to just stick with what I have. I wanted to use Titanium

[/i] for my song lyrics so I gone ahead and worked on a banner for this since that song got me inspired to do this actually. So yeah here is my attempt number 3 and 3rd fail. Of course whenever I think I can make a template without looking at examples, it ends up not happening.[/blockquote][/blockquote]

[atrb=border,0,true][atrb=cellspacing,0,true][atrb=style,width:510px;height:325px;background-image:url(http://i.imgur.com/GTmB4.png);border: 3px solid #8cbcf0; padding: 2px][STYLE=width: 70px; height: 30px; background-color: 8eafd3; color: 000000; font-family: Apple symbols; font-size: 9px; margin-bottom: 4px;]Words: xxx[/style][STYLE=width: 70px; height: 30px; background-color: 8eafd3; color: 000000; font-family: Apple symbols; font-size: 9px; margin-bottom: 4px;]Tag: xxx[/style][STYLE=width: 70px; height: 50px; background-color: 8eafd3; color: 000000; font-family: Apple symbols; font-size: 9px; margin-bottom: 4px;]Notes: xxx[/style]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget dolor ut velit tincidunt tempus ut id ipsum. Donec elit ligula, porta et vestibulum id, porta vel arcu. Donec ornare arcu nec magna lobortis pretium. Donec laoreet orci ac ligula sagittis sit amet tempus lorem interdum. Duis rutrum velit eget sapien egestas scelerisque. Vivamus vitae lorem nulla, eu porta ligula. Nunc consequat porta nunc vitae placerat. Aliquam ac tellus dui. Nam ultrices felis id libero pharetra posuere. Vestibulum ut erat posuere est tristique commodo. Sed ornare auctor commodo. Suspendisse lacus felis, ullamcorper in congue sit amet, euismod at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ultricies ligula. Duis vulputate sollicitudin enim, vitae ullamcorper nisl elementum eget. Sed pharetra dui dolor. Cras malesuada nulla quis ipsum scelerisque dapibus. Curabitur egestas quam ut erat luctus ornare. Suspendisse mollis purus nec nunc varius euismod vehicula est vehicula. Proin pharetra enim vitae arcu molestie vel molestie dui ornare. Morbi felis mi, aliquet eu cursus feugiat, congue a urna. Donec blandit fringilla ultricies. Nunc ullamcorper imperdiet lorem, et mollis ligula faucibus id. Donec elementum varius nunc vel rhoncus. Cras sem nibh, pharetra in faucibus sed, rutrum eu purus. Nam viverra molestie lectus eget fringilla. Morbi risus dolor, semper quis iaculis eu, dignissim ac arcu. Nunc sem nisl, euismod a porta consequat, faucibus eu massa. Quisque lobortis pellentesque condimentum. Ut rutrum venenatis turpis consectetur convallis. Ut nec eros eget metus ullamcorper malesuada. Sed scelerisque condimentum libero vel ultrices. Aenean sit amet erat diam, ut consequat enim. Quisque interdum, est nec consequat aliquam, mi ipsum aliquam nisi, pulvinar consequat purus magna et neque. Mauris euismod mattis nisi sit amet viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget dolor ut velit tincidunt tempus ut id ipsum. Donec elit ligula, porta et vestibulum id, porta vel arcu. Donec ornare arcu nec magna lobortis pretium. Donec laoreet orci ac ligula sagittis sit amet tempus lorem interdum. Duis rutrum velit eget sapien egestas scelerisque. Vivamus vitae lorem nulla, eu porta ligula. Nunc consequat porta nunc vitae placerat. Aliquam ac tellus dui. Nam ultrices felis id libero pharetra posuere. Vestibulum ut erat posuere est tristique commodo. Sed ornare auctor commodo. Suspendisse lacus felis, ullamcorper in congue sit amet, euismod at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ultricies ligula. Duis vulputate sollicitudin enim, vitae ullamcorper nisl elementum eget. Sed pharetra dui dolor. Cras malesuada nulla quis ipsum scelerisque dapibus. Curabitur egestas quam ut erat luctus ornare. Suspendisse mollis purus nec nunc varius euismod vehicula est vehicula. Proin pharetra enim vitae arcu molestie vel molestie dui ornare. Morbi felis mi, aliquet eu cursus feugiat, congue a urna. Donec blandit fringilla ultricies. Nunc ullamcorper imperdiet lorem, et mollis ligula faucibus id. Donec elementum varius nunc vel rhoncus. Cras sem nibh, pharetra in faucibus sed, rutrum eu purus. Nam viverra molestie lectus eget fringilla. Morbi risus dolor, semper quis iaculis eu, dignissim ac arcu. Nunc sem nisl, euismod a porta consequat, faucibus eu massa. Quisque lobortis pellentesque condimentum. Ut rutrum venenatis turpis consectetur convallis. Ut nec eros eget metus ullamcorper malesuada. Sed scelerisque condimentum libero vel ultrices. Aenean sit amet erat diam, ut consequat enim. Quisque interdum, est nec consequat aliquam, mi ipsum aliquam nisi, pulvinar consequat purus magna et neque. Mauris euismod mattis nisi sit amet viverra.

[gen]

float: right to have those three move to the right. You can position them with margins (ie. margin: 0px 0px 0px 0px which goes from top counterclockwise, or simply margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;). I recommend using padding by the way. It gives space between your text and the border.

[atrb=border,0,true][atrb=cellspacing,0,true][atrb=style,width:510px;height:325px;background-image:url(http://i.imgur.com/GTmB4.png);border: 3px solid #8cbcf0; padding: 2px] [STYLE=width: 70px; height: 30px; background-color: 8eafd3; color: 000000; font-family: Apple symbols; font-size: 9px; margin-bottom: 4px;]Words: xxx [STYLE=width: 70px; height: 30px; background-color: 8eafd3; color: 000000; font-family: Apple symbols; font-size: 9px; margin-bottom: 4px;]Tag: xxx[/style][STYLE=width: 70px; height: 50px; background-color: 8eafd3; color: 000000; font-family: Apple symbols; font-size: 9px; margin-bottom: 4px;]Notes: xxx[/style][/style]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget dolor ut velit tincidunt tempus ut id ipsum. Donec elit ligula, porta et vestibulum id, porta vel arcu. Donec ornare arcu nec magna lobortis pretium. Donec laoreet orci ac ligula sagittis sit amet tempus lorem interdum. Duis rutrum velit eget sapien egestas scelerisque. Vivamus vitae lorem nulla, eu porta ligula. Nunc consequat porta nunc vitae placerat. Aliquam ac tellus dui. Nam ultrices felis id libero pharetra posuere. Vestibulum ut erat posuere est tristique commodo. Sed ornare auctor commodo. Suspendisse lacus felis, ullamcorper in congue sit amet, euismod at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ultricies ligula. Duis vulputate sollicitudin enim, vitae ullamcorper nisl elementum eget. Sed pharetra dui dolor. Cras malesuada nulla quis ipsum scelerisque dapibus. Curabitur egestas quam ut erat luctus ornare. Suspendisse mollis purus nec nunc varius euismod vehicula est vehicula. Proin pharetra enim vitae arcu molestie vel molestie dui ornare. Morbi felis mi, aliquet eu cursus feugiat, congue a urna. Donec blandit fringilla ultricies. Nunc ullamcorper imperdiet lorem, et mollis ligula faucibus id. Donec elementum varius nunc vel rhoncus. Cras sem nibh, pharetra in faucibus sed, rutrum eu purus. Nam viverra molestie lectus eget fringilla. Morbi risus dolor, semper quis iaculis eu, dignissim ac arcu. Nunc sem nisl, euismod a porta consequat, faucibus eu massa. Quisque lobortis pellentesque condimentum. Ut rutrum venenatis turpis consectetur convallis. Ut nec eros eget metus ullamcorper malesuada. Sed scelerisque condimentum libero vel ultrices. Aenean sit amet erat diam, ut consequat enim. Quisque interdum, est nec consequat aliquam, mi ipsum aliquam nisi, pulvinar consequat purus magna et neque. Mauris euismod mattis nisi sit amet viverra. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eget dolor ut velit tincidunt tempus ut id ipsum. Donec elit ligula, porta et vestibulum id, porta vel arcu. Donec ornare arcu nec magna lobortis pretium. Donec laoreet orci ac ligula sagittis sit amet tempus lorem interdum. Duis rutrum velit eget sapien egestas scelerisque. Vivamus vitae lorem nulla, eu porta ligula. Nunc consequat porta nunc vitae placerat. Aliquam ac tellus dui. Nam ultrices felis id libero pharetra posuere. Vestibulum ut erat posuere est tristique commodo. Sed ornare auctor commodo. Suspendisse lacus felis, ullamcorper in congue sit amet, euismod at mauris. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer eget ultricies ligula. Duis vulputate sollicitudin enim, vitae ullamcorper nisl elementum eget. Sed pharetra dui dolor. Cras malesuada nulla quis ipsum scelerisque dapibus. Curabitur egestas quam ut erat luctus ornare. Suspendisse mollis purus nec nunc varius euismod vehicula est vehicula. Proin pharetra enim vitae arcu molestie vel molestie dui ornare. Morbi felis mi, aliquet eu cursus feugiat, congue a urna. Donec blandit fringilla ultricies. Nunc ullamcorper imperdiet lorem, et mollis ligula faucibus id. Donec elementum varius nunc vel rhoncus. Cras sem nibh, pharetra in faucibus sed, rutrum eu purus. Nam viverra molestie lectus eget fringilla. Morbi risus dolor, semper quis iaculis eu, dignissim ac arcu. Nunc sem nisl, euismod a porta consequat, faucibus eu massa. Quisque lobortis pellentesque condimentum. Ut rutrum venenatis turpis consectetur convallis. Ut nec eros eget metus ullamcorper malesuada. Sed scelerisque condimentum libero vel ultrices. Aenean sit amet erat diam, ut consequat enim. Quisque interdum, est nec consequat aliquam, mi ipsum aliquam nisi, pulvinar consequat purus magna et neque. Mauris euismod mattis nisi sit amet viverra.

[kouichi]

Thank you for the help Tanz ^_^. I'll make sure to remember that when I work on another template.

[pa]

/recommends adding padding.
but if you don't like padding, 'dats cool