6 replies [Last post]
empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 41 weeks ago
Houston, TX
Timezone: GMT-5
Joined: 2015-10-01
Posts: 4
Points: 5

<!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;
} 

empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 41 weeks ago
Houston, TX
Timezone: GMT-5
Joined: 2015-10-01
Posts: 4
Points: 5

I have rotation code but just can't select only the text

Please help!
I'm going mad here.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 41 weeks ago
Houston, TX
Timezone: GMT-5
Joined: 2015-10-01
Posts: 4
Points: 5

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); 
}

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 41 weeks ago
Houston, TX
Timezone: GMT-5
Joined: 2015-10-01
Posts: 4
Points: 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!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 59 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9761
Points: 3843

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.