• Locked
6 replies [Last post]
Thu, 2015-10-01 13:33
empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 51 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;
}

Top
Tags:
Thu, 2015-10-01 13:37
#1
empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 51 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.

Top
Thu, 2015-10-01 18:59
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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.

Top
Thu, 2015-10-01 23:03
#3
empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 51 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); 
}

Top
Fri, 2015-10-02 08:58
#4
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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.

Top
Fri, 2015-10-02 14:40
#5
empyrean23
empyrean23's picture
Offline
newbie
Houston, TX
Last seen: 4 years 51 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!

Top
Fri, 2015-10-02 19:20
#6
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 13 hours 56 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

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.

Top
  • Locked