HTML help??

checkeredhat · Feb 2, 2013

First off, not sure if this should be in Tech Talk. Took a look around there and it seems to be more about hardware issues.
I'm working on a site for the group film I worked on in third year of college. This is a site we planned on making then, but the person we had coding it was also working two jobs, and it never got finished and our domain expired. So I bought a new domain and sat on THAT for another year, and finally started working on it recently since I've had to start learning HTML at work.
Anyway, The site is to have an image background, and I'm trying to put images and text into divs overtop that. The reason I'm using divs instead of just tables is I want the tables semi-transparent. But can't seem to find a way to do that that doesn't also make the images inside them semi transparent.

For example:

<style>
div.transbox
{
margin:0px 0px;
background-color:#000;
border:0px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:0px 0px;
opacity:100%;

}
</style>
</head>

<body>
<div class="transbox">

<img src="/sunimages/a2gang.jpg" width="720" height="426" /><br />
<em>Back:</em> Derek Spencer, Eddie West, Sean Calligan, Joseph McCauley<br />
<br />
<em>Front:</em> Morghan Peressini, Nosa Ott, Vanessa Stefaniuk, Cassandra Piesz
<br />
<em>Not Pictured:</em> Hail Kim</div>
</body>

www.sundayfilmonline.com/a2group.shtml

To make it more confusing, on another page of the site, I need to put lytebox inside one of these. I'm seriously considering just using an opaque table instead of the semi transparent divs cause this has been driving me nuts for a few days now.

