Posting template help?

[Black Kitten 2]

So. I have been working on a posting template for a site. And whilst the bulk of it is done. There are a few issues I cannot seem to fix. And do not know how. The first, main one, is when you post it, it does not post in the center of the forum. It aligns more to the left for some reason. And the other issue is, I cannot position the two headings where I want them. I want them moved over slightly, so they are not touching the border. But cannot seem to get them to move. Any help on this, & tidying up of the code, would be much appreciated thanks.  I have enclosed the code below.

 

[dohtml]

<div style="width:500px; height:660px; border:10px solid #192e26; background:url('https://k.nickpic.host/BA86Ss.jpg');">

<div style="text-align:center; display:block; margin-top:20px; width:500px; height:216px; padding:20px;">
<div style="width:142px; height:110px; float:left; margin-top:50px; border:1px solid #000000; padding:3px;"><img src="https://via.placeholder.com/140x110"></div><div style="float:left;"><img src="https://k.nickpic.host/BASZDP.png"></div><div style="width:142px; height:110px; float:left; margin-top:50px; border:1px solid #000000; padding:3px;"><img src="https://via.placeholder.com/140x110"></div><br>
</div>

<h1 style="display:block; width:100%; padding-bottom:10px; height:26px; width:500px; color:#2d6658; border-bottom:1px solid #000000; line-height:26px; margin:0px 0px 10px 0px; letter-spacing:2px; font-weight:lighter; font-size:26px; font-style:italic; font-family:times;">this is the main header</h1>
<h2 style="display:block; width:100%; height:26px; line-height:26px; margin:0px; letter-spacing:3px; font-weight:lighter; font-family:arial narrow; text-transform:uppercase; font-size:12px;">write anything here that pertains to your story.</h2>

<div style="text-align:justify; display:block; padding:20px; letter-spacing:1px; width:460px; color:#000000; font-family:times; font-size:12px; line-height:160%; overflow: auto; width:460px; height:200px;">

 
<font style="font-size:60px; line-height:42px; color:#2d6658; padding-right:5px; float:left; position:relative;">L</font>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<blockquote style="text-align:center; color:#2d6658; margin-top:20px; margin-bottom:30px; padding:10px; font-style:italic; font-size:12px; letter-spacing:1px; border-bottom:1px solid #471f20;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<blockquote style="text-align:center; color:#2d6658; margin-top:20px; margin-bottom:30px; padding:10px; font-style:italic; font-size:12px; letter-spacing:1px; border-bottom:1px solid #471f20;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
</div>

<div style="width:460px; font-family:times; font-size:12px; letter-spacing:1px; line-height:16px; text-align:center; margin-bottom:50px; padding:10px 20px 20px 20px;">
 
The first rule of Serpent Law. <i>No Serpent stands alone.</i><br>

<a href="/LINK" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">OUTFIT</a> <a href="/LINK" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">SOUNDTRACK</a> <a href="/LINK" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">@PARTNER IN CRIME</a><a href="http://tcaos.jcink.net/index.php?act=Pages&pid=10" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">CREDIT</a> <br>


 



</center>

[/dohtml]

 

Also! As an extra. If there is a way to make the images auto resize, that would be a huge help too. But that's just a little extra. 

Edited January 8, 2019 by Black Kitten

[Arceus 1,082]

To centre it easily, just add margin: 0 auto; to the styling of the very first div.

 

For these two headers, you can easily position them with the margining. With them like this: margin: 0 0 10px 0; this is top, right, bottom, left. So change the last 0px to a 20px or whatever, and then adjust the width to make it fit in the box again. The h2 is flat margin 0, and you can either change to match the h1, or use padding is probably the easiest. You can also use padding on the h1.

[Black Kitten 2]

51 minutes ago, Arceus said:

To centre it easily, just add margin: 0 auto; to the styling of the very first div.

 

 

I have done that, but it has just widened the template rather centered it the size it is .

[Arceus 1,082]

Copy-paste the new line of code after you've made that change for me?

[Black Kitten 2]

<div style="margin: 0 auto; width:500px; height:660px; border:10px solid #192e26; background:url('https://k.nickpic.host/BA86Ss.jpg');">

That's what I have now

[Arceus 1,082]

Ahm, the only other thing I can think, because that should be working, is where are you coding this? Sometimes a site's CSS can start conflicting with your own in strange ways. Inline styling should override most things, but if you don't account for what all it needs to override, it can be a bit wonky anyway for no clear reason.

