Topic: Centering Vertical Text shouldn't be this difficult...CSS (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26622" title="Pages that link to Topic: Centering Vertical Text shouldn&#039;t be this difficult...CSS (Page 1 of 1)" rel="nofollow" >Topic: Centering Vertical Text shouldn't be this difficult...CSS <span class="small">(Page 1 of 1)</span>\$

Maskkkk Paranoid (IV) Inmate From: Willaimsport, PA, US of A the hole i Insane since: Mar 2002	posted 09-11-2005 14:26 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 & Services</a> <li><a href="#" class="unselected" onclick="initMenu(2,0)">Products & 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	posted 09-11-2005 19:53 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 & 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	posted 09-11-2005 23:29 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	posted 09-12-2005 00:11 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	posted 09-12-2005 00:45 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	posted 09-12-2005 01:08 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	posted 09-12-2005 18:08 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	posted 09-12-2005 18:17 Hey thanks you two! The menu works well now! I'll have to let you know how it turns out. - AIM: MASKKKK 01001101011000010111001101101011011010110110101101101011

Topic: Centering Vertical Text shouldn't be this difficult...CSS (Page 1 of 1) $Pages that link to <a href="https://ozoneasylum.com/backlink?for=26622" title="Pages that link to Topic: Centering Vertical Text shouldn&#039;t be this difficult...CSS (Page 1 of 1)" rel="nofollow" >Topic: Centering Vertical Text shouldn't be this difficult...CSS <span class="small">(Page 1 of 1)</span>\$

Maskkkk
Paranoid (IV) Inmate

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

posted 09-11-2005 14:26

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

posted 09-11-2005 19:53

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

posted 09-11-2005 23:29

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

posted 09-12-2005 00:11

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

posted 09-12-2005 00:45

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

posted 09-12-2005 01:08

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

posted 09-12-2005 18:08

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

posted 09-12-2005 18:17

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:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Loading...
Options:	Show Signature Enable Slimies Enable Linkwords

Topic: Centering Vertical Text shouldn't be this difficult...CSS (Page 1 of 1)

Insert Slimies »

Insert UBB Code »