Thu, 2015-10-01 13:33
<!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; }
Thu, 2015-10-01 13:37
#1
I have rotation code but just can't select only the text
Please help!
I'm going mad here.
Thu, 2015-10-01 18:59
#2
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
Thu, 2015-10-01 23:03
#3
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); }
Fri, 2015-10-02 08:58
#4
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
Fri, 2015-10-02 14:40
#5
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!
Fri, 2015-10-02 19:20
#6
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