Some HTML5 and CSS3 Tips
So, I've figured out a few things about using HTML and CSS in WordPress, that makes your stories look a lot better. It does take a lit time to do this, but once you figure it out its just part of the process of writing webpages and posts.
I'm not sure this is the best way to do things, but its working for me so far. Any recommendations are welcome.
When you insert media, always put it at the beginning of a paragraph. Then select align right or left in the media editor. This will align the top of your picture or banner with the top of the text of that paragraph.
This works for centering pictures also. You just have to make sure you've got a blank line of white space between your media and your text. You can put the centered pictures on a separate line between paragraphs.
Set your margins, to put some whites space around your media using the margin-left:20px; tag. Like this:
<iframe style="border: currentColor; margin-top: 20px; margin-right: 20px; margin-bottom: 20px; float: left; max-height: 600px; max-width: 900px;" ..... width="300" height="250" frameborder="0" marginwidth="0" scrolling="no"></iframe>
I read that you can do it by using margin: 0,20,20,20; which corresponds to left, top, right, bottom; but it didn't work when I tried it that way. I still follow the left, top, right, bottom protocal, just in case. You can just leave the ones where you don't want any margin out, such as along the edge of your columns.
...The editor stripped the px off of the that last 20. px stands of pixels...
I think you might want to leave the top out also. I noticed that it added space to the paragraph spacing on that last one. Yeah, I deleted the margin-top 20px; tag and I think that looks better. Get in there and experiment. Be an artist. Make something beautiful.
Wordpress has changed it a little, adding some spaces, but it seems to work okay. You can put the spaces in there or not, it seems to work either way. You always want to check and make sure any links still work correctly, when you change banners like that.
Another very useful html tag for banner adds and other links is the tar get="_blank" tag. This causes links to open up in a new tab on your audiences browser, which leaves the tab with your website on it, still there.
I haven't figured out where to put it in my Amazon banner adds yet. So I'll do some more research to make sure I do it without damaging the banner. It may not be possible. When you do a text link it goes like this:
https://my.wealthyaffiliate.com/training/wa-affili...." tar get="_blank">Wealthy Affiliate</a>
....The editor keeps deleting the tags I'm trying to describe, so I put a space in target to try to prevent that....
Which makes me think it would go after the scrolling="no" tag. I tried that and Wordpress stripped it out. The link still works, the margin tags I inserted still work. Just the tag is stripped.
If anyone knows how to get banners adds to open in a new tab, please feel free to comment. If anyone has any other comments about this topic, by all means, I'm open to learning new and better ways of doing things.
Thanks
Recent Comments
3
Wow. How are we going to have a conversation about building websites if we can't describe what we're working on, because the editor deletes all the html tags from our posts?
yeah I see you had some trouble getting those tags in - hard to do in a regular text area window because it will strip it out for security reasons. Maybe ask kyle for a feature enhancement to put a code button/icon in the editor to be able to insert code.