Any other tips (Such as a way to stretch a smaller image to the background so that the load time isn't so bogged down) would be appreciated. I am EXTREMELY new to html, this is the first time I've coded anything in it. Even my own site was actually done for me by a friend, I just learned enough to update images when necessary.

strawman · Feb 2, 2013

Items inside other items adopt the parameters of the parent. Therefore the images and text become alpha 0.6.

Try it without the alpha to see if it gives you the effect you want. It shouldn't end up as a white box, so itmaubewhat you're looking for.

If not, then set the alpha of the image explicitly, to override the alpha in the div. depending on how you do things this may mean setting the alpha of the image in the image tag, or putting it inside another div with no alpha, or setting the CSS for the img tag to no alpha.

checkeredhat · Feb 2, 2013

stienman said:
Items inside other items adopt the parameters of the parent. Therefore the images and text become alpha 0.6.

Try it without the alpha to see if it gives you the effect you want. It shouldn't end up as a white box, so itmaubewhat you're looking for.

If not, then set the alpha of the image explicitly, to override the alpha in the div. depending on how you do things this may mean setting the alpha of the image in the image tag, or putting it inside another div with no alpha, or setting the CSS for the img tag to no alpha.

I'm honestly not sure how I would specify the transparency in the img tag. Tried setting opacity=100% in the img tag, the div took over so it was still semi transparent. I've tried looking this up and everything says to just use a div. But if I put a div inside of another div, the first one craps out.
I also tried adding

div.transbox img
{
margin:0px 0px;
border:0px solid black;
opacity:100%;
}

to the style but that didn't do it either..

Also thought of setting the div background to be a png image that is semi transparent. Haven't tried that yet though.

Removing alpha from the div completely creates 100% transparency. I hadn't even thought to try this because I figured the text would be difficult to read against the BG. The semi transparent div was to help that. But having just now tried that, its actually not difficult to read at all. I might just nix the semi transparent bg.

PatrThom · Feb 2, 2013

I don't know enough html to be of any help here, but I will say this: If you are not already doing so, make sure you test your website across the major rendering engines. View it in Opera (Presto), Safari/Chrome/Maxthon (WebKit), Firefox (Gecko), and Internet Explorer (Trident) to make sure that everything works the way you expect before you turn something loose on the public. Many headaches will be saved.

--Patrick

Gared · Feb 2, 2013

Oof. It has been a long time since I've done any extensive work in HTML; but give me some time and I'll see what I can come up with. And yes, DIVs and any degree of transparency are, if my memory is correct, a giant pain in the ass.

Gared · Feb 2, 2013

Actually, it may just be more helpful for you if I point you to the resources I would use to look this up; so I'd recommend, if you haven't already, reading through both the HTML and CSS tutorials at w3c.org.

The_Khan · Feb 3, 2013

You Want to set the bg color with rgba and it should work across browsers without causing your images to go transparent.

blotsfan · Feb 3, 2013

Gared said:
Actually, it may just be more helpful for you if I point you to the resources I would use to look this up; so I'd recommend, if you haven't already, reading through both the HTML and CSS tutorials at w3c.org.

Go to w3schools.org too. Its run by the same people, but its more meant for learning stuff. I find that its generally easier to understand there.

fade · Feb 3, 2013

I wouldn't worry too much about the size of the bg image. It'll only be a problem once (it'll be cached for return visitors), and even then, probably not a noticeable one. Also, you're doing it right when you use divs instead of tables. Divs are more semantically correct, and will easier to restyle if you so choose in the future. The general idea is that tables are for tabular data. Gridded displays go in divs (on the chance you want to change the appearance, but not the content later).

So you want the text in the divs to be semi-transparent, but you want the images in the div not to be? I'm looking at the specification for the opacity property, and it is marked as non-inherited. That's interesting. What you're doing honestly looks correct. I can play around with it later (I'm pretty well versed in HTML, CSS, PHP, etc.) but I have to go replace the vent windows in a 1957 Chevy Bel-Air right now.

checkeredhat · Feb 3, 2013

fade said:
I wouldn't worry too much about the size of the bg image. It'll only be a problem once (it'll be cached for return visitors), and even then, probably not a noticeable one. Also, you're doing it right when you use divs instead of tables. Divs are more semantically correct, and will easier to restyle if you so choose in the future. The general idea is that tables are for tabular data. Gridded displays go in divs (on the chance you want to change the appearance, but not the content later).

So you want the text in the divs to be semi-transparent, but you want the images in the div not to be? I'm looking at the specification for the opacity property, and it is marked as non-inherited. That's interesting. What you're doing honestly looks correct. I can play around with it later (I'm pretty well versed in HTML, CSS, PHP, etc.) but I have to go replace the vent windows in a 1957 Chevy Bel-Air right now.

Don't want the text to be either, just the div BG. But I think I've settled on just fully transparent bg for the divs anyway. The text is still legible, though I'll have to change the font style for links.[DOUBLEPOST=1359912550][/DOUBLEPOST]

Gared said:
Actually, it may just be more helpful for you if I point you to the resources I would use to look this up; so I'd recommend, if you haven't already, reading through both the HTML and CSS tutorials at w3c.org.

I've looked at that one, but mostly, I've been perusing:

blotsfan said:
Go to w3schools.org too. Its run by the same people, but its more meant for learning stuff. I find that its generally easier to understand there.

The_Khan · Feb 3, 2013

This is the website that helped me figure it out about a year ago.

http://www.css3.info/introduction-opacity-rgba/

reposted:

Here’s an example.

background-color: rgb(0,0,255); opacity: 0.5;
The background color of the second div has been set to blue, and the opacity set to half. The text inside the div has inherited the opacity value from its parent, and you can see the yellow div showing through.

background-color: rgba(0,0,255,0.5);
The background color has been set to blue, and the opacity set to half. The text inside the div does not inherit the opacity value, as it acts solely on the background-color declaration, so the text does not reveal the yellow div behind.

checkeredhat · Feb 5, 2013

It's working okay in Firefox and Internet Explorer from what I can tell (although whatever version of Explorer we have at work won't dispaly the embedded video, so I've added link), but for some reason, Chrome won't display the content, adds unnecessary length and width, and tiles the background image. Any ideas?
Chrome:

IE:

FireFox:

PatrThom · Feb 5, 2013

Chrome uses its own in-house Flash player implementation, this has caused problems with other things.
Try viewing the page in Safari or Maxthon, if you still can't see the video then it is probably related to WebKit. If the video suddenly shows up then you know Chrome's "Pepper" Flash player is to blame.

--Patrick

The_Khan · Feb 6, 2013

What code are you using to display the video?

a good practice from what I hear is to have multiple versions of the video available for the browser (ie avi, ogg, webm and flash) and hopefully one of those will be loaded by the browser.

checkeredhat · Feb 6, 2013

The_Khan said:
What code are you using to display the video?

a good practice from what I hear is to have multiple versions of the video available for the browser (ie avi, ogg, webm and flash) and hopefully one of those will be loaded by the browser.

Right now it's just the imbed code from vimeo.

<iframe src="http://player.vimeo.com/video/15508608" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

The video is actually displaying, but because of what it's doing to the background, you have to scroll down to the bottom right corner to see it (or any other content on the other pages, for that matter)

*edit: It does the same weird tiling in Safari.

The_Khan · Feb 6, 2013

Do you want to post all the page code you are using?

checkeredhat · Feb 6, 2013

The_Khan said:
Do you want to post all the page code you are using?

Here's the main menu page. (Don't judge me):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sun Day Film Online</title>
</head>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="sundaystyle.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type = "text/css">
/* <![CDATA[ */
html, body { height: 100%;
width: 100%}
#menu {
position: fixed;
left: 5%;
top: 20%;
width: 20.5em;
margin-top: 2.5em;

}

a:link {
text-decoration: underline;
text-color: #0FF
}
a:visited {
text-decoration: underline;
text color: #FF0
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

#content { width: 74%;
height: 100%;
float: center;
overflow: auto }
/* ]]> */
body,td,th {
font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
color: #FFF;
}
</style>
</head>

<body background="/sunassets/background.gif" leftmargin="100%" topmargin="100%" marginwidth="100%" marginheight="100%">

