• Locked
1 reply [Last post]
Sun, 2012-01-15 09:34
varoluscu_prens
varoluscu_prens's picture
User offline. Last seen 16 weeks 3 days ago. Offline
newbie
Timezone: GMT+2
Joined: 2012-01-13
Posts: 7
Points: 14

Hi There;

I am a bit new to HTML / CSS programming. There are some
I tried to create a button layout.(called leftMenu) I would like to list buttons at the left side of the page and one button correspond exactly one line. I mean :

---------------------------
- A button have long word -
---------------------------
---------------------------
- button1 -
---------------------------
- button2 -
---------------------------
---------------------------
- button3 -
---------------------------

But in my code, it looks like that:

---------------------------
- A button have long word -
---------------------------
---------------------------
- button1button2 -
---------------------------
- button3 -
---------------------------

And when mouse dragged on the button, background's color has changed. I would like to set width of backround change fixed for all buttons. How can I do?

Here are the relevant sections:

HTML:

<ul id="leftMenu">
 <li><a href="#"><span>A button have long word</span></a></li>
  <ul>
   <li><a href="#"><span> sub-button that have long word 1 </span></a></li>
   <li><a href="#"><span> sub-button2 </span></a></li>
   <li><a href="#"><span> sub-button3 </span></a></li>				
  </ul>
 <li><a href="#"><span> button2 </span></a></li>
 <li><a href="#"><span> button3 </span></a>	</li>
  <ul>
   <li><a href="#"><span> Another sub-buton1 </span></a></li>
   <li><a href="#"><span> sub-buton2 </span></a></li>
   <li><a href="#"><span> sub-buton3 </span></a></li>		
  </ul>
 <li><a href="#">Spor Faaliyetleri</a></li>
 <li><a href="#">Kütüphane</a></li>
 <li><a href="#">TSK EL ELE Vakfı</a></li>
 <li><a href="#">Malül Gazilere Tanınan Haklar</a></li>
</ul>

CSS: 

#leftMenu {
	width:230px; 
	height:200px; 
	position: absolute;
	background: #2f8be8; 
    vertical-align: middle;
	horizontal-align:left;
}
 
#leftMenu > li > a 
{     
	color: #fff;    
	font-weight: bold; 
	font-size:15px;
}
 #leftMenu > li:hover > a
{
    background: #f09d28;
	color: #000; 
	width: auto;
}
#leftMenu ul {     
	background: #f09d28; 
} 
#leftMenu ul li a 
{    
	color: #000; 
}
#leftMenu ul li:hover a
{ 
    background: #ffc97c;
} 
 
#leftMenu, #leftMenu ul 
{
      list-style: none;
}
#leftMenu 
{     
	float: right; 
} 
#leftMenu > li 
{     
	float: left; 
}
#leftMenu li a 
{
	display: block; 
    height: 1.5em;
	line-height: 1.5em;
	padding: 1.5 em;
	text-decoration: none;
	vertical-align:top;
}
#leftMenu ul
{   
	position: absolute;
	display: none;
	z-index: 999;
}
#leftMenu ul li a 
{
	width: 180px;
}
#leftMenu li:hover ul
{
     display: block; 
}

Thank you very much.

Top
Tags:
Tue, 2012-02-21 09:26
#1
balajidesign
balajidesign's picture
User offline. Last seen 7 weeks 2 days ago. Offline
rank Enthusiast
Enthusiast
Timezone: GMT+5.5
Joined: 2012-01-31
Posts: 116
Points: 124

you make it some more

you make it some more unwanted css and html codes. i changed in proper way.

css:

#leftMenu {
	width:230px; 
	height:200px; 
	position: absolute;
	background: #2f8be8; 
    vertical-align: middle;
	horizontal-align:left;
}
 
#leftMenu li a 
{     
	color: #fff;    
	font-weight: bold; 
	font-size:15px;
	display:inline;
}
 #leftMenu  li:hover  a
{
    background: #f09d28;
	color: #000; 
	width: auto;
}
#leftMenu ul {     
	background: #f09d28; 
	display:block;
} 
 
#leftMenu ul li a:hover
{ 
    background: #ffc97c;
} 
 
#leftMenu, #leftMenu ul 
{
      list-style: none;
}
#leftMenu li:hover ul
{
     display: block; 
}

html :

<ul id="leftMenu">
 <li><a href="#"><span>A button have long word</span></a>
  <ul>
   <li><a href="#"><span> sub-button that have long word 1 </span></a></li>
   <li><a href="#"><span> sub-button2 </span></a></li>
   <li><a href="#"><span> sub-button3 </span></a></li>				
  </ul></li>
 <li><a href="#"><span> button2 </span></a></li>
 <li><a href="#"><span> button3 </span></a>	
  <ul>
   <li><a href="#"><span> Another sub-buton1 </span></a></li>
   <li><a href="#"><span> sub-buton2 </span></a></li>
   <li><a href="#"><span> sub-buton3 </span></a></li>		
  </ul></li>
 <li><a href="#">Spor Faaliyetleri</a></li>
 <li><a href="#">Kütüphane</a></li>
 <li><a href="#">TSK EL ELE Vakfı</a></li>
 <li><a href="#">Malül Gazilere Tanınan Haklar</a></li>
</ul>

Top
  • Locked