Позиционное изображение рядом с вертикальной навигационной панелью

Это мой код, что я хочу сделать, так это то, что я должен размещать изображения рядом с вертикальной навигационной панелью, не нарушая порядок списка. Я пробовал много раз, но я не был успешным, вот мой код HTML-PARTПозиционное изображение рядом с вертикальной навигационной панелью

<ul class="navbar"> 
<li><a href="#">» Computers</a> 
</li> 

<li><a href="#">» Storage Media</a></li> 
<li><a href="#" >» Networking Solutions</a></li> 
<li><a href="#/">» Security Solutions</a></li> 
<li><a href="#">» Office Automations</a></li> 
<li><a href="#">» Gadgets</a></li> 
<li><a href="#">» Projectors and Display  Screens</a></li> 
<li><a href="#">» Softwares</a></li> 
<li class="lastitem"><a href="#">» Customized Solutions</a></li>  
</ul>

CSS ЧАСТЬ (описывает поведение списка только)

.navbar{ 
list-style-type: none; 
margin: 0; 
padding: 10 0px; 
width: 280px; /* width of menu */ 
position:absolute; 
} 

.navbar li{ 
border-bottom: 1px solid white; /* white border beneath each menu item */ 
} 

.navbar li a{ 
background: #333 url(media/sexypanelright.gif) no-repeat right top; /*color of menu by default*/ 
font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana; 
display: block; 
color: white; 
width: auto; 
padding: 5px 0; /* Vertical (top/bottom) padding for each menu link */ 
text-indent: 8px; 
text-decoration: none; 
border-bottom: 1px solid black; 
} 

.navbar li a:visited, .navbar li a:active{ 
color: white; 
} 

.navbar li a:hover{ 
background-color: black; /*color of menu onMouseover*/ 
color: white; 
border-bottom: 1px solid black; 
} 
.navbar ul li:hover{ 
background-color: black; 
color: #ff0066; 
display:block; 
width:200px; 
height:200px; 
opacity:0.75; 
} 
.navbar ul li:hover{  
    padding:5px; 
    margin:0px; 
    background-color:#666666; 
    border-width:1px; 
    border-style:solid; 
    border-color:#333333; 
}

источник

2013-07-09 Chaitanya

'sexypanelright.gif': Я предполагаю, что это не рестайлинг Википедия: D –

[Вот скрипка] (http://jsfiddle.net/Qd2jQ/) для демонстрации вашего решения. Вы можете обновить его с помощью 'sexypanelright.gif' –

.navbar li { 
    border-bottom: 1px solid white; 
    margin-left: 40%; 
} 

.navbar { 
    list-style-type: none; 
    margin: 0px; 
    width: 100%; 
    position: absolute; 
}

источник

2013-07-09 11:56:58

Вот http://jsfiddle.net/nQyAH/1/ –

Он будет вынужден использовать абсолютно позиционированное изображение, конечно, не лучший способ сделать это. – Dom

Тейк выведите position: absolute и добавьте display: block; float:left в .navbar.

И добавьте изображение с float: left;.

Fiddle

источник

2013-07-09 12:01:32

Ваше первое предложение было лучше, все, что вам нужно было сделать, это поместить элемент изображения над списком в HTML, et voila! – Dom

Но, как я понял, Чайтанья хотел «разместить изображения рядом с вертикальной навигационной панелью». –

Первоначально я думал, что OP может хотеть ** одно изображение ** слева от навигации, но я начинаю подозревать, что им нужны значки рядом с каждым элементом списка. – Dom

Позиционное изображение рядом с вертикальной навигационной панелью

ответ

Смежные вопросы