Arrow picks up web-design again:

[Arrow]

As practice, since I'm rusty, I'm working up a website to act as a manual for a roleplay I'm designing. I'm working on a DIV for text blocks, and I've got some CSS that works like this:

Code Select Expand

body
{
background-color:#000000;
background-image:url(images/bg-1.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}

div.section-type-a
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
background-color:#88bbee;
border:7px double #8888bb;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}

p
{
font-size:16px;
font-weight:bold;
color:#000000;
margin-top:20px;
margin-bottom:20px;
margin-right:10px;
margin-left:10px;
}

How can I make the text in that DIV up there opaque? As it stands, firefox makes it translucent, which is a cool effect but hard to read. I've tried this:

Code Select Expand


div.text
{
/* for IE */
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
}


But there's no effect.

[Arrow]

Alright, in addition to that issue, I've got a new one:

http://dl.dropbox.com/u/355499/Mega%20Man%20X%20Roleplay/index.html

The sidebar at the left cannot reach 100% height in my code without pushing the height of the page down. So I'm either stuck with a gap of some kind, or a page that scrolls over an empty gap. How can I hit the very bottom of the browser window without stretching the page?

Code Select Expand


#section-sidebar
{
margin:0px;
padding-top:15px;
padding-bottom:15px;
padding-right:15px;
padding-left:15px;
background-color:#777777;
height:90%;
width:10%;
border-style:none outset none outset;
border-right-width:8px;
border-left-width:8px;
border-color:#777777;
font-size:0.75em;
font-weight:bold;
color:#000000;
font-family:sans-serif;
float:left;
}


[ahref]

Hello, try just removing the opacity stuff, its new to me that this even exists.

for your sidebar, try clearing. use this css class:

Code Select Expand


br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
then just do <br class = "clear" /> as soon as the sidebar div is closed

[Arrow]

http://dl.dropbox.com/u/355499/Mega%20Man%20X%20Roleplay/index.html

I'm going to continue searching for a solution to the opacity issue- it's an effect I really want to keep.

As for the clear, am I doing this wrong? It doesn't seem to be having any effect.

[cozziekuns]

The clear seems to be working on IE, but not Firefox. As for your opacity, the whole portion of your div is opaque in IE, but on Firefox it's slightly transparent.

Also, for your opacity, just try putting opacity:1 in your p tag.

[ahref]

the clear works in opera aswell. if i could remember how to edit css in browser like id tinker with it.

opacity: 1;

works for me, ALSO LOVING OPERA DRAGONLY. LIKE REALTIME CSS EDITING OMG

[Roph]

Opacity is inherited. The same way that changing the width of the box would also force the content inside to that width, the same goes for opacity. The way I did the go homepage was to just use a semi-transparent png for the background. Bonus is that IE, which is shit, actually displays it as translucent that way.

Padding adds to the height of your sidebar. a 100px wide box with 50px left/right padding will be 200px wide.

[Arrow]

How in the world did I not catch that? That's NUTS.

But how can I space my text down from the top of the window if padding and margins all push the page down?

I'd use images for the opacity too, but I'm trying to keep my image count really low.

[Arrow]

Here's a question also: currently, the tools for stat calculation are going to end up being on the honor system. I don't like that. How can I set up some really basic accounts?

These accounts would just need to use a username/password, occasionally send stuff to the holder's email, and track a few variables.

[Roph]

If your sidebar stuff is in something like a <p>, you can just add some margin to the top of it.

If you don't want to include an external image you could just use a data URI for a 1px semi transparent PNG.

[Arrow]

The other thing I read is that internet explorer has a memory leak that occurs with very small images like that. The sidebar is working as it should now. I used a picture to space it down- should have done that from the beginning since I needed a logo of some kind there.

But about accounts. Can I do that with just HTML/CSS?

[ahref]

To add accounts your gonna need some extra scripting stuff.

[Arrow]

Can you point me in the right direction? When you say scripting, do you mean Javascript?

[cozziekuns]

You could probably do it in .php and MySQL, like how SMF is written \(o.o)/

[Arrow]

That means learning a new language, or two. o-o Is it fairly simple?

[ahref]

The alternative is you install some board software, it will give you logins and everything. You could even discuss stuff relating to the RP there.

[Arrow]

Considering that I'm hosting all of this out of a dropbox account, I dunno that I can afford to run a forum. If I use it as just a method of holding data for accounts, would it be relatively small?

[ahref]

oh dear, You don't have any hosting?

Accounts are gonna be a little bit difficult without that unless you want a javascript login system.

[Arrow]

Heh. Every penny I earn already has someone else's name on it. No way in hell I have hosting. As for a javascript login system, would that suit my needs? All it would need to do is track several variables and increase/decrease them via a big javascript calculator I haven't programmed yet.

[ahref]

should do, although it wouldnt exactly be the most secure thing in the world not that that matters for rp though

[Arrow]

Hey ahref, do you think you could help me code some of the systems someday soonish? I'd really appreciate the help, and I think I'd have a lot of fun in addition to learning a lot from you. I haven't used javascript in a long while, so I'm not certain I could do it on my own. For the userdata, I know for a fact I'll need help.

[ahref]

Sorry javascript isnt my strongpoint, I dont like it for some reason.

Whats the traffic gonna be like to the site, i have quite a lot of hosting space that im not using provided the site isnt gonna get raped by users ill be able to host your site. Then i could probably whip up some php for you.

[Arrow]

Well damn bro, that'd be awesome. I guess I'll install an FTP program again. Can you get on IRC? I'm on and it would be easier to talk to you there. I'm working on this thing constantly but other than that traffic should be minimal, just friends and word-of-mouth. If it gets bigger I'll look into hosting I'd pay for, so no worries there.