css - i cant get a image display before a ul li in a div -
i lost here. trying simple tick box image display before unodored list. have tried background url , list style image, no good. have changed name of div class. have tried placing codes in either 1 ul or 1 li. can display none work not images. `
html <!doctype html> <html lang="en"> <head> <title>cloudstrike</title> <meta charset=utf-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <meta name="viewport" content="width=device-width;" initial-scale=1"> </head> <body> <div id = "wrapper"> piece of text inside 500px width div centered on page <div id="site-title"><a href="#"></a></div> <header> <nav> <ul> <li><a href="#">t-shirts</a></li> <li><a href="#">jackets</a></li> <li><a href="#">caps</a></li> <li><a href="#">toys</a></li> </ul> </nav> </header> <div style="clear:both;"></div> <br> <section> <div class="banner"> <img src="img/cloud-9-banner.png" class="bannerimg"> </div> <br> <br> <div class = "one">one <h1>blue bolt</h1> <ul> <li> list number 1 </li> <li> list number 2 </li> <li> list number 3 </li> </ul> </div> <div class="two">two <h1>blue bolt</h1> <ul> <li> list number 1 </li> <li> list number 2 </li> <li> list number 3 </li> </ul> </div> <div class="three">three <h1>blue bolt</h1> <ul> <li> list number 1 </li> <li> list number 2 </li> <li> list number 3 </li> </ul> </div> </secton> <!-- end boxes --> ` css style html {overflow:auto; height:100%; font-size:62.5%; font-family: arial,helvetica,sans-serif; } body{ margin: 0; text-align: center; background-color: #f1f1f1; } #wrapper{ max-width: 1000px; background: #005397 none repeat scroll 0 0; box-shadow: 0 0 35px #333; margin: 0 auto; height: 900px; } #site-title { margin-right: 20px; padding:1em 0 0 1em; float:left; } #site-title { width:175px; height:53px; display:block; text-decoration: none; background: url('../img/cloud-strike-logo.png') no-repeat; } @font-face { font-family: 'trek'; src: url('fonts/trek.eot'); /* ie9 compat modes */ src: url('fonts/trek.eot?iefix') format('embedded-opentype'), url('fonts/trek.woff') format('woff'), /* modern browsers */ url('fonts/trek.ttf') format('truetype'), /* safari, android, ios */ url('fonts/trek.otf') format('opentype'), /* safari, android, ios */ url('fonts/trek.svg#trek') format('svg'); /* legacy ios */ } header { overflow: auto; border: 2px solid #000; width:80%; height:100px; margin: 0px auto; color: #ffffff } nav{ display: block; float: right; margin:.4em 0; width: auto; } nav ul { list-style: none; margin: 0; padding-left: 0 } nav li { float: left; position: relative; } nav a{ display: block; line-height: 3.333em; padding: 0 .5em 0 .5em; text-decoration: none; font-family: "arial,times new roman"; font-size:100%; color:#fff; font-weight:none; } section { width: 80%; margin:2 auto; height:450px; display:block; position: relative; } .banner { background: #739ec2; background: -moz-linear-gradient(#c0c0c0, #ffffff); background: -o-linear-gradient(#c0c0c0, #ffffff); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#ffffff)); /* older webkit syntax */ background: -webkit-linear-gradient(#c0c0c0, #ffffff); width:98%; height:210px; display:block; margin-top: 1%; margin: 0 auto; border-radius: 2px; } img.bannerimg {clear: both; display: block; margin-left: auto; margin-right: auto; padding:20px; max-width: 90%; height: auto; } #main { display:block; min-height:150px; background:#4f4f4f; margin:0 2em; } .one{ width:30%; background: #fff none repeat scroll 0 0; border-radius: 4px; display: inline; float: left; margin-left: 1%; min-height: 200px; border:0px solid #000; position: relative; } .two { width:30%; background: #fff none repeat scroll 0 0; border-radius: 4px; display: inline; float: left; margin-left: 4%; min-height: 200px; border:0px solid #000; position: relative; } .three { width: 30%; background: #fff none repeat scroll 0 0; border-radius: 4px; display: inline; float: right; margin-right: 1%; min-height: 200px; border:0px solid #000; position: relative; } .one ul { display:list-item; } .one ul li{ background-image: url(..img/blue-check.png); } .one h1 { position: absolute; color:#256091; font-weight:normal; margin-left: 1%; padding-left: 1%; font-size: 150%; font-family: nettoot arial; } .two ul { list-style: none; } .two ul li { background: url (../img/blue-check.png) no-repeat; } .two h1 { position: absolute; color:#256091; font-weight:normal; margin-left: 1%; padding-left: 1%; font-size: 150%; font-family: nettoot arial; } .three ul { list-style: none; } .three ul li { background: url (../img/blue-check.png) no-repeat; } .three h1 { position: absolute; color:#256091; font-weight:normal; margin-left: 1%; padding-left: 1%; font-size: 150%; font-family: nettoot arial; } #boxes p { font-size:100%; color:#333; font-weight:normal; margin:20px 20px 20px; } #footer{ width: 80%; border: 2px solid #000; height: 100px; margin: 0px auto; background: #6ceaf8; } #inner-box { display:block; min-height:150px; background:#4f4f4f; margin-top:10px; } #greybox ul { list-style: none; margin:0; padding-left:1.3em; } #greybox li { background-position:0px; padding-left: 1em; } #greybox li { font-size:80%; color:#fff;} .footbox { width:22%; margin-right:3%; float:left; display:inline; } .footbox h2{ color: #b1a325; } .footboxlast { width:24%; float:right; display:inline; } .footboxlast h2{ color: #b1a325; } #blackbar {display:block; max-height:30px; background:#c5b41c; padding: 5px 20px; 5px 20px; } #blackbar p {font-size:70%; color:#fff; padding:0; text-align:left; } #blackbar { color:#256091; }
your path image invalid.
look @ snippet, or fiddle
html { overflow: auto; height: 100%; font-size: 62.5%; font-family: arial, helvetica, sans-serif; } body { margin: 0; text-align: center; background-color: #f1f1f1; } #wrapper { max-width: 1000px; background: #005397 none repeat scroll 0 0; box-shadow: 0 0 35px #333; margin: 0 auto; height: 900px; } #site-title { margin-right: 20px; padding: 1em 0 0 1em; float: left; } #site-title { width: 175px; height: 53px; display: block; text-decoration: none; background: url('../img/cloud-strike-logo.png') no-repeat; } @font-face { font-family: 'trek'; src: url('fonts/trek.eot'); /* ie9 compat modes */ src: url('fonts/trek.eot?iefix') format('embedded-opentype'), url('fonts/trek.woff') format('woff'), /* modern browsers */ url('fonts/trek.ttf') format('truetype'), /* safari, android, ios */ url('fonts/trek.otf') format('opentype'), /* safari, android, ios */ url('fonts/trek.svg#trek') format('svg'); /* legacy ios */ } header { overflow: auto; border: 2px solid #000; width: 80%; height: 100px; margin: 0px auto; color: #ffffff } nav { display: block; float: right; margin: .4em 0; width: auto; } nav ul { list-style: none; margin: 0; padding-left: 0 } nav li { float: left; position: relative; } nav { display: block; line-height: 3.333em; padding: 0 .5em 0 .5em; text-decoration: none; font-family: "arial,times new roman"; font-size: 100%; color: #fff; font-weight: none; } section { width: 80%; margin: 2 auto; height: 450px; display: block; position: relative; } .banner { background: #739ec2; background: -moz-linear-gradient(#c0c0c0, #ffffff); background: -o-linear-gradient(#c0c0c0, #ffffff); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#c0c0c0), to(#ffffff)); /* older webkit syntax */ background: -webkit-linear-gradient(#c0c0c0, #ffffff); width: 98%; height: 210px; display: block; margin-top: 1%; margin: 0 auto; border-radius: 2px; } img.bannerimg { clear: both; display: block; margin-left: auto; margin-right: auto; padding: 20px; max-width: 90%; height: auto; } #main { display: block; min-height: 150px; background: #4f4f4f; margin: 0 2em; } .one { width: 30%; background: #fff none repeat scroll 0 0; border-radius: 4px; display: inline; float: left; margin-left: 1%; min-height: 200px; border: 0px solid #000; position: relative; } .two { width: 30%; background: #fff none repeat scroll 0 0; border-radius: 4px; display: inline; float: left; margin-left: 4%; min-height: 200px; border: 0px solid #000; position: relative; } .three { width: 30%; background: #fff none repeat scroll 0 0; border-radius: 4px; display: inline; float: right; margin-right: 1%; min-height: 200px; border: 0px solid #000; position: relative; } .one ul { display: list-item; } .one ul li { background-image: url(https://upload.wikimedia.org/wikipedia/commons/c/cf/blue_check.png); background-size: contain; background-repeat: no-repeat; } .one h1 { position: absolute; color: #256091; font-weight: normal; margin-left: 1%; padding-left: 1%; font-size: 150%; font-family: nettoot arial; } .two ul { list-style: none; } .two ul li { background: url (../img/blue-check.png) no-repeat; } .two h1 { position: absolute; color: #256091; font-weight: normal; margin-left: 1%; padding-left: 1%; font-size: 150%; font-family: nettoot arial; } .three ul { list-style: none; } .three ul li { background: url (../img/blue-check.png) no-repeat; } .three h1 { position: absolute; color: #256091; font-weight: normal; margin-left: 1%; padding-left: 1%; font-size: 150%; font-family: nettoot arial; } #boxes p { font-size: 100%; color: #333; font-weight: normal; margin: 20px 20px 20px; } #footer { width: 80%; border: 2px solid #000; height: 100px; margin: 0px auto; background: #6ceaf8; } #inner-box { display: block; min-height: 150px; background: #4f4f4f; margin-top: 10px; } #greybox ul { list-style: none; margin: 0; padding-left: 1.3em; } #greybox li { background-position: 0px; padding-left: 1em; } #greybox li { font-size: 80%; color: #fff; } .footbox { width: 22%; margin-right: 3%; float: left; display: inline; } .footbox h2 { color: #b1a325; } .footboxlast { width: 24%; float: right; display: inline; } .footboxlast h2 { color: #b1a325; } #blackbar { display: block; max-height: 30px; background: #c5b41c; padding: 5px 20px; 5px 20px; } #blackbar p { font-size: 70%; color: #fff; padding: 0; text-align: left; } #blackbar { color: #256091; }<body> <div id="wrapper"> piece of text inside 500px width div centered on page <div id="site-title"> <a href="#"></a> </div> <header> <nav> <ul> <li><a href="#">t-shirts</a> </li> <li><a href="#">jackets</a> </li> <li><a href="#">caps</a> </li> <li><a href="#">toys</a> </li> </ul> </nav> </header> <div style="clear:both;"></div> <br> <section> <section> <div class="banner"> <img src="img/cloud-9-banner.png" class="bannerimg"> </div> <br> <br> <div class="one">one <h1>blue bolt</h1> <ul> <li>list number 1</li> <li>list number 2</li> <li>list number 3</li> </ul> </div> <div class="two">two <h1>blue bolt</h1> <ul> <li>list number 1</li> <li>list number 2</li> <li>list number 3</li> </ul> </div> <div class="three">three <h1>blue bolt</h1> <ul> <li>list number 1</li> <li>list number 2</li> <li>list number 3</li> </ul> </div> </section> <!-- end boxes -->
Comments
Post a Comment