No replies
raaj5671
raaj5671's picture
Offline
newbie
Last seen: 6 years 46 weeks ago
Timezone: GMT+8
Joined: 2013-09-20
Posts: 1
Points: 2

hey there i am working on a website recently. i have created a vertical rotated menu but then i cant increase the color of it can you help me with it ASAP

This is the CSS code:

<!DOCTYPE html>
<html>
<head>
<style>
body { 
	background-size: 6000px 6500px;
	background-repeat: no-repeat;
	}
#menu {
        float: left;
        background-color: #1E90FF;
        border-bottom: 5px solid #ccc;
        border-top: 5px solid #ccc;
		height: 445px;
        width:100%;
    }
	#menu h1{
		font-family: Calibri, Arial, sans-serif;
		font-size: 100px;
		font-weight: bolder;
		text-align: center;
		margin-right: 25px;
		color: #F5F5F5;
 
	}
    #menu a {
        /* Safari */
        -webkit-transform: rotate(-90deg);
        /* Firefox */
        -moz-transform: rotate(-90deg);
        /* IE */
        -ms-transform: rotate(-90deg);
        /* Opera */
        -o-transform: rotate(-90deg);
        /* Internet Explorer */
        filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
 
    }
 
    #menu a {
		line-height: 10px;
		display: inline-block;
		font-size: 40px;
		font-family: Calibri, Geneva, sans-serif;
        float: right;
        width:20px;
        margin-top:150px;
        padding: 15px 10px;
        text-decoration: none;
        font-weight: bolder;
        color: #fff;
 
    }
 
	a.home {height: 10px; background: #FFD700;}
	a.about {height:10px; background: #a24543;}
	a.news {height:10px; background: #32CD32;}
	a.contact {height:10px; background: #FF8C00;}
 
 
 
	#menu a:hover {
        color: #191970;
        background-color: #00FF00;
    }
 
#dropdown {
	float: right;
	position: relative;
	background-color: #F0FFFF;
}
 
#content h1{
	font-family: Calibri, Geneva, sans-serif;
	font-size: 30px;
	font-weight: bold;
	text-align: left;
}
 
#content img{
    display: block;
    margin-left: auto;
    margin-right: auto;
	width:400px;
	height:250px;
    border:1px blue
 
 
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
 
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
 
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
 
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
 
#content h2{
float: left;
width: 700px;
height:200px;
border:10px groove navy;
 
/* Internet Explorer 10 */
display:-ms-flexbox;
-ms-flex-pack:center;
-ms-flex-align:center;
 
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
 
/* Safari, Opera, and Chrome */
display:-webkit-box;
-webkit-box-pack:left;
-webkit-box-align:left;
 
/* W3C */
display:box;
box-pack:center;
box-align:center;
}
 
#content p{
text-align: left;
font-family: Calibri, Geneva, sans-serif;
font-size: 20px;
}
 
</style>

This is the html code:

<title>
YTech
</title>
</head>
<body>
<div id = "menu" >
<h1>YTech</h1>
<a href = "#" class = "contact">CONTACT</a>
<a href= "#" class = "news">NEWS</a>
<a href = "#" class = "about">ABOUT</a>
<a href = "#" class = "home">HOME</a> 
</div>