Thu, 2014-09-18 21:12
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 
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>
| Attachment | Size |
|---|---|
| testing.jpg | 9.74 KB |
Fri, 2014-09-19 18:18
#1
What's your email, I will
What's your email, I will send to help you
Fri, 2014-09-19 19:28
#2
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
Fri, 2014-09-19 20:17
#3
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>
Sat, 2014-09-20 22:39
#4
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?