the text decoration wont work? in html/css -


ok put background , blocks in lists text hyperlinked , text clickable. doing wring? need whole box clickable , text white until scroll on turns black. also, there way make on mobile boxes closer under each other?

body {    background: url("https://lh3.googleusercontent.com/-lyq3vqhe3mo/vrvkgwg8pqi/aaaaaaaadmq/qkjs5alviko/w530-d-h253-p-rw/desk%2bbackground.png") #363634 no-repeat center top;    background-size: 100%;    background-color: #3d5771;    margin: 0;    padding: 0;  }    h1 {    position: absolute;    top: 23%;    left: 30%;    color: white;    font-family: arial;    font-size: 4.6vw;    letter-spacing: 1px;  }    p {    position: absolute;    width: 250px;    top: -1px;    left: 15px;    height: 25px;    font-family: arial;  }    ul {    word-spacing: .2em;    letter-spacing: .2em;  }    ul li {    font-family: arial;    text-align: center;    vertical-align: middle;    line-height: 40px;    top: 43%;    display: inline-block;    margin-top: 250px;    margin-left: 115px;    letter-spacing: 1px;    word-spacing: normal;    background-color: rgba(5, 4, 2, 0.1);    border: 2px solid white;    color: white;    text-align: center;    text-decoration: none;    font-size: 90%;    width: 150px;    height: 40px;  }    ul li:link,  ul li:visited {    font-family: arial;    text-align: center;    vertical-align: middle;    line-height: 40px;    display: inline-block;    margin-top: 250px;    margin-left: 115px;    letter-spacing: 1px;    word-spacing: normal;    background-color: rgba(5, 4, 2, 0.1);    border: 2px solid white;    font-size: 90%;    width: 150px;    height: 40px;    text-decoration: none;    color: white;  }    li {    text-decoration: none;    color: white;  }    ul li:hover,  ul li:active {    background-color: white;    color: black;    text-decoration: none;  }
<center>    <h1>a girl passion</h1>  </center>  <ul>    <li><a href="www.youtube.com" class="life"><strong>my life</strong></a>    </li>    <li><a href="www.youtube.com" class="prot"><strong>portfolio</strong></a>    </li>    <li><a href="www.youtube.com" class="resume"><strong>resume</strong></a>    </li>    <li><a href="www.youtube.com" class="me"><strong>about me</strong></a>    </li>  </ul>

add css make whole "box" clickable

ul li {   display: inline-block;   height: 100%;   width: 100%;   color: white;   text-decoration: none; }

and change color right

ul li a:hover, ul li a:active {   background-color: white;   color: black; }

update: base on request, made markup changes, make more responsive

snippet demo

html, body {    margin: 0;    padding:0;  }  body {    background:url("https://lh3.googleusercontent.com/-lyq3vqhe3mo/vrvkgwg8pqi/aaaaaaaadmq/qkjs5alviko/w530-d-h253-p-rw/desk%2bbackground.png") #363634 no-repeat center top;    background-size: 100%;    background-color:#3d5771;    }  .wrapper {    padding-top: 10%;  }    h1 {    color: white;    font-family:arial;    font-size: 4.6vw;    letter-spacing: 1px;    text-align: center;  }    ul {    word-spacing: .2em;    letter-spacing: .2em;    text-align: center;    margin: 0;    padding: 0;  }  ul li {    font-family:arial;    text-align: center;    vertical-align: middle;    line-height: 40px;    display: inline-block;    background-color: rgba(5,4,2,0.1);    border: 2px solid white;    color: white;    font-size: 90%;    width: 150px;    height: 40px;    margin: 30px;  }    ul li a:hover, ul li a:active {    background-color: white;    color: black;  }    ul li {    display: inline-block;    height: 100%;    width: 100%;    text-decoration: none;    color: white;  }    @media screen , (max-width: 700px) {      .wrapper {      padding-top: 5%;    }        ul li {      margin: 10px;    }    }
<div class="wrapper">    <h1>a girl passion</h1>    <ul>      <li><a href="www.youtube.com" class="life" ><strong>my life</strong></a></li>      <li><a href="www.youtube.com" class="prot"><strong>portfolio</strong></a></li>      <li><a href="www.youtube.com" class="resume"><strong>resume</strong></a></li>      <li><a href="www.youtube.com" class="me"><strong>about me</strong></a></li>    </ul>  </div>


Comments

Post a Comment

Popular posts from this blog

routing - AngularJS State management ->load multiple states in one page -

Image
i developing site in angularjs ui-router. have situation on button click need change , load 3 state page , 3 looks image .please me how can load multiple pages. in 1 page you need configure router config this: $stateprovider .state("state1", { url: "/url1", controller: "firstcontroller", views: { view1: { templateurl: "templates/template1.html" }, view2: { templateurl: "templates/template2.html" }, view3: { templateurl: "templates/template3.html" } } }).state("state2", { url: "/url2", controller: "secondcontroller", views: { view1: { templateurl: "templates/template4.html" }, view2: { templateurl: "templates/template5.html" }, view3: { templateurl: "templates/template6.html" } }).state("state3", { ...
Read more

python - GRASS parser() error -

i'm trying use grass on python 2.7, i'm having problems @ setting script on idle, i'm getting error @ parser() function: here script: import os import sys gisbase = os.environ['gisbase'] = 'c:\program files (x86)\grass gis 7.0.1rc1' gisrc = 'c:\grassdata' gisdbase = 'c:\grassdata' location = 'newlocation' mapset = 'tc' ld_library_path = 'c:\program files (x86)\grass gis 7.0.1rc1\lib' path = 'c:\program files (x86)\grass gis 7.0.1rc1\etc';'c:\program files (x86)\grass gis 7.0.1rc1\etc\python';'c:\program files (x86)\grass gis 7.0.1rc1\lib';'c:\program files (x86)\grass gis 7.0.1rc1\bin';'c:\python27';'c:\program files (x86)\grass gis 7.0.1rc1\python27';'c:\program files (x86)\grass gis 7.0.1rc1\msys' pythonlib = 'c:\python27' pythonpath = 'c:\program files (x86)\grass gis 7.0.1rc1\etc\python' sys.path.append(os.path.join(os.environ['...
Read more

Swift game error message -

i following ios game tutorial. cannot figure out wrong here. error on these 2 lines. let newangle = percent * 180 - 180 cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi); 180.0 //error "use of unresolved identifier 'percent'" the tutorial uses: cannon.zrotation = cgfloat(newangle) * cgfloat(m_pi)/ 180.0 but changed error suggested import spritekit class gamescene: skscene { var cannon: skspritenode! var touchlocation:cgpoint = cgpointzero override func didmovetoview(view: skview) { /* setup scene here */ cannon = self.childnodewithname("cannon") as! skspritenode } override func touchesbegan(touches: set<uitouch>, withevent event: uievent?) { /* called when touch begins */ touchlocation = touches.first!.locationinnode(self) } override func touchesmoved(touches: set<uitouch>, withevent event: uievent?) { touchlocation = touches.first!.locationinn...
Read more