SitePoint.com

poopingninja · Jun 5, 2006, 17:10

Hello everyone, I am working a css layout and need help with a couple of things.

First off, I put the page here (or copy and paste) ; http://www.apjnet.lunarpages.com/csshelp/main3.html

the css is available if you go to the main directory (or click here if lazy)

1) Please help me to convert just the text to be solid inside the menu boxes which should remain transparent. is it possible? i have hover for a highlight effect on the menu text. i want both to be solid yet keep the boxes transparent. is this possible?

2) how do i get the text in these "menu boxes" vertically centered? i can't seem to get anything to work

here's a copy and paste of my css file:
body { background-color:white ;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:black;
}

h1 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:30px}

h2 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:24px}

h3 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px}

h4 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px; color: White;}
/*titles for areas with background */

h5 { font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px}

/* Page Structure
----------------------------------------------- */

#headerlogo { background:white;
height:175px;
border-top:5 solid white;
border-right:5 solid white;
border-left:5 solid white;
background-image: url(banner1.jpg);
}

a:link {
text-decoration: none; color: white;
}

a:hover {
color:#8ED805; font-weight: bold;
background-color: white;

}

#col1 {
float: left;
width: 17%;
margin-left: 3%;
display: inline;
background-color: Blue;
}
/* column#1 of a 3-column layout */
#col2 {
float: left;
width: 58%;
margin-left: 3%;
background-color: #A9A9A9;
}
/* column#2 of a 3-column layout */
#col3 {
float: left;
width: 13%;
margin-left: 3%;
background-color: #6B8E23;
}
/* column#3 of a 3-column layout */

#fourcontent { position: relative; top: 130px;
}
/* use this for any content/text inside a 4 column area, begin and end with this */

#menu1 { left: 10%; width: 29%; z-index: 100; height: 36px; }
/* column#1 of a 4-column layout */
#menu2 { left: 30%; width: 49%; z-index: 100; height: 36px;}
/* column#2 of a 4-column layout */
#menu3 { left: 50%; width: 69%; height: 36px; vertical-align: text-bottom; }
/* column#3 of a 4-column layout */
#menu4 { left: 70%; width: 89%; height: 36px; vertical-align: text-bottom;}
/* column#4 of a 4-column layout */

#menu1, #menu2, #menu3, #menu4 { background: #3399ff; border: 2px;
position: absolute; /*/*/width: 19%; filter:alpha(opacity=50);
opacity: 0.5;
-moz-opacity:0.5;
}
/*resets to work for NN4 /background n properties for 4 column layout areas*/

here's a copy and paste of my html body:

<body>
<div id="headerlogo">
<div id="fourcontent">
<h4>
<p style="text-align: center;" id="menu1"><a
href="software.html">Software
Downloads</a></p>
<p style="text-align: center;" id="menu2"><a
href="forums.html">Community
Forums</a></p>
<p style="text-align: center;" id="menu3"><a
href="payments.html">Donations
& Purchases</a></p>
<p style="text-align: center;" id="menu4"><a
href="about.html">About
MyPlanIt</a></p>
</h4>
</div>
</div>
<div id="col1">
column1leftside column1leftside column1leftside column1leftside
column1leftside column1leftside column1leftside column1leftside
column1leftside column1leftside column1leftside column1leftside
column1leftside column1leftside column1leftside column1leftside
column1leftside column1leftside column1leftside column1leftside
</div>
<div id="col2">
column2middle column2middle column2middle column2middle column2middle
column2middle
</div>
<div id="col3">
column3rightside column3rightside column3rightside column3rightside
column3rightside
</div>
</body>

Any help would be appreciated, thank you!!
thepoopingninja

all4nerds · Jun 5, 2006, 17:19

Hello

ahaa it's the opacity week

http://www.sitepoint.com/forums/showthread.php?t=389202

or use:
png opacity, all with filter for IE
http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217

Thread Tools
Show Printable Version Email this Page
Display Modes
Switch to Linear Mode Hybrid Mode Switch to Threaded Mode

Jun 5, 2006, 17:10	#1
poopingninja SitePoint Member Join Date: Jun 2006 Posts: 1	Need solid text inside a transparent box thats above an image Hello everyone, I am working a css layout and need help with a couple of things. First off, I put the page here (or copy and paste) ; http://www.apjnet.lunarpages.com/csshelp/main3.html the css is available if you go to the main directory (or click here if lazy) 1) Please help me to convert just the text to be solid inside the menu boxes which should remain transparent. is it possible? i have hover for a highlight effect on the menu text. i want both to be solid yet keep the boxes transparent. is this possible? 2) how do i get the text in these "menu boxes" vertically centered? i can't seem to get anything to work here's a copy and paste of my css file: body { background-color:white ; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:black; } h1 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:30px} h2 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:24px} h3 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px} h4 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:16px; color: White;} /titles for areas with background / h5 { font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px} /* Page Structure ----------------------------------------------- / #headerlogo { background:white; height:175px; border-top:5 solid white; border-right:5 solid white; border-left:5 solid white; background-image: url(banner1.jpg); } a:link { text-decoration: none; color: white; } a:hover { color:#8ED805; font-weight: bold; background-color: white; } #col1 { float: left; width: 17%; margin-left: 3%; display: inline; background-color: Blue; } / column#1 of a 3-column layout / #col2 { float: left; width: 58%; margin-left: 3%; background-color: #A9A9A9; } / column#2 of a 3-column layout / #col3 { float: left; width: 13%; margin-left: 3%; background-color: #6B8E23; } / column#3 of a 3-column layout / #fourcontent { position: relative; top: 130px; } / use this for any content/text inside a 4 column area, begin and end with this / #menu1 { left: 10%; width: 29%; z-index: 100; height: 36px; } / column#1 of a 4-column layout / #menu2 { left: 30%; width: 49%; z-index: 100; height: 36px;} / column#2 of a 4-column layout / #menu3 { left: 50%; width: 69%; height: 36px; vertical-align: text-bottom; } / column#3 of a 4-column layout / #menu4 { left: 70%; width: 89%; height: 36px; vertical-align: text-bottom;} / column#4 of a 4-column layout / #menu1, #menu2, #menu3, #menu4 { background: #3399ff; border: 2px; position: absolute; ///width: 19%; filter:alpha(opacity=50); opacity: 0.5; -moz-opacity:0.5; } /resets to work for NN4 /background n properties for 4 column layout areas/ here's a copy and paste of my html body*: <body> <div id="headerlogo"> <div id="fourcontent"> <h4> <p style="text-align: center;" id="menu1"><a href="software.html">Software Downloads</a></p> <p style="text-align: center;" id="menu2"><a href="forums.html">Community Forums</a></p> <p style="text-align: center;" id="menu3"><a href="payments.html">Donations & Purchases</a></p> <p style="text-align: center;" id="menu4"><a href="about.html">About MyPlanIt</a></p> </h4> </div> </div> <div id="col1"> column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside column1leftside </div> <div id="col2"> column2middle column2middle column2middle column2middle column2middle column2middle </div> <div id="col3"> column3rightside column3rightside column3rightside column3rightside column3rightside </div> </body> Any help would be appreciated, thank you!! thepoopingninja

Jun 5, 2006, 17:19	#2
all4nerds Non-Member Join Date: Jan 2005 Location: Netherlands Posts: 4,302	Hello ahaa it's the opacity week http://www.sitepoint.com/forums/showthread.php?t=389202 or use: png opacity, all with filter for IE http://www.daltonlp.com/daltonlp.cgi...=1&item_id=217