html - Unvisited links looking wrong -
first post here, don't judge me if ask incredibly stupid, started working css couple of days ago.
my problem (as can see here: www.silente.info ), when visited link looks different. , looks how want look, want unvisited link same way. i'm trying make unvisited link visited.
i can't find can possibly screw up. registered , i'm calling help. :)
edit: know tags do, 0.5 opacity whole block (when not being hovered) applies visited links. hope avoids answers telling me use stuff used in css provided. :)
this css (yeah, it's mess). after can find html.
/* test.css */ *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} body{margin:0} table{border-collapse:collapse;border-spacing:0;width:100%;display:table} /* end of test.css ??*/ table,th,td,.playertable,.playerth,.playertd,.headertable,.headerth,.headertd { text-align: center; vertical-align: middle; table-layout: fixed; color: #603d9a; font: 16px/26.4px helvetica,sans-serif!important } tr { display: table; width: 100% } td { display: inline-table; width: 25% } .bgcolor1 { background-color: #603d9a; background: #603d9a } .color1 { color: #603d9a; } :link,:visited { text-decoration: none; } :hover,:active, { color: #000; } .navbartable { text-transform: uppercase; text-decoration: none; font-weight: 700; font-family: helvetica,sans-serif!important; font-size: 16px; line-height: 26.4px; font: 700 16px/26.4px helvetica,sans-serif!important } .navbar { margin: 0 auto; width: 600px; height: 28px; display: -webkit-flex; -webkit-flex-direction: row-reverse; display: flex; flex-direction: row; border-radius: 0 0 30px 30px; border-bottom: 1px solid rgba(96,61,154,0.2); } .navbar div { margin: 0 auto; font-weight: bold; } .website { top: 100px; width: 100%; min-height: 100%; background: -webkit-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7)); background: -o-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7)); background: -moz-linear-gradient(rgba(0,0,255,0.15),rgba(255,255,255,0.7)); background: linear-gradient(rgba(100,0,255,0.03),rgba(0,0,255,0.2)); margin: 0 auto; } .hovertitle { opacity: .7; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; } .hovertitle:hover { opacity: 1; color: #603d9a; } .hoverbar { opacity: .5; -webkit-transition: opacity 500ms; -moz-transition: opacity 500ms; -o-transition: opacity 500ms; transition: opacity 500ms; opacity: .5; } .hoverbar:hover { opacity: 1; color: #603d9a; font-size: 23px!important; } .title { width: 100%; height: 200px; margin: 0 auto; /* start comment here remove text */ padding-top: 100px; text-align: center; text-transform: uppercase; text-decoration: underline!important; letter-spacing: -3px; text-decoration: none; font-size: 32px!important; font-style: normal!important; font-variant: normal!important; font: 700 32px helvetica,sans-serif!important; /* end comment here remove text */ /* gradient background-image: url("http://i.imgur.com/tiypwnu.png"); background: -webkit-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7)); background: -o-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7)); background: -moz-linear-gradient(rgba(0, 0, 255, 0.15), rgba(255, 255, 255, 0.7)); background: linear-gradient(rgba(0, 0, 255, 0.1), rgba(255, 255, 255, 0.7)); */ /* image background-image: url("http://i.imgur.com/tiypwnu.png"); background-size: contain; background-repeat: no-repeat; background-position: center; */ } .body { width: 95%; padding-top: 50px; margin: 0 auto; } .footerpadding { height: 50px; } .footer { text-align: center; width: 100%; height: 110px; color: #ffffff; margin: 0 auto; text-transform: uppercase; text-decoration: none; font-weight: 700; font-family: helvetica,sans-serif!important; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:hover,a:active { color: #000; } .playertr { display: table; width: 100% } .playertd { display: inline-table } .headertr { display: table; width: 100% } .headertd { display: inline-table; width: 25%; } .chatdiv { position: relative; padding-bottom: 132%; height: 0 } .chatdiv iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .playerdiv { position: relative; padding-bottom: 56.25%; height: 0 } .playerdiv iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100% } .player { width: 70% } .chat { width: 30% } html:
<html> <title>silente portfolio</title> <head> <link rel="stylesheet" type="text/css" href="http://nedsteel.bg/!silente/main.css"> <link rel="icon" href="http://nedsteel.bg/!silente/favicon.png" type="image/gif" sizes="16x16"> <style></style> </head> <body> <div class="website"> <div class="title color1 hovertitle"> <a href="http://silente.formyjob.net/">silent_entertainment</a> </div> <div class="navbar color1"> <table class="navbartable color1 headertable"> <tr class="headertr"> <td class="headertd"><div class=hoverbar><a href="http://who.silente.info">who i</a></div></td> <td class="headertd"><div class=hoverbar><a href="#works">my works</a></div></td> <td class="headertd"><div class=hoverbar><a href="#clients">clients</a></div></td> <td class="headertd"><div class=hoverbar><a href="#contact">contact</a></div></td> </tr> </table> </div> <div class="body color1"> <table cellpadding="20"> <tr> <td> lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. ne qui omnis aliquip sadipscing, duo ei velit molestie. ne vix blandit evertitur maiestatis. et omnium philosophia sit, ius etiam integre corrumpit ea. nec oratio menandri </td><td> lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. ne qui omnis </td><td> lorem ipsum dolor sit amet, duo munere repudiandae accommodare et. ne qui omnis aliquip sadipscing, duo ei vel </td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </table> </div> <div class="footerpadding"></div> </div> <div class="footer bgcolor1"> <a href="http://facebook.com/silentepage"><img src="http://nedsteel.bg/!silente/footer1.png"></a> <a href="http://youtube.com/iesdi"><img src="http://nedsteel.bg/!silente/footer4.png"></a> <a href="http://twitch.tv/iesdise"><img src="http://nedsteel.bg/!silente/footer3.png"></a> <a href="http://twitter.com/iesdi_se"><img src="http://nedsteel.bg/!silente/footer2.png"></a> <font size="1"></br></br><a href="http://nedart.bg">©2015 nedart</a> ©silent entertainment.</br> <a href="http://silente.formyjob.net/">www.silente.info</a> rights reserved.</font> </div> <p hidden><span style="font-size: 0px;"><a href="http://www.forumotion.com">forumotion.com</a></span></p> </body> </html>
there css selector that. add:
a, a:visited { } to css set same styles visited , "unvisited" links. here more information this.
Comments
Post a Comment