<!DOCTYPE html> <html> <head> <title>CSS3</title> <link href="styles.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="blueprint"> <ul> <li><a href='#'>Business Applications</a></li> <li><a href='#'>Software Deployment</a></li> <li><a href='#'>Batch</a></li> <li><a href='#'>Online</a></li> <li><a href='#'>Mobile</a></li> <li><a href='#'>Runtime</a></li> <li><a href='#'>Service</a></li> <li><a href='#'>Foundation</a></li> <li><a href='#'>Orchestration</a></li> <li><a href='#'>Data</a></li> <li><a href='#'>Developers Workbench</a></li> </ul> </div> </body> </html>
html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { background: #666; font-size: 16px; } .blueprint { width: 600px; margin: 0 auto; text-align: center; } a { color: #fff; text-decoration: none; } ul, li { margin: 5px; padding-top: 12px; } li { list-style-type: none; display: inline-block; border: 1px solid #000; } li:nth-child(1) { background: #7836aa; height: 34px; width: 580px; } li:nth-child(2) { background: #dd7823; height: 220px; width: 56px; float: left; } /* This is where I need to select the a href inside the li to rotate only the text li:nth-child(2) { background: #dd7823; height: 220px; width: 56px; float: left; } */ li:nth-child(3) { background: #3c7ac3; -moz-box-shadow: inset 0 0 6px #fff; -webkit-box-shadow: inset 0 0 6px #fff; box-shadow: inset 0 0 6px #fff; padding: 18px; float: left; margin-left: 6px; } li:nth-child(4) { background: #3c7ac3; padding: 18px; float: left; } li:nth-child(5) { background: #3c7ac3; padding: 18px; float: left; } li:nth-child(6) { background: #3c7ac3; padding: 18px; float: left; } li:nth-child(7) { background: #888; height: 220px; width: 56px; float: right; margin-right: -36px; } li:nth-child(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" /> { background: #05059a; height: 34px; width: 440px; clear: both; } li:nth-child(9) { background: #809d42; height: 34px; width: 440px; } li:nth-child(10) { background: #cd0505; height: 34px; width: 440px; } li:nth-child(11) { background: #444; height: 34px; width: 580px; }
I have rotation code but just can't select only the text
Please help!
I'm going mad here.
ID?
The code you mention, javascript? Why not simply put an id attribute on the a element?
As a css selector, and building on what you have,
li:nth-child(2) a { background: #dd7823; height: 220px; width: 56px; float: left; }
cheers,
gary
Thanks but doesn't work.
It's an assignment for class so I can't add anything to the html. I handed it in yesterday and this part was extra credit. It's driving me nuts that I can't do it. I tried what you suggested (below) but it doesn't work. Other ideas?
Please and thank you.
li:nth-child(2) a { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); }
The selector I gave you does work.
The issue is probably the attempt to apply the transform property to a phrase element. See this:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1.5em;} p { font-size: 1em;} ul { border: 1px solid black; /* for clarity */ display: inline-block; /* to enclose float child elements */ list-style: none; padding: 3px;} /* for clarity */ li { border: 1px solid blue; float: left; padding: 3px;} /* for clarity */ li:nth-child(2) a { display: block; /* Must make block or inline-block to transform. */ border: 1px solid red; transform: rotate(-90deg);} /* another inline/phrase object example */ span { display: inline-block; transform: rotate(-90deg);} /*]]>*/ </style> </head> <body> <ul> <li> <a href="#">item 1</a> </li> <li> <a href="#">item 2</a> </li> <li> <a href="#">item 3</a> </li> </ul> <p>Now <span>is the</span> time <span>for all</span> good men.</p> </body> </html>
cheers,
gary
Hurray!
I knew I must have been doing something wrong in either display or position.
Gary Turner is the master of all that is fine and good!
Were it me
I'd simply rotate the li element, which would take the link with it.
li:nth-child(2) { border: 1px solid red; transform: rotate(-90deg);}
cheers,
gary