Friday, 10 June 2011

text-align question


hi, have strange problem can't figure out.
i'm new webdesign , working on website have yet upload. here's deal:
in navigation bar have 3 differently shaped elements links text in them. square, circle , triangle. link text lines in square , circle not in triangle.
aligns right reason,even though css 3 elements in navigation same. tried adding padding-right triangle, of course doesn't stay same shape anymore.
appreciate input/help!

here's css navigation links:

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


, here's css 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;
}


[​img]
 

if you'll notice, in order make css triangle, home link defined having width , height of 0. if there's no width anchor tag, can't center text.

experimented applying home class span, putting link in span , defining link's width , margin center it. i'm not sure how cross-compatible 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>
 


Forums Special Interests Web Design and Development


  • iPhone
  • Mac OS & System Software
  • iPad
  • Apple Watch
  • Notebooks
  • iTunes
  • Apple ID
  • iCloud
  • Desktop Computers
  • Apple Music
  • Professional Applications
  • iPod
  • iWork
  • Apple TV
  • iLife
  • Wireless

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)