Ross is confused ;o

well im wanting a div which would be about 600px wide which i've done but im wanting the div to be white but be 35% transparent how would i do this?
Ross

Easiest way for cross-browser compatibility is to create a png of white at 35% transparency - then use that as the background from the div.

Quote:

---

<div style="width: 550px; background-img: (C:\Documents and Settings\Ross\My Documents\My Pictures\images/trans.png) ; border-style: solid; border-width: 1px; border-color: #ffffff;">

<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

Doesnt seem to be working but i suppose its a more simple idea, im doing this from my pc its not uploaded to a sever if you are guessing :P

Use CSS instead.

make the background fo the page actually black firstly. Then try this:

Quote:

---

<div style="width: 550px; background-img: (C:\Documents and Settings\Ross\My Documents\My Pictures\images\trans.png) ; border-style: solid; border-width: 1px; border-color: #ffffff;">

<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

Dno if it will make a diffrence.

Quote:

---

Originally Posted by Swinkid

make the background fo the page actually black firstly. Then try this:



Dno if it will make a diffrence.

---

nah that doesnt work :(

http://uploadpicz.com/images/F2MPWZP.png
is what i want exept the background im still thinking about adding, its black so you can see the transparent ect.

Quote:

---

Originally Posted by HHGS.Net

http://uploadpicz.com/images/F2MPWZP.png
is what i want exept the background im still thinking about adding, its black so you can see the transparent ect.

---

Well in that its a great deal easier just to use the grey colour lol. If your planning on having something behind it, opacity is possible in most browsers but has a few issues in terms of how well its supported.

Basic css (w3 standards) is the opacity attribute, firefox, safari etc will read this fine.

opacity:0.4;

IE because of some terrible standards support requires it own, invalid tag to to the job

filter:alpha(opacity=40)


keep in mind opacity can be adjusted by changing the value in the css attribute.

So what would the code be for the opacity then for FF and IE, it would obviously have to go into the divs tags. uhh so confusing ;P

add in to whatever you want see through the code style='opacity:0.5;filter:alpha(opacity=50)'

and that should do the job?

Quote:

---

<div style="width: 550px; background-color: #ffffff ; border-style: solid; border-width: 1px; style='opacity:0.5;filter:alpha(opacity=50)' ; border-color: #ffffff;">

<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

Doesnt work

Try putting the images in the same folder as your web document, then:

Quote:

---

<div style="width: 550px; background: url(images/trans.png); border-style: solid; border-width: 1px; border-color: #ffffff;">

<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

or

Quote:

---

<div style="width: 550px; background-color: #ffffff ; border-style: solid; border-width: 1px; opacity:0.5;filter:alpha(opacity=50); border-color: #ffffff;">

<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

Yay, this worked which you did

Quote:

---

<div style="width: 550px; background-color: #ffffff ; border-style: solid; border-width: 1px; opacity:0.5;filter:alpha(opacity=50); border-color: #ffffff;">

<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

Now i have to center it and kick it down some lines, how would i do a big line by the way im clueless now :(
Thanks
Ross

Add in margin-top: 50px; into the div style=" " will do.

That hasnt done anything :(

I suppose you added margin: auto; to center it? Make it like this:

<div style="margin: auto;">
<div style="width: 550px; background-color: #ffffff ; border-style: solid; border-width: 1px; opacity:0.5;filter:alpha(opacity=50); border-color: #ffffff; margin-top:30px;">

Then add another </div> at the end.

doesnt work :(
it shows like this correct;

Quote:

---

<div style="margin: auto;">
<div style="width: 550px; background-color: #ffffff ; border-style: solid; border-width: 1px; opacity:0.5;filter:alpha(opacity=50); border-color: #ffffff; margin-top:30px;">
<div id="img-main" style="width: 88px; height: 100px;">

&nbsp;

</div>

---

if so doesnt work.

Tried this, it's working:

<div style="width: 550px; margin: auto;">
<div style="background-color: #ffffff ; border-style: solid; border-width: 1px; opacity:0.5;filter:alpha(opacity=50); border-color: #ffffff; margin-top:30px;">

Quote:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLEEEE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(background_r2_c2.png);
}
.style3 {
font-size: 38px;
font-style: italic;
color: #FFFFFF;
}





-->
</style></head>



<body>
<span class="style3">TITLEEEEEE</span>
</body>
<center>

<div style="width: 550px; margin: 0 auto;">
<div style="background-color: #ffffff ; border-style: solid; border-width: 1px; opacity:0.5;filter:alpha(opacity=50); border-color: #ffffff; margin-top:30px;">
&nbsp;

</div>
</center>
</html>

---

tisnt working for me, well no line under the TITTLEE part.
Ross

Change the margin-top: to a greater value then, it's working on my comp.

EDIT: You want a solid line or just a line break? :O

nope, well not sure if were talking about the same part, i dont think its ment to be in the divs, its ment to be alike to this (i made it lul)
see under title obvvvv
http://uploadpicz.com/images/F2MPWZP.png
i want a line :(

solid line, which i want to meet up with to be the navbar aswel which is shown :P

This may be what you're looking for:

Quote:

---

<body style="margin-top:50px;">

<div class="style3" style="border-bottom: 2px solid white; margin-bottom: -2px;">TITLEEEEEE</div>

<div style="width: 550px; margin: 0 auto; border: 2px solid white;">
<div style="background-color: #ffffff; opacity:0.5;filter:alpha(opacity=50);">
&nbsp;

</div>
</div>

</body>

---

Yeh i think that works, so will i put the navbar at the top of the divs then do another line (some how) i need to allign tittlee to the left aswel but when ever i do it is screws the text div box up :@

Don't know if there's any shorter way to do this, but:

Quote:

---

<body style="margin-top:50px;">

<div class="style3" style="border-bottom: 2px solid white;">TITLEEEEEE</div>

<div style="width: 550px; margin: auto; border-left: 2px solid white; border-right: 2px solid white; border-bottom: 2px solid white;">
<div style="background-color: #ffffff; opacity:0.5;filter:alpha(opacity=50);">

Navbar

</div>
</div>

<div style="width: 550px; margin: auto; border-left: 2px solid white; border-right: 2px solid white; border-bottom: 2px solid white;">
<div style="background-color: #ffffff; opacity:0.5;filter:alpha(opacity=50);">

&nbsp;

</div>
</div>

</body>

---

It's neater if you do this using css.

So where in here does that go...

Quote:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLEEEE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(background_r2_c2.png);
}
.style3 {
font-size: 38px;
font-style: italic;
color: #FFFFFF;
}





-->
</style></head>
<body>

</body>
<center>
<body style="margin-top:50px;">

<div class="style3" style="border-bottom: 2px solid white; margin-bottom: -2px;">TITLEEEEEE</div>

<div style="width: 550px; margin: 0 auto; border: 2px solid white;">
<div style="background-color: #ffffff; opacity:0.5;filter:alpha(opacity=50);">
&nbsp;

</div>


</body>
</center>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLEEEE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
background-image: url(background_r2_c2.png);
}
.style3 {
font-size: 38px;
font-style: italic;
color: #FFFFFF;
}





-->
</style></head>
<body>

</body>
<center>
<body style="margin-top:50px;">

<div class="style3" style="border-bottom: 2px solid white; margin-bottom: -2px;">TITLEEEEEE</div>

<div style="width: 550px; margin: 0 auto; border: 2px solid white;">
<div style="background-color: #ffffff; opacity:0.5;filter:alpha(opacity=50);">
&nbsp;

</div>


</body>
</center>
</html>

---

No idea what you're doing, but this might be it:

Quote:

---

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>TITLEEEE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body
{
background: url(background_r2_c2.png);
margin-top:50px;
}
.style3
{
font-size: 38px;
font-style: italic;
color: #FFFFFF;
border-bottom: 2px solid white;
}
#container
{
width: 550px;
margin: auto;
}
.style4
{
border-left: 2px solid white;
border-right: 2px solid white;
border-bottom: 2px solid white;
}
.filterbg
{
background-color: #ffffff;
opacity: 0.5;
filter: alpha(opacity=50);
}
-->
</style>
</head>

<body>

<div class="style3">TITLEEEEEE</div>

<div id="container">

<div class="style4">
<div class="filterbg">

Navbar

</div>
</div>

<div class="style4">
<div class="filterbg">

content

</div>
</div>

</div>

</body>
</html>

---

Dammnnnn niceeee, right when i can il +rep you so thanks !!!