4 replies [Last post]
Malifinio
Malifinio's picture
Offline
newbie
Last seen: 5 years 52 weeks ago
Timezone: GMT+2
Joined: 2014-09-18
Posts: 2
Points: 3

Hi lads and gents,

first of all, sorry for my lang (I´m from Austria)
second - I just working on some one page site and I stuck on some colors and links.
Let me explain:
The site have gradient background (as seen on attach), link container is also gradient (but reverse) and I want to first 2 links appear in different colors than other 2, and hover should be revers... if u all know what I mean Puzzled
In the middle is logo.
So, I need 1st and second to be black and white on hover (block), and 3rd and 4th to be white, and dark on hover.

And, oc, I want to make this responsible (if this is possible)

This is I have for now.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some title</title>
<style>
body {
	background: #282828; /* Old browsers */
	background: -moz-linear-gradient(left,  #282828 
 
0%, #282828 50%, #ffffff 50%, #ffffff 100%); /* FF3.6+ 
 
*/
	background: -webkit-gradient(linear, left top, 
 
right top, color-stop(0%,#282828), color-stop
 
(50%,#282828), color-stop(50%,#ffffff), color-stop
 
(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  
 
#282828 0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* 
 
Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  #282828 
 
0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* Opera 
 
11.10+ */
	background: -ms-linear-gradient(left,  #282828 
 
0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* IE10+ */
	background: linear-gradient(to right,  #282828 
 
0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( 
 
startColorstr='#282828', 
 
endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 
}
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
   margin: 0;
   padding: 0;
}
</style>
<style type="text/css">
 
#container {
    width:960px;
    margin:100px auto;
    padding:auto 0 30px; /*for testing */
    background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 
 
50%, #282828 50%, #282828 100%);
background: -webkit-gradient(linear, left top, right top, 
 
color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop
 
(50%,#282828), color-stop(100%,#282828));
background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
background: linear-gradient(to right,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
filter: progid:DXImageTransform.Microsoft.gradient( 
 
startColorstr='#ffffff', 
 
endColorstr='#282828',GradientType=1 );
 }
#nav {
    height:73px;
    margin:0;
    padding:0;
    list-style-type:none;
 }
#nav li {
    float:left;
    width:190px;
    margin:0 1px;
 }
#nav a {
	display: block;
	padding-top: 25px;
	text-align: center;
	font-size: 1.3em;
	font-weight: bold;
	color: #282828;
	text-decoration: none;
	text-align: center;    
 }
#nav a:hover,#nav {
    color:#ffffff;
 }  
 
 
#nav img {
    display:block;
    width:184px;
    height:73px;
    margin:auto;
 }
</style>
</head>
<body>
<div id="container">
 
<ul id="nav">
 <li><a href="#">First</a></li>
 <li><a href="#">Second</a></li>
 <li><img 
 
src="http://s29.postimg.org/5601l07yv/img0001.png" 
 
alt="logo"></li>
 <li><a href="#">Third</a></li>
 <li><a href="#">Fourth</a></li>
 </ul>
 
</div>
 
</body>
</html>

AttachmentSize
testing.jpg9.74 KB
congay
congay's picture
Offline
newbie
Last seen: 4 years 7 weeks ago
Timezone: GMT+7
Joined: 2014-09-19
Posts: 4
Points: 7

What's your email, I will

What's your email, I will send to help you

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 16 hours 11 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9766
Points: 3848

Missing the point

You're missing the point of having a forum such as this, congay. Our purpose is to share problems and their solutions publicly for the benefit of all. To take the discussion off forum is to defeat the very reason for the forum's existence.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

dirtslayer
dirtslayer's picture
Offline
newbie
canada
Last seen: 5 years 51 weeks ago
canada
Timezone: GMT-6
Joined: 2014-09-19
Posts: 7
Points: 7

added rv (reverse video) class and added line-height to vcenter

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Some title</title>
<style>
body {
    background: #282828; /* Old browsers */
    background: -moz-linear-gradient(left,  #282828 
 
0%, #282828 50%, #ffffff 50%, #ffffff 100%); /* FF3.6+ 
 
*/
    background: -webkit-gradient(linear, left top, 
 
right top, color-stop(0%,#282828), color-stop
 
(50%,#282828), color-stop(50%,#ffffff), color-stop
 
(100%,#ffffff)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left,  
 
#282828 0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* 
 
Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left,  #282828 
 
0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* Opera 
 
11.10+ */
    background: -ms-linear-gradient(left,  #282828 
 
0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* IE10+ */
    background: linear-gradient(to right,  #282828 
 
0%,#282828 50%,#ffffff 50%,#ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( 
 
startColorstr='#282828', 
 
endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
 
}
<style type="text/css">
body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
   margin: 0;
   padding: 0;
}
</style>
<style type="text/css">
 
#container {
    width:960px;
    margin:100px auto;
    padding:auto 0 30px; /*for testing */
    background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 0%, #ffffff 
 
50%, #282828 50%, #282828 100%);
background: -webkit-gradient(linear, left top, right top, 
 
color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop
 
(50%,#282828), color-stop(100%,#282828));
background: -webkit-linear-gradient(left,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
background: -o-linear-gradient(left,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
background: -ms-linear-gradient(left,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
background: linear-gradient(to right,  #ffffff 0%,#ffffff 
 
50%,#282828 50%,#282828 100%);
filter: progid:DXImageTransform.Microsoft.gradient( 
 
startColorstr='#ffffff', 
 
endColorstr='#282828',GradientType=1 );
 }
 
 
li {
    height: 73px;
    line-height: 73px;
    vertical-align: middle;
}
 
a {
    height: 73px;
}
 
a ,.rv-a:hover {
    color: white;
    background-color: #282828;
}
a:hover,.rv-li , .rv-a{
    color:#282828;
    background-color: white;
}
 
 
 
#nav {
 
    margin:0;
    padding:0;
    list-style-type:none;
 }
#nav li {
    float:left;
    width:190px;
 
    margin:0 1px;
 }
#nav a {
 
    display: block;
 
    text-align: center;
    font-size: 1.3em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;    
 }
 
#nav img {
    display:block;
    width:184px;
    height:73px;
    margin:auto;
 }
</style>
</head>
<body>
<div id="container">
 
<ul id="nav">
 <li><a href="#">First</a></li>
 <li><a href="#">Second</a></li>
 <li><img 
 
src="http://s29.postimg.org/5601l07yv/img0001.png" 
 
alt="logo"></li>
 <li class="rv-li" ><a class="rv-a" href="#">Third</a></li>
 <li class="rv-li" ><a class="rv-a" href="#">Fourth</a></li>
 </ul>
 
</div>
 
</body>
</html>

Malifinio
Malifinio's picture
Offline
newbie
Last seen: 5 years 52 weeks ago
Timezone: GMT+2
Joined: 2014-09-18
Posts: 2
Points: 3

thanks guys, I was allready

thanks guys, I was allready found solution.
Actually, this guy now want some pics instead of gradients.
But, I learned something anyway.
May I make this thread resolved?