PDA

View Full Version : Ross is confused ;o


GoldenMerc
30-05-2009, 03:37 PM
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
Source
30-05-2009, 03:41 PM
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.
GoldenMerc
30-05-2009, 03:49 PM
<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
Jaysun
30-05-2009, 03:54 PM
Use CSS instead.
Swinkid
30-05-2009, 04:29 PM
make the background fo the page actually black firstly. Then try this:



<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.
GoldenMerc
30-05-2009, 04:33 PM
make the background fo the page actually black firstly. Then try this:



Dno if it will make a diffrence.
nah that doesnt work :(
GoldenMerc
30-05-2009, 04:44 PM
http://uploadpicz.com/images/F2MPWZP.png (http://uploadpicz.com)
is what i want exept the background im still thinking about adding, its black so you can see the transparent ect.
Mentor
30-05-2009, 04:52 PM
http://uploadpicz.com/images/F2MPWZP.png (http://uploadpicz.com)
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.
GoldenMerc
30-05-2009, 04:56 PM
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
Mentor
30-05-2009, 04:59 PM
add in to whatever you want see through the code style='opacity:0.5;filter:alpha(opacity=50)'

and that should do the job?
GoldenMerc
30-05-2009, 05:06 PM
<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
eLv
30-05-2009, 05:20 PM
Try putting the images in the same folder as your web document, then:


<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


<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>
GoldenMerc
30-05-2009, 05:25 PM
Yay, this worked which you did

<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
eLv
30-05-2009, 05:27 PM
Add in margin-top: 50px; into the div style=" " will do.
GoldenMerc
30-05-2009, 05:34 PM
That hasnt done anything :(
eLv
30-05-2009, 05:38 PM
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.
GoldenMerc
30-05-2009, 05:43 PM
doesnt work :(
it shows like this correct;


<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.
eLv
30-05-2009, 05:48 PM
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;">
GoldenMerc
30-05-2009, 05:50 PM
<!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
eLv
30-05-2009, 05:52 PM
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
GoldenMerc
30-05-2009, 05:55 PM
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 :(
GoldenMerc
30-05-2009, 05:58 PM
solid line, which i want to meet up with to be the navbar aswel which is shown :P
eLv
30-05-2009, 06:04 PM
This may be what you're looking for:


<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>
GoldenMerc
30-05-2009, 06:09 PM
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 :@
eLv
30-05-2009, 06:12 PM
Don't know if there's any shorter way to do this, but:


<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.
GoldenMerc
30-05-2009, 06:15 PM
So where in here does that go...

<!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>
eLv
30-05-2009, 06:19 PM
No idea what you're doing, but this might be it:


<!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>
GoldenMerc
30-05-2009, 06:21 PM
Dammnnnn niceeee, right when i can il +rep you so thanks !!!

Want to hide these adverts? Register an account for free!