2 different text elements in one list item

I think I am using the wrong position codes for my layout too, but the first thing I'd like to remedy is the navigation menu.

Trying to get the "li a" text to be to the top left of the link item and the "li" text to be at the bottom right...

here is the xhtml with embedded css(some Japanese text in page content, don't worry):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>æœ¨æ´¥å·å°æ¯ç§‘</title>




<style type="text/css">

body {

margin-top: 0;
background-color:#FFF;
/*text-align:center; hack for IE?*/
text-align:center;
}

div#container {
width: 700px;

background:#00FF33;

margin-top: 0;
text-align:left;

border:thin solid #666666;
}

div#header {
	background-image:url(images/toplogo.png);
	background-color:#fff;
	width:100%;
	overflow:auto;
	background-repeat: no-repeat;
	
}

h1 {
margin-top:0px;
margin-left:120px;
}

h2 {
margin-top:40px;
margin-left:120px;
}

div#content_top{
width:100%;
background-color:#3333FF;
overflow:auto;
}
div#content_bottom{
width:100%;
background-color:#FF00FF;
overflow:auto;
}

div#footer2{
background-color:#FFFFFF

}

div#topmenu{

float:right;
}

li#topmenulist {
	line-height: 49px;
	float:left;
	list-style-type:none;
	/*margin-left: -40px;*/
	margin-right:0px;
	margin-top:0px;
	padding-right:10px;
	padding-left:10px;
	background-image:url(images/topmenubk1.png);
	font-size: 10px;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #999999;		
}
li#topmenulist_selected {
	line-height: 49px;
	float:left;
	list-style-type:none;
	/*margin-left: -40px;*/
	margin-right:0px;
	margin-top:0px;
	padding-right:10px;
	padding-left:10px;
	background-image:url(images/topmenubk2.png);
	font-size: 10px;
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #999999;		
}

li#topmenulist a {
	display:block;
	text-decoration: none;
		
}

li#topmenulist_selected a {
	display:block;
	text-decoration: none;
	color:black;
		
}


li#topmenulist a:hover {
	display:block;
	text-decoration: none;
	background-image:url(images/topmenubk1.png);
	
}
div#telephone{

float:right;
}

div#leftmenu{
float:left;
width:200px;
}

div#flash{

float:right;
background-color:#fff;
}

li#leftmenulist {
	line-height: 36px;
	background: url(images/menulist.png) no-repeat;
	list-style-type:none;
	padding: 0;
	margin-left: -40px;
	padding-top:0px;	
	color:red	;
	font-size: 10px;
	
	
}

li#leftmenulist a {
	color: white;
	text-decoration: none;
	
	font-size:150%;
	margin-left: 5px;
	
}

li#leftmenulist a:hover {
	color: black;
	text-decoration: none;
	
	font-size:150%;
	margin-left: 5px;
	margin-top:-5px;
}

div#footer1{
width:100%;
height:30px;
float:right;
font-size:50%;
}
li#footer_list{
		line-height: 30px;
	float:left;
	list-style-type:none;
	/*margin-left: -40px;*/
	margin-right:10px;	
	background-color:yellow;
	font-size: 10px;
}

div#footer2{
float:left;
width:100%;
}

div#left_content{
float:left;
width:50%;
}

div#right_content{
float:right;
width:50%;
}
</style>
</head>
<body>



<div id="container">

<div id="header">
<div id="topmenu">

<ul>
<li id="topmenulist_selected"><a href="#">HOME</a></li>
<li id="topmenulist"><a href="#">ã”äºˆç´„ãƒ»ãŠå•åˆã›</a></li>
<li id="topmenulist"><a href="#">æ±‚äººæƒ…å ±</a></li>
</ul>

</div>
<img name="toplogo"  />
<h2>å¦ç ”éƒ½å¸‚ã‚¤ãƒ³ãƒ—ãƒ©ãƒ³ãƒˆã‚»ãƒ³ã‚¿ãƒ¼</h2>
<h1>æœ¨æ´¥å·å°æ¯ç§‘ãƒ»çŸ¯æ£æ¯ç§‘</h1>
<div id="telephone">
<p>ã„ãƒ¼æ¯ã“ã“ã‚ˆ</p>
<p>TEL. 0774-71-8553</p>



</div>
</div>

<div id="content_top">





<div id="leftmenu">
<ul>
<li id="leftmenulist"><a href="#">ä¸€èˆ¬æ¯ç§‘</a>general dentistry</li>
<li id="leftmenulist"><a href="#">ã‚¤ãƒ³ãƒ—ãƒ©ãƒ³ãƒˆ</a>dental implant</li>
<li id="leftmenulist"><a href="#">å¯©ç¾Žæ¯ç§‘</a>esthetic dentistry</li>
<li id="leftmenulist"><a href="#">äºˆé˜²æ¯ç§‘</a>preventative dentistry</li>
<li id="leftmenulist"><a href="#">çŸ¯æ£æ¯ç§‘</a>orthodontic dentistry</li>
<li id="leftmenulist"><a href="#">ã‚¯ãƒªãƒ‹ãƒƒã‚¯ã®ã”æ¡ˆå†…</a>information</li>
<li id="leftmenulist"><a href="#">ã”äºˆç´„ãƒ»ãŠå•åˆã›</a>online appintment</li>
<li id="leftmenulist"><a href="#">ç„¡æ–™ãƒ•ã‚©ãƒˆè¨ºæ–</a>free diagnosis</li>
<li id="leftmenulist"><a href="#">ç„¡æ–™ãƒ¡ãƒ¼ãƒ«ç›¸è«‡</a>mail consultation</li>
</ul>
</div>

<div id="flash">
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0" width="227" height="27">
    <param name="movie" value="text1.swf" />
    <param name="quality" value="high" />
    <param name="bgcolor" value="#FFFFFF" />
    <embed src="text1.swf" quality="high" pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="500px" height="27" bgcolor="#FFFFFF"></embed>
  </object>
  <p>this is under flash text</p>
</div>
</div>
<div id="content_bottom">
<div id="left_content">
left content

</div>

<div id="right_content">
right content
</div>

</div>
</p>
<div id="footer1">
<ul>
<li id="footer_list"><a href="#">ã‚µã‚¤ãƒˆãƒžãƒƒãƒ—</a></li>
<li id="footer_list"><a href="#">å€‹äººæƒ…å ±ä¿è·æ–¹é‡</a></li>
</ul>
</div>

<div id="footer2">
<p>Copyright (C) 2006 kidugawadai-shika All Rights Reserved.<p>
</div>




</body>
</html>

Code (markup):

Log in or Sign up

2 different text elements in one list item - possible?

leonthelion Guest

briansol Well-Known Member

Log in or Sign up

2 different text elements in one list item - possible?

leonthelion Guest

briansol Well-Known Member

Useful Searches