container help

[Mike]

I want to have a container that is 200px wide and 100px high.
I made this code can anybody help?
Here's my code



<div class="container Affiliate">
   <div class="title-bar" ><center><h2>Affiliates</h2></center></div>
    <div class="content">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="up" width="100px" height="50%">
<a href="http://healthsense.proboards.com"><img scr="https://dl.dropboxusercontent.com/u/94761670/mini.png"/img></a>
</div>
</div>


[Former Member]

<div class="container Affiliate" style="width: 200px; height: 100px;">

for the first line should work

[Mike]

thank you Elf!

[Former Member]

No problem! =)

[Kami]

Dec 1, 2013 16:30:15 GMT -8 ₪» ⅀ ƪ Ƒ «₪ said:

<div class="container Affiliate" style="width: 200px; height: 100px;">

for the first line should work

for what it's worth class names can't have spaces.

if you put .containeraffiliate or .container-affiliate in your CSS page via your admin panel, you can specify {width: 200px; height: 100px;} instead of using inline styling, which -- since css gets cached -- cut down on the browser having to reload the inline styling on every page view.

also this
<img scr="https://dl.dropboxusercontent.com/u/94761670/mini.png"/img>

is not a valid image tag. get rid of the portion I marked in red.

[Mike]

Kami
Thank you for your input. Why isn't necessary to have the end tag for image?

Edit: I also tried this:containeraffiliate and container-affiliate and the title bar and borders don't show. but the way I have it everything shows up.

[Kami]

Dec 2, 2013 8:42:35 GMT -8 Mike said:

Kami
Thank you for your input. Why isn't necessary to have the end tag for image?

Edit: I also tried this:containeraffiliate and container-affiliate and the title bar and borders don't show. but the way I have it everything shows up.

Well basically, image and a few other tags (hr, br, etc) are considered self-closing tags. I don't remember the exact reason behind it, but I think it's basically because if you have a closing tag it's pointless since there's nothing being enclosed by the two tags.

Like so: <img src="link"></img>
^ see, there's nothing in between.

Have you changed both the css AND the <div class="classname">? If so, you should post what you have in your CSS as well as teh HTML for the container.

[Mike]

Oh wait now I know why,It's using the container css because by separating it by a space it only identifies the word container.
Besides I have no css setup for containeraffiliate yet.
Does that sound right?

[Kami]

Dec 2, 2013 9:25:28 GMT -8 Mike said:

Oh wait now I know why,It's using the container css because by separating it by a space it only identifies the word container.
Besides I have no css setup for containeraffiliate yet.
Does that sound right?

That is likely what's happening. If you change <div class="container affiliate"> to one word -- it can be ANY thing as long as there are no spaces (you can use a dash if you'd like) and set up the class CSS by using .classname, it should work. :) give it a go.

[Mike]

I'll make up a css for that but I really wanted to except the same css values as the rest of the board.
Thanks again

[Tumbleweed]

Just use .container as the class to pick up the board colors. 

You also need to change the image to <img src
You currently have it <img scr

And you need to close the marquee:

</marquee>


If you want additional styling options then an extra div is added:


<div class="affiliates">
<div class="container">

<div class="title-bar" ><center><h2>Affiliates</h2></center></div>
<div class="content">
<marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="4" direction="up" width="100px" height="50%">

<a href="http://healthsense.proboards.com"><img src="https://dl.dropboxusercontent.com/u/94761670/mini.png"></a>

</marquee>

</div>
</div>
</div>



The class affiliates sets the width/height:
The class affiliates div.content will add any styles you want to the content.

<style>
.affiliates{
width:200px;
height:200px;
}
.affiliates div.content{
background-color:blue;
}
</style>


Just to add, doing it as above will keeps things from affecting other parts of your site that use the content class.

[Mike]

Thanks Tumbleweed
Now I need to figure out how to create a plugin with this. It would be my first.

[Former Member]

In the Components area of the plugin, you'd probably put the HTML above into the Global Footer or Main Footer alternatively and the CSS into the CSS section. I've made a few plugins but only for myself and always with a lot of guidance so I couldn't give you definites, but that's what I'd start =)

[Mike]

I'll have to look at jordan's video again but I really need a step by step type of tutorial in a post. Maybe by example.I'm more hands on than anything.
Thanks for your help though Elf.