Jump to content

Multiple text aligns in a single <div> </div> on the same line?


Shadow
 Share

Recommended Posts

I have no clue on how to get this to work, I have a sub-navigation menu I'm putting on a site that I'm building and I need the link text centered in the cell but there is a > after that text I need aligned to the right of the cell (same cell) to get the appearance that I want/need.HTML

<div id="wrapper2"><div id="pathlv1"><a class="class1" href="index.html">Home</a> <span class="class2">></span><!-- end #pathlv1 --></div><div id="pathlv2">Page #1<span class="class2">></span><!-- end #pathlv2 --></div><!-- end #wrapper2 --></div>

CSS

.indexcsslayout #wrapper2 {	position:absolute;	top:110px;	left:5px;	height:15px;	width:950px;	background-color:#903;}.indexcsslayout #pathlv1 {	position:absolute;	top:0px;	left:0px;	height:15px;	width:100px;	vertical-align:middle;	font-weight:bold;	font-size:13px;	background-color:#000;	color:#FF0;}.indexcsslayout #pathlv2 {	position:absolute;	top:0px;	left:100px;	height:15px;	width:100px;	vertical-align:middle;	font-weight:bold;	font-size:13px;	background-color:#000;	color:#FFF;}.class1 {	color:#FFF;	text-decoration:none;	text-align: center;}.class2 {	text-align:right;}

Edited by Shadow
Link to comment
Share on other sites

A span will only ever be as wide as it needs to be. Meaning text-align won't work on a span. At least in its default display mode. A span by default is inline. What you want is a block or inline-block. A block will break to a new line so you probably want to go with inline-block. You can change its display using the display property:display: inline-block;That will make it so that it still stays on the same line, but you can set a width for it and use text-align.

Link to comment
Share on other sites

You could centre the text and put the > in a span with display: inline-block and float it to the right. It'll need position:relative, too, I think. Basically the same idea as jkloth but with a float.

Link to comment
Share on other sites

You could centre the text and put the > in a span with display: inline-block and float it to the right. It'll need position:relative, too, I think. Basically the same idea as jkloth but with a float.
Right, I forgot about the other text being centered. My previous suggestion won't quite work in that case. As chibineku said, give the pathlv2 div text-align: center and put the '>' in a span and float the span right. You won't need to define the display of the span though. I don't think you'll have to put the relative positioning on it either.FWIW, you should consider removing all that absolute positioning stuff. That only leads to trouble. Use margins, padding, display, float, and clear instead.
Link to comment
Share on other sites

Thanks for the help, I managed to get it working.And you said about using margins, padding and such instead of the absolute positioning and that it just leads to problems.. I just found that out as I loaded this page and a friend showed me a screen shot of how my test site looks in 7.0.6001.18000...

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...