Topic: Centering Vertical Text shouldn't be this difficult...CSS Pages that link to <a href="https://ozoneasylum.com/backlink?for=26622" title="Pages that link to Topic: Centering Vertical Text shouldn&amp;#039;t be this difficult...CSS" rel="nofollow" >Topic: Centering Vertical Text shouldn&#039;t be this difficult...CSS\
 
Author Thread
Maskkkk
Paranoid (IV) Inmate

From: Willaimsport, PA, US of A the hole i
Insane since: Mar 2002

 IP logged posted posted 09-11-2005 14:26 Edit Quote



Okay Above I have on the right what I want it to turn out as...

In the middle what it looks like in IE
And on the left what it looks like in Firefox/Moz

Now my question is why can't I do what is on the right using CSS so that it works in
both browsers?

For some reason it doesn't seem to work...

HTML:

code:
<ul id="sideNav">
   <li><a href="#" class="unselected" onclick="initMenu(2,0)">Products &amp; Services</a>
	<li><a href="#" class="unselected" onclick="initMenu(2,0)">Products &amp; Services</a>
		<ul>
			<li><a href="#" class="subMenu selected" onclick="initMenu(2,0)"><div class="linkName">Engineering</div><div class="linkArrow">&187;</div></a></li>
			<li><a href="#" class="subMenu" onclick="initMenu(2,1)"><div class="linkName">Business Management</div></a></li>
			<li><a href="#" class="subMenu" onclick="initMenu(2,2)"><div class="linkName">Worldclass Software</div></a></li>
			<li><a href="#" class="subMenu" onclick="initMenu(2,3)"><div class="linkName">Networking</div></a></li>
		</ul>
	</li>
   </li>
</ul>



CSS:

code:
#sideNav, #sideNav ul 
	{ 
		padding: 0;
		margin: 0;
		list-style: none;
		float : left;
		width : 150px;	
		
	}
	
	#sideNav li
	{ 
		position : relative;
		float : left;
		line-height : 1.25em;
		width: 150px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		background-color: orange;
		background-image: url('./images/SideMenuDots.gif');
		background-repeat: no-repeat;
		background-position: bottom;
		margin: 2px;

	}
	
	#sideNav li h5
	{ 
		font-size: 12pt;
		font-weight: 800;
		color: #000000;
		background-color: white;
		text-align: left;
	}
	
	#sideNav li a
	{
		width: 150px;
		display : block;
		color : black;
		font-size: 10pt;
		text-decoration : none;
		padding: 0px;
		text-align: left;
	}
	
	#sideNav li a.selected
	{
		/*color: #0066CC;*/
	}
	#sideNav div.linkArrow
	{
		display: inline;
		vertical-align: middle;
		color: #CC3300;
		background-color: red;
		
		height: 40px;
		text-align: right;
	}

	#sideNav div.linkName
	{
		display: block;
		vertical-align: middle;
		background-color: green;
		margin-left: 5px;
	}



Thanks a million again,



- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 09-11-2005 19:53 Edit Quote
code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title></title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <style type="text/css">
body {
    margin: 0;
    padding: 8px;
}
#nav, 
#nav 
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#nav {
    font: bold small arial, sans-serif;
    border-bottom: 2px dotted #dcdcdc;
}
#nav 
li {
    display: inline;    
}
#nav 
a {
    text-decoration: none;
    color: black;
    line-height: 3em;
    display: block;
}
#nav 
ul 
a {
    border-top: 2px dotted #dcdcdc;
}
        </style>
    </head>
    <body>
        <ul id="nav">
            <li>
                <big>
                    <a href="#products/"
                            >Products &amp; Services</a>
                </big>
                <ul>
                    <li>
                        <a href="#engineering/"
                                >Engineering</a>
                    </li>
                    <li>
                        <a href="#business/"
                                >Business Management</a>
                    </li>
                    <li>
                        <a href="#worldclass/"
                                >Worldclass Software</a>
                    </li>
                    <li>
                        <a href="#networking/"
                                >Networking</a>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
</html>



(Edited by reisio on 09-11-2005 19:54)
Maskkkk
Paranoid (IV) Inmate

From: Willaimsport, PA, US of A the hole i
Insane since: Mar 2002

 IP logged posted posted 09-11-2005 23:29 Edit Quote

reisio, thank you for the help, but you seem to have left out the part that I am having a problem with.

I'd like the selected item (» to be right aligned and the text for the side menus to be left aligned. But I don't want to use tables, I only want to use ul and li...I'm not really sure if it's possible but I'd like to find out.

Thanks again...



- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 09-12-2005 00:11 Edit Quote
quote:

Maskkkk said:

but you seem to have left out the part that I am having a problem with.

I'd like the selected item (» to be right aligned and the text for the side menus to be left aligned.



I don't see anything in your text or your examples that mentions left/right alignment....

Anyway, to align left/right, all you need is -

text-align:left;

text-align:right;

example: http://www.in-dented.com/temp/mask.html
Maskkkk
Paranoid (IV) Inmate

From: Willaimsport, PA, US of A the hole i
Insane since: Mar 2002

 IP logged posted posted 09-12-2005 00:45 Edit Quote

Sorry DL, I wasn't clear,

The text of the menu needs to be aligned left, and the '»' needs to be right aligned.
reisio
Paranoid (IV) Inmate

From: Florida
Insane since: Mar 2005

 IP logged posted posted 09-12-2005 01:08 Edit Quote

text-align: right; or float: right; or position: absolute; right: 0; - pick one
DL-44
Maniac (V) Inmate

From: under the bed
Insane since: Feb 2000

 IP logged posted posted 09-12-2005 18:08 Edit Quote

updated: http://www.in-dented.com/temp/mask.html

(this is, of course, simply reisio's code with the 'selected' bit added.)
Maskkkk
Paranoid (IV) Inmate

From: Willaimsport, PA, US of A the hole i
Insane since: Mar 2002

 IP logged posted posted 09-12-2005 18:17 Edit Quote

Hey thanks you two!

The menu works well now!

I'll have to let you know how it turns out.



- AIM: MASKKKK

01001101011000010111001101101011011010110110101101101011


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu