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.
[code]<!doctype html>
Some title body { background: #282828; /* Old browsers */ background: -moz-linear-gradient(left, #2828280%, #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 */
}
body { background-color: #FFFFFF; color: #000000; font-family: Arial; font-size: 13px; margin: 0; padding: 0; } #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; }- First
- Second
- <img
src=“http://s29.postimg.org/5601l07yv/img0001.png”
alt=“logo”>
- Third
- Fourth
And here ist screenshoot (I´m new member and cannot post image)