Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

text-align question

O

olup

Cancelled
Original poster
Oct 11, 2011
383
40
Hi, I have a really strange problem that I can't figure out.
I'm fairly new to webdesign and am working on my website that I have yet to upload. Here's the deal:
In the navigation bar I have three differently shaped elements as links with text in them. A square, a circle and a triangle. The link text lines up perfectly in the square and circle however not in the triangle.
It aligns right for some reason,even though the css for all three elements in the navigation are the same. I tried adding some padding-right to the triangle, which of course doesn't stay the same shape anymore.
I would greatly appreciate your input/help!

Here's the css for the navigation links:

nav a {
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:20px;
line-height:200px;
color:#fff;
}


and here's the css for the triangle(the home button)

.home{


width:0;
height:0;
display:block;
float:right;
margin-left:20px;
border-right:130px solid transparent;
border-left:130px solid transparent;
border-bottom:200px solid #778899;
}


2aiqwer.jpg
 
If you'll notice, in order to make that CSS triangle, the home link is defined as having a width and height of 0. If there's no width to the anchor tag, you can't very well center its text.

I experimented with applying the home class to a span, then putting the link in the span and defining the link's width and margin to center it. I'm not sure how cross-compatible this is but it works in Safari.

PHP: 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#nav a {
text-decoration:none;
text-transform:uppercase;
font-weight:bold;
font-size:20px;
line-height:200px;
color:#fff;
}
.home{
width:0;
height:0;
display:block;
float:right;
margin-left:20px;
border-right:130px solid transparent;
border-left:130px solid transparent;
border-bottom:200px solid #778899;
text-align:center;
}
#nav .home a {
display: block;
width: 260px;
margin-left: -130px;
}
</style>
</head>

<body>
<div id="nav">
<span class="home"><a href="#">Home</a></span>
</div>
</body>
</html>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back