After stumbling upon an intriguing article about text rotation with css, I found myself in need of implementing this feature. However, navigating through the process has left me feeling disoriented and perplexed. The rotated text element seems to be defying my desired layout.
You can view the specific page
temporarily or refer to this image:http://76.182.31.74:8001/aboutme.html
As depicted in the image, the words "ABOUT ME" appear somewhat detached from the main content area. Ideally, they should snugly fit beside the central content (in this case, a picture) within the gray section vertically. Despite numerous attempts, I have been unable to achieve this!
Below are excerpts of the relevant CSS/HTML code snippets:
http://76.182.31.74:8001/styles/default.css
#SideWord {
display:block;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color: #666;
text-shadow: 0px -1px 0px rgba(0,0,0,.5);
font-size:53px;
position:relative;
left:-617px;
text-align:center;
font-family:Verdana, sans-serif;
}
http://76.182.31.74:8001/aboutme.html
<div id="content">
<span id="SideWord">
<!-- InstanceBeginEditable name="SideWord" -->ABOUT ME <!-- InstanceEndEditable -->
</span>
<div id="spacer">
<!-- InstanceBeginEditable name="content" -->
<img id="profile-pic" src="images/me.jpg" /><span class="header3">I'M <span class="emph">XANDER LAMKINS</span> AND I'M A TEEN INTERESTED IN <span class="emph">COMPUTER PROGRAMMING</span>, GENERAL <span class="emph">COMPUTER SCIENCE</span>, AND <span class="emph">MATHAMATICS</span>.</span>
<span class="page-content" style="padding-top:35px;">I've been programming since mid-2005 and have loved every day of it! I work everyday on hobby projects in all aspects of the computing genre. I do 3D animations, develop applications, design webpages, and even a little bit of image design.<br />
<br />I am currently fluent in .NET, Lua, HTML/CSS/JavaScript/jQuery, and Basic. I am also knowledgable about Python and Java.<br /><br />As of my Junior and Senior year, I will be studying at <a href="http://en.wikipedia.org/wiki/North_Carolina_School_of_Science_and_Mathematics" class="smoothlink">NCSSM</a>, a public boarding school focused on Science and Mathamatics.<br /><br />I'm also very active on the <a href="http://stackexchange.com/" class="smoothlink">StackExchange</a> network. Feel free to check out my profiles there.</span><a target="_blank" class="se" href="http://stackoverflow.com/users/595437/xander-lamkins">
<img src="http://stackoverflow.com/users/flair/595437.png?theme=clean" width="208" height="58" alt="profile for Xander Lamkins at Stack Overflow, Q&A for professional and enthusiast programmers" title="profile for Xander Lamkins at Stack Overflow, Q&A for professional and enthusiast programmers">
</a> <a target="_blank" class="se" href="http://superuser.com/users/77306/xander-lamkins">
<img src="http://superuser.com/users/flair/77306.png?theme=clean" width="208" height="58" alt="profile for Xander Lamkins at Super User, Q&A for computer enthusiasts and power users" title="profile for Xander Lamkins at Super User, Q&A for computer enthusiasts and power users">
</a><span class="page-content" style="padding-top:35px;">Contact Me:<br /><span class="emailz"></span></span>
<!-- InstanceEndEditable -->
</div>
</div>
Should you require additional information or further clarification, please don't hesitate to reach out. My ultimate goal is to seamlessly align those stubborn words next to (or left of) the #spacer div, ensuring a specified vertical distance x from the grey region's top.
Feel free to explore the other pages while they remain accessible.