PDA

View Full Version : Link/opacity problems



Craveman
Feb 18th, 2010, 09:57 PM
Hey guys!

This is my first post on this forum so hello to all :)

I'm in the process of learning how to create my own website, so I'm still very much of a a novice at them moment. I am having lots of fun however learning all about the coding and all the other element in creating my own website.

So the problem I have at the moment is with my "links". For my links I have faded pictures with the link name on top. The links will become clear when you hover over them.

1: How would I get the text to be bolded and clear all the time and not fade with the picture (as it is doing at the moment)?

2: How would I center the words in the picture?

3: I know this is prob a bit naff but is there a way to have a audio file activated once one of the links are clicked?:confused:

I've replaced all the pictures with color backgrounds just to give you an idea...

PS: Please feel feel to critisize and help with any mistakes that I've made:thumbsup:






<html>
<head>
<style type="text/css">

#background{
padding:0px;
margin:0px;
height:883px;
background-color:blue;
}


#body{
position:relative;
padding:0px;
margin-left: auto;
margin-right: auto;
width:900px;
height:883px;
background-color:black;
border:1px solid black;
}



#header_wrap{
position:absolute;
padding:0px;
margin:0px;
top:0px;
left:0px;
height:208px;
width:900px;
background-color:grey;
}



#top_left{
position:absolute;
padding:0px;
margin:0px;
top:10px;
left:10px;
width:250px;
height:188px;
background-color:red;

}



#top_middle{
position:absolute;
padding:0px;
margin:0 auto;
top:10px;
left:260px;
width:380px;
height:188px;
background-color:transparent;
color:#33FF22;
text-align:center;
font-family:"Times New Roman", Times, serif;

}



#top_right{
position:absolute;
padding:0px;
margin:0px;
top:10px;
right:10px;
width:250px;
height:188px;
background-color:red;

}



#main{
position:relative;
padding:0px;
margin:0px;
top:208px;
left:0px;
width:900px;
height:675px;
background-color:black;
}





#quote_wrap{
position:absolute;
padding:0px;
margin:0px;
top:10px;
right:10px;
height:70px;
width:440px;
background-color:green;

}



#fly{
position:absolute;
padding:0px;
margin:0px;
top:8px;
right:375px;
height:50px;
width:59px;
background-color:blue;

}



#quote{
position:absolute;
padding:0px;
margin:5 0 0 0px;
top:8px;
right:10px;
height:50px;
width:365px;
background-color:transparent;
font-size:15px;
color:white;
text-align:center;

}

#menu_wrap{


}

#menu{
position:absolute;
padding:0px;
margin:0px;
top: 10px;
left:10px;
height:500px;
width:185px;
background-color:transparent;



}



#menu ul{
padding:0px;
margin:0px;
list-style:none;

}



#menu li{
margin:0px;
padding:0px;
display:decline;

}



#menu a{margin:10 0 0 0px;
display:block;
height:53px;
width:180px;
background-color:green;
text-align:center;
font-size:14px;
text-decoration:none;
color:black;
font-weight:bold;
outline:none;
filter:alpha(opacity=40);
opacity:0.4;

}

#menu a:hover{
background-color:green;
filter:alpha(opacity=100);
opacity:1;

{

#menu a:link{
color:blue;
}

#menu a:visited{
green;
}

#menu a:active{
white;
}


</* ---------------filter:alpha(opacity=20);
opacity:0.2;------------------This is to fade images>



</style>
</head>

<!--------------------------------------------HTML CODE------------------------------------------------------------------->

<div id="background">

<div id="body">

<!----------------------------------------------------Header------------------------------------------------------------->

<div id="header_wrap">

<div id="top_left"> </div>


<div id="top_middle"> <h2><b> This is my experimental website </b></h>



</div> <!top middle/>


<div id="top_right"> </div>

</div> <!header wrap/>

<!-----------------------------------------------------Header------------------------------------------------------------->

<div id="main">

<div id="quote_wrap">

<div id="fly"> </div> <!fly/>

<div id="quote">This is for a quote..."Coding members rocks" </div> <!quote/>

</div> <!quote wrap/>

<!------------------------------------------------------Main--------------------------------------------------------------->

<div id="menu">


<ul>

<li><a href="#"> Link 1 </a> </li>
<li><a href="#"> Link 2 </a> </li>
<li><a href="#"> Link 3 </a> </li>
<li><a href="#"> Link 4 </a> </li>
<li><a href="#"> Link 5 </a> </li>
<li><a href="#"> Link 6 </a> </li>

</ul>





</div> <!menu/>
</div> <!main/>
</div> <!body/>
</div> <!background/>

Excavator
Feb 18th, 2010, 10:11 PM
1: How would I get the text to be bolded and clear all the time and not fade with the picture (as it is doing at the moment)?



Hello Craveman,
Opacity can be difficult to get working right sometimes. In your case I think you should run your code through the validators first. There are links to both CSS and Markup validators in my signature line below.
Errors like your backward facing { are easy to make and can cause a lot of trouble.



2: How would I center the words in the picture?

text-align:center; (http://www.w3schools.com/css/pr_text_text-align.asp) on the containing element will horizontally center your text.
The appropriate line-height (http://www.w3schools.com/css/pr_dim_line-height.asp) setting can vertically center it.



3: I know this is prob a bit naff but is there a way to have a audio file activated once one of the links are clicked?:confused:
Does naff mean bad? Because most people are just irritated by music on websites.
See http://www.thesitewizard.com/webdesign/backgroundmusic.shtml

Craveman
Feb 18th, 2010, 10:52 PM
Hey Excavator

Thanks for the reply dude! I've managed to get the text centered:thumbsup:

All I need to do now is get the text bolded. It seems that this is a ongoing problem to create this sort of effect and from what I've read it seems like I have to create 2 "child" elements and place them within the same space using relative positioning. The one will have the picture inside and the other the words for my links. One element will have the opacity added to it and the other will be plain text but I still need to experiment with it all to see if I can figure it out.

Thanks also for the link also and yeah, "naff" means bad/cheesy/corny:D. I don't want to add music but rather a short say 5 second audio clip to activate (only once the link is clicked). Would that bit of code be added to the #menu a:active bit? I will have a proper look at that link you send me and give it a go.

Thanks for the help so far!

Excavator
Feb 19th, 2010, 12:32 AM
All I need to do now is get the text bolded. It seems that this is a ongoing problem to create this sort of effect and from what I've read it seems like I have to create 2 "child" elements and place them within the same space using relative positioning. The one will have the picture inside and the other the words for my links. One element will have the opacity added to it and the other will be plain text but I still need to experiment with it all to see if I can figure it out.


Sounds like you have the right idea with your opacity. To bold some text, have a look at the span tag (http://www.w3schools.com/TAGS/tag_span.asp). It would be used like this - <p>This is my normal text and <span class="bold">this is my bold text."</span></p> -
Then you would style that class from your CSS -
.bold {
font-weight: bold;
}