[Black Kitten 2]

35 minutes ago, Arceus said:

Ahm, the only other thing I can think, because that should be working, is where are you coding this? 

 Do you mean where as in the site it's on? 

Do you need the css from that?

[Arceus 1,082]

No, that's fine.

I would recommend peeking at the inspect element information to see what's going on in better detail. If you don't know how to do that or how to use it:

The red box to the right at the bottom is what you'll be looking at. This is in Chrome, but it's the same idea in Firefox and such. It may display a bit differently, depending on whether it's docked to the browser window or not.

 

If there is CSS conflicting with what you're trying to do, you'll see it. Every piece of CSS that alters the element you're inspecting is listed there, and it can give you a much better idea of what's going sideways and why, and how to fix it. As much as I'd like to recommend you not code it on a site and instead on a code editor of some kind, you'll still have to adjust it to account for the site's code to make it display properly on it, anyway, so you may as well keep going. As you can kind of see here, though, it centres fine on my test site.

 

Let me know what you find; I'm curious as to what's going on exactly. (If you need help making sense of it, you can give me a screenshot of the inspect element window/box/whatever and I can help you pick it apart.)

[jordan 23]

@Black Kitten

 

try this 🙂

 

 

[dohtml]

<div style="margin:auto;width:500px; height:660px; border:10px solid #192e26; background:url('https://k.nickpic.host/BA86Ss.jpg');">

<div style="text-align:center; display:block; margin-top:20px; width:500px; height:216px; padding:20px;">
<div style="width:142px; height:110px; float:left; margin-top:50px; border:1px solid #000000; padding:3px;"><img src="https://via.placeholder.com/140x110"></div><div style="float:left;"><img src="https://k.nickpic.host/BASZDP.png"></div><div style="width:142px; height:110px; float:left; margin-top:50px; border:1px solid #000000; padding:3px;"><img src="https://via.placeholder.com/140x110"></div><br>
</div>

<h1 style="display:block; width:100%; padding-bottom:10px; height:26px; width:485px; color:#2d6658; border-bottom:1px solid #000000; line-height:26px; margin:0px 0px 10px 0px; letter-spacing:2px; font-weight:lighter; font-size:26px; font-style:italic; font-family:times; padding-left:15px;">this is the main header</h1>
<h2 style="display:block; width:100%; height:26px; line-height:26px; margin:0px; letter-spacing:3px; font-weight:lighter; font-family:arial narrow; text-transform:uppercase; font-size:12px;  padding-left:15">write anything here that pertains to your story.</h2>

<div style="text-align:justify; display:block; padding:20px; letter-spacing:1px; width:460px; color:#000000; font-family:times; font-size:12px; line-height:160%; overflow: auto; width:460px; height:200px;">

 
<font style="font-size:60px; line-height:42px; color:#2d6658; padding-right:5px; float:left; position:relative;">L</font>orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<blockquote style="text-align:center; color:#2d6658; margin-top:20px; margin-bottom:30px; padding:10px; font-style:italic; font-size:12px; letter-spacing:1px; border-bottom:1px solid #471f20;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<blockquote style="text-align:center; color:#2d6658; margin-top:20px; margin-bottom:30px; padding:10px; font-style:italic; font-size:12px; letter-spacing:1px; border-bottom:1px solid #471f20;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore.</blockquote>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
</div>

<div style="width:460px; font-family:times; font-size:12px; letter-spacing:1px; line-height:16px; text-align:center; margin-bottom:50px; padding:10px 20px 20px 20px;">
 
The first rule of Serpent Law. <i>No Serpent stands alone.</i><br>

<a href="/LINK" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">OUTFIT</a> <a href="/LINK" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">SOUNDTRACK</a> <a href="/LINK" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">@PARTNER IN CRIME</a><a href="http://tcaos.jcink.net/index.php?act=Pages&pid=10" style="padding:2px 2px 2px 4px; letter-spacing:3px; font-weight:lighter; font-size:11px; font-family:arial narrow; color:#2d6658;">CREDIT</a> <br>


 

</center>

[/dohtml]

 

Sometimes having margin: 0 auto; can upset the code, so i changed it to just auto and it put everything in the middle. Then for yoru spacing problem next i told it to add padding to the left side and used it at 15px but feel free to change it as you will. Keep in mind with the top green letters you have to reduce or add to the width based on how much padding you add or take away. Good luck hope this helps.