<center><a href="http://www.sundayfilmonline.com/mainmenu.shtml"><img src="/sunassets/mainmenugo.gif" border="0" width="500" height="213" /></a></center>

<div id = "menu"><a href="/a2group.shtml"><img src="/sunassets/a2go.gif" border="0" alt="A2" name="A2" width="290" height="40" /></a>
<br />
<br />
<a href="/journey.shtml"><img src="/sunassets/journeygo.gif" border="0" alt="Journey" name="Journey" width="290" height="40" /></a>
<br />
<br />
<a href= "characters.shtml" /a><img src="/sunassets/charactersgo.gif" border="0" alt="Characters" name="Characters" width="290" height="40" /></a>
<br />
<br />
<a href= "music.shtml" /a><img src="/sunassets/musicgo.gif" border="0" alt="Music" name="Music" width="290" height="40" /></a>
</div>
</body>

Click to expand...

<center>
<iframe src="http: //player.vimeo.com/video/ 15508608" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
Can't see the video? Some Internet browsers have trouble with embedded content. <a href="">Click here to go directly to the vimeo page.</a>
</center>

</body>

sundaystyle.css: .highlightit img{
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
border-width:0px;
border-color:#000000;
}

.highlightit:hover img{
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
border-width:0px;
border-color:#000000;
}
a:link {
text-decoration: underline;
text-color: #0FF
}
a:visited {
text-decoration: underline;
text color: #FF0
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}

It must be something in either the style.css or the virtual being called in each page, because this isn't only on the main page, its on all of them.
*EDIT: Figured it out. It was the margins defined in the background. Curse, removing them now means none of the content is aligned properly in ANY browser, but I have a suscpicion fixing that will be fairly easy, once I figure out how.

checkeredhat · Feb 9, 2013

It's working pretty well now, and just in time. The screening is tonight, and I JUST got the film re exported in HD with the www.sundayfilmonline.com url at the end of it last night.[DOUBLEPOST=1360451247][/DOUBLEPOST]

fade said:
I wouldn't worry too much about the size of the bg image. It'll only be a problem once (it'll be cached for return visitors), and even then, probably not a noticeable one. Also, you're doing it right when you use divs instead of tables. Divs are more semantically correct, and will easier to restyle if you so choose in the future. The general idea is that tables are for tabular data. Gridded displays go in divs (on the chance you want to change the appearance, but not the content later).

So you want the text in the divs to be semi-transparent, but you want the images in the div not to be? I'm looking at the specification for the opacity property, and it is marked as non-inherited. That's interesting. What you're doing honestly looks correct. I can play around with it later (I'm pretty well versed in HTML, CSS, PHP, etc.) but I have to go replace the vent windows in a 1957 Chevy Bel-Air right now.

I was shying away from divs because I didn't know how to use them; my own site is built almost exclusively with tables. But after like a week of fiddling with the combination of tables, divs inside tables, and tables inside divs without any real design consistency in the site, something in my brain finally clicked last night while brushing my teeth and in like 15minutes of coding just now, I got it working all with divs.

The_Khan · Feb 10, 2013

Tables are the devil.

fade · Feb 11, 2013

I wouldn't call them the devil, they're just not very future proof when it comes to layouts. They're great for tabular stuff that's semantically tabular.

The_Khan · Feb 17, 2013

fade said:
I wouldn't call them the devil, they're just not very future proof when it comes to layouts. They're great for tabular stuff that's semantically tabular.

Tables are the devil for page layout and design. When you need to show information, sometimes a table is your best bet.

fade · Feb 23, 2013

I meant to say before that if you're serious about getting into CSS, I highly recommend getting SASS and Compass. If you've ever found yourself going "Why isn't CSS smart enough to do X?", SASS probably does it. On the other hand, if you find yourself saying, "Geez, this CSS task seems really common. Someone has to have a standard way of doing this", then Compass probably has it. Sass is a ruby program that adds things like variables, functions (mixins they call them), and nesting to CSS. It's fully backwards compatible, so any CSS you have is already SASS. Basically, you write your stylesheet in sass, run the sass program on it, and it produces the actual CSS file you upload. Compass is a library and utilities that sit on top of SASS, and has implementations for common colors, common CSS tricks and hacks, etc.[DOUBLEPOST=1361659596][/DOUBLEPOST]And if you're really a glutton for punishment, you might look into a grid system like zengrids or 960gs. They're basically just highly polished CSS and HTML combo files that break the screen into lots of columns you can combine as needed to make very complex layout.

PatrThom · Feb 26, 2013

Just remember to close your tags. Otherwise you end up with something like this mess.

Bigger
Bigger
Bigger
...Och if I give it any more she'll blow up the Internet, Captain!

--Patrick

strawman · Feb 26, 2013

Just remember to avoid parsing html with regex. Otherwise you end up calling Cthulhu into the world:

http://stackoverflow.com/questions/...ept-xhtml-self-contained-tags/1732454#1732454