HTML help

Abendrot · Dec 10, 2016

I've been working on a banner for my IC posts in a fandom RP that i'm participating in, but there's just one problem: it comes out badly when I paste it into the source.

Ideally, it should look something like this: View attachment Geralt.html

But then it comes out like this:

I look into the source again, and it looks like half of my code has inexplicably disappeared.

Here's the original code:

<!DOCTYPE html>
<html>
<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
#card{
border:2px solid black;
width:200px;
height:100px;
font-family: 'Roboto Condensed';
font-weight: bold;
text-align: center;
margin: 5px;
float:left;"
}
</style>
</head>
<body>
<div id="card">
<span style="font-size:16px;">Geralt</span><br>
<span style="font-size:10px;">Grassy Field</span><br>
<img src="https://s-media-cache-ak0.pinimg.com/236x/4d/d2/ae/4dd2ae9a5af8ca75912eab3b26d3f4f9.jpg" style="width:45px;height:45px;">
</div>

<p style="font-family: 'Roboto Condensed';">
write here
</p>
</body>
</html>

Here's the code RPNation gives me:

<div id="card">
   <span style="font-size:16px;">Geralt</span><br>
   <span style="font-size:10px;">Grassy Field</span><br>
   <img alt="4dd2ae9a5af8ca75912eab3b26d3f4f9.jpg" src="https://www.rpnation.com/applications/core/interface/imageproxy/imageproxy.php?img=https://s-media-cache-ak0.pinimg.com/236x/4d/d2/ae/4dd2ae9a5af8ca75912eab3b26d3f4f9.jpg&key=272e407f560cb1d56ef3998dd4150f7d952d6028e029130c05f2e89f9d2dd919" style="width:45px;height:45px;">
</div>

<p style="font-family: 'Roboto Condensed';">
   write here
</p>

Any feedback at all would be helpful.

Chordling · Dec 10, 2016

You'll want to float your text paragraph next to the image you want to use. As of right now, the coding believes that the image and the text paragraph are two separate paragraphs of content. I suggest floating the image to the left of your text within the same paragraph coding as the text.

Dusky · Dec 10, 2016

Also, you don't need to specify doctype or head or anything like that. The code you're writing is put into a div (your post box), not into a whole new file.

What you really need is an empty paragraph above your CSS. For some reason, the site removes any CSS that isn't preceded by actual content.

Abendrot · Dec 10, 2016

Anomaly said:
What you really need is an empty paragraph above your CSS. For some reason, the site removes any CSS that isn't preceded by actual content.

Tried that and it works. Thanks a bunch you guys.

HTML help

Abendrot

修羅の花

Chordling

Bardbarian, the Divine Chordia of Concordia

Dusky

Succubus

Abendrot

修羅の花

Users who are viewing this thread

Similar threads