Character sheet help

Request custom templates here. There is no guarantee that it will be made for you. Please be respectful, polite, and patient when posting a request.

Character sheet help

Postby Supahsnail » May 18th, 2014, 5:43 pm

I tried to make a character archive page for my website, but I don't know enough about HTML and CSS to get it to work! All I'm trying to do is make a picture with a list of information underneath it (Similar to a wiki page) and a paragraph of text to the right of it. This is as far as I got.
<figure>
<style>
p.padding
{
padding-top:5px;
padding-bottom:5px;
padding-right:5px;
padding-left:50px;
}
</style>
<div class="container">
<span style="float: left">
<img src="ImageURL" border="3" width="150">
<figcaption>-Name: XXX<br>
-Age: XXX<br>
-Power: XXX<br>
-First Appearance: #1</span></div></figcaption>
</figure>
<p class="padding"><font size="3">Some text</font></p>

If anyone has a template that I can use or a way to fix this one, that would really help a lot! I've stubbornly spent hours trying to figure this out myself.
User avatar
Supahsnail
 
Posts: 63
Joined: November 11th, 2013, 9:45 am

Re: Character sheet help

Postby eishiya » May 18th, 2014, 5:59 pm

Try this?
CSS, goes wherever you have your CSS:
Code: Select all
.container {
padding: 5px;
}
.infobox {
margin-left: 50px;
padding: 5px;
float: right;
}
.infobox img {
display: block;
margin-bottom: 5px;
}


Code for each character:
Code: Select all
<div class="container">
<div class="infobox">
<img src="your image here" alt="alt text">
Name: XXX<br>
Age: XXX<br>
Power: XXX<br>
First appearance: XXX
</div>
Some text
</div>


If you want the text to always be to the side of the info box and never go under it even if the text is long (unlike on Wikipedia, where the text wraps around the infoboxes), then this is an alternative:
Add this CSS to the above:
Code: Select all
.textcont {
float: right;
}

.clear {
clear: both;
line-height: 0;
}


Different HTML:
Code: Select all
<div class="container">
<div class="infobox">
<img src="your image here" alt="alt text">
Name: XXX<br>
Age: XXX<br>
Power: XXX<br>
First appearance: XXX
</div>
<div class="textcont">
Some text
</div>
<div class="clear"></div>
</div>
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

Re: Character sheet help

Postby Supahsnail » May 18th, 2014, 7:57 pm

eishiya wrote:Try this?
CSS, goes wherever you have your CSS:
Code: Select all
.container {
padding: 5px;
}
.infobox {
margin-left: 50px;
padding: 5px;
float: right;
}
.infobox img {
display: block;
margin-bottom: 5px;
}


Code for each character:
Code: Select all
<div class="container">
<div class="infobox">
<img src="your image here" alt="alt text">
Name: XXX<br>
Age: XXX<br>
Power: XXX<br>
First appearance: XXX
</div>
Some text
</div>


If you want the text to always be to the side of the info box and never go under it even if the text is long (unlike on Wikipedia, where the text wraps around the infoboxes), then this is an alternative:
Add this CSS to the above:
Code: Select all
.textcont {
float: right;
}

.clear {
clear: both;
line-height: 0;
}


Different HTML:
Code: Select all
<div class="container">
<div class="infobox">
<img src="your image here" alt="alt text">
Name: XXX<br>
Age: XXX<br>
Power: XXX<br>
First appearance: XXX
</div>
<div class="textcont">
Some text
</div>
<div class="clear"></div>
</div>
Thanks a bunch! I just tried it out.

The code works well accept for one thing: The text on the left of the info box isn't long enough to reach to the bottom of the info box, so the character bellow it goes underneath the text instead of the info box. It's hard to explain. If you put the info box code multiple times, you'll see it. They aren't separated from one another.
User avatar
Supahsnail
 
Posts: 63
Joined: November 11th, 2013, 9:45 am

Re: Character sheet help

Postby eishiya » May 18th, 2014, 9:26 pm

You should be able to solve that by putting
Code: Select all
<div class="clear"></div>

after your "some text" part (remember to copy the relevant CSS for the "clear" class, of course!).
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am

Re: Character sheet help

Postby Supahsnail » May 19th, 2014, 9:24 am

eishiya wrote:You should be able to solve that by putting
Code: Select all
<div class="clear"></div>

after your "some text" part (remember to copy the relevant CSS for the "clear" class, of course!).

What is the relevent css?
User avatar
Supahsnail
 
Posts: 63
Joined: November 11th, 2013, 9:45 am

Re: Character sheet help

Postby eishiya » May 19th, 2014, 9:44 am

Code: Select all
.clear {
clear: both;
line-height: 0;
}
Image
User avatar
eishiya
 
Posts: 9831
Joined: December 5th, 2009, 11:17 am


Return to Template Requests

Who is online

Users browsing this forum: No registered users and 1 guest