CSS div style not working in HTML -
i trying apply borders few divs in webpage using following css:
.column-left{ float: left; width: 20%;} .column-right{ float: right; width: 20%; visible:false;} .column-center{ display: inline-block; width: 60%;} a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; } #test{ margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px; border-style:solid; border-left:1px; border-right:1px; border-top:0px; border-bottom:1px; border-color:#000000; background-color: yellow; }
having in html like:
<!doctype html> <html> <head><meta http-equiv="content-type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="cols.css"> <title>test</title> </head> <body> <div> <div class="column-center">...</div> <div class="column-left"><a href="#"> link 1 </a><br><a href="#"> link 2 </a><br><a href="#"> link 3 </a><br><a href="#"> link 4 </a><br> </div> <div class="column-right"> ... </div> </div><div id="test"> ... </div> </body> </html>
settings in #test not work , cannot figure out reason. ideas?
edit: works correctly if put properties of #test in css file. edit: adding relevant html code.
your border-style property should next of border properties: example :
margin-left:auto; margin-right:auto; margin-top:0px; margin-bottom:0px; border-left:1px; border-right:1px; border-top:0px; border-bottom:1px; height: 100px; border-style:solid; border-color:#000000; background-color: yellow;
and better use shorthand value :
margin:0 auto; height: 100px; border:1px solid #000; border-top:0; background: rgb(255,255,0);
Comments
Post a Comment