html - Polaroid Tiles For Navbar -
2 questions,so want create navbar,i found example on net.the way code when add more li's wrap second line why?.
main question - want add more li's navbar, it's using nth-child target each li style,i want changed each li has specific class can add more li's , style each way,and not use nth-child.i tried , couldn't them style way before code changes,they instead line up.
ps: why wrapper doing in editor, on editor , browser is working expected.
body{ margin: 0px; } #wrapper{ background-color: #ffffff; height: 100%; margin-left:auto; margin-right:auto; padding: 30px; width:940px; border: 15px solid #b4d8e7; border-radius: 10px; } /*---2 column-right layout----------------------*/ .layout-two-column-right #alpha { width: 650px; } .layout-two-column-right #beta { width: 310px; } ul.polaroids-menu { width: 280px; margin: 30px 0 18px -55px; list-style-type: none; } ul.polaroids-menu a, ul.polaroids-menu a:hover { display: inline; float: left; width: auto; margin: 0 0 27px 30px; padding: 6px 6px 3px; background: #fff; font-family: "marker felt", sans-serif; text-align: center; text-decoration: none; color: #333; font-size: 14px; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); /* default/first image rotation */ -webkit-transform: rotate(-2deg); -moz-transform: rotate(-2deg); -webkit-transition: -webkit-transform .15s linear; } ul.polaroids-menu img { display: block; width: 80px; margin-bottom: 6px; border-radius: 0; border: 0; } ul.polaroids-menu a:after { content: attr(title); } /* #2 me */ ul.polaroids-menu li:nth-child(2n) { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); margin-left: -8px; margin-top: 20px; } /* #3 shop */ ul.polaroids-menu li:nth-child(3n) { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-5deg); margin-top: -175px; margin-left: 185px; } /* scale images on hover, add transitions smoothing things out, , ensure hover appears on top */ ul.polaroids-menu li a:hover { -webkit-transform: scale(1.25); -moz-transform: scale(1.25); -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5); -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); position: relative; z-index: 5; }<doctype html> <html lang="en"> <head> <title>polaroids</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div id="wrapper"> <nav> <ul class="polaroids-menu"> <li><a href="http://www.example.com" title="my family"><img src="http://themes.typepad.com/images/polaroid-myfamily.jpg" /></a></li> <li><a href="http://www.example.com" title="about me"><img src="http://themes.typepad.com/images/polaroid-aboutme.jpg" /></a></li> <li><a href="http://www.example.com" title="my shop"><img src="http://themes.typepad.com/images/polaroid-myshop.jpg" /></a></li> </ul> </nav> </div> </body> </html>
it being inserted on second line because width of ul.polaroids-menu 280px each image width in list item 80px margins included calculated width comes out 280px. if adding additional list items suggest considering widths , margins calculating width of parent container.
also assign specific css each list item use specific child selector in css.
for additional 4th link:
ul.polaroids-menu li:nth-child(4) { -webkit-transform: rotate(6deg); -moz-transform: rotate(6deg); margin-top: -155px; margin-left: 275px; } notice properties margin-top , margin-left different each link images.
similarly add 5th image link list , add relevant css it. choose tilt image -moz-transformand -webkit-transformrotateangle property , update themargin-leftvalue considering each image ofwidth:80px`
i have not done exact calculations of widths images including margins. should provide sufficient idea on how work around it. basic each image 80px 4 images parent container should have `320px' minimum width. use dev tools see how margin plays out exact number. or should calculate through css code.
update ul.polaroids-menu li:nth-child(2n) a css selector targets (multiple of 2's) li a children of ul , ul.polaroids-menu li:nth-child(3n) a css selector targets odd (multiples of 3).
why need specific child css selector requirement align images in single row.
margin-left used space images accordingly. specific child css selector specify required left margin each image along inclination of image clockwise or anticlockwise.
that means can not use (2n) , (3n) in case. because apply exact same margin-left value , odd numbered children. might result undesired outcome.
why css works in case of example? since there 3 images (2n) css applied 2nd image , (3n) css gets applied 3rd image only. 1st image not effected of it. add 4th image (2n) property applied 4th image same left margin hence undesired outcome.
to make wrapper work properly add below css property.
html , body { height : 100%; } working example jsfiddle https://jsfiddle.net/behc9zoj/
i hope helps clear understanding.
Comments
Post a Comment