Jump to content
  • 0

Помогите с сочитанием горизонтальных и вертикальных списков (ul li)

SHUstriK

Asked by SHUstriK,

 Share

Question

SHUstriK Explorer

SHUstriK

Posted
Posted

Есть сайт http://www.microsoft.com/web/platform/default.aspx

Пытаюсь перерисовать его дизайн.

Основное горизонтальное (чёрное) меню удалось, по нажатию на кнопку сделал popup меню, в котором должен быть выбор элементов - так же сделал через ul и li.

Но этот выбор никак не хочет вставать вертикально! Копирую часть кода с этим списком в отдельный htm, там он вертикально. С помощью fireBug'а сравниваю css свойства в обоих файлах у этих ul и li - одинаковы (display: block !important).

При этом смотрю свойства li горизонтального меню - там display: list-item, а не inline.

Помогите поднять второстепенный список вертикально.

Так же не понимаю как microsoft положил список горизонтально не используя display: inline

index.htm

<html>
  <head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
  </head>
  <body>
	<div id="container">
	  <div id="container-inner">
		<div id="header">
		  <img class="brand" alt="TIMS 2.0" src="logo.png"/>
		  <div class="search-main">
		<div class="search-box">
			  <input type="image" src="search-btn.jpg" title="Поиск" />
		  <input type="text"/>
		</div>
		  </div>
		</div>
		<div id="nav">
		  <div id="navigation">
<!--  Эти ХХХ div'ов для того, чтобы нарисовать скругление меню справа и слева  -->
		<div id="PrimaryNavLeft">
		  <div id="PrimaryNavRight">
		<div id="pri" class="PrimaryNav">
		  <ul id="idMenu" class="Menu">
			<li>
			  <a onclick="document.getElementById('menu_city_popup').style.visibility='visible'; return false;" href="/">
			<span class="Menu-left"> </span>
			Города
			<span class="Menu-right"> </span>
			  </a>
			  <div id="menu_city_popup" class="popup" style="overflow: auto; position: absolute; visibility: hidden; left: -4px; width: 120px; height: 205px; cursor: default; top: 38px;">
			<ul>
			  <li><input type="checkbox"/>1</li>
			  <li><input type="checkbox"/>2</li>
			  <li><input type="checkbox"/>3</li>
			  <li><input type="checkbox"/>4</li>
			  <li><input type="checkbox"/>5</li>
			</ul>
			  </div>			  
			</li>
			<li>
			  <a onclick="document.getElementById('menu_city_popup').style.visibility='visible'; return false;" href="/">
			<span class="Menu-left"> </span>
			Тест
			<span class="Menu-right"> </span>
			  </a>
			</li>
		  </ul>
		</div>
		  </div>
		</div>
		<div id="secondary_nav">
		</div>
	  </div>
		</div>
		<div id="content">
		</div>
	  </div>
	</div>
  </body>
</html>

style.css

/****************************
 CSS RESET
Данный код позволяет привести
вид "по умолчанию" к единому
пригодному нам виду
****************************/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

h1,h2,h3,h4,h5 {
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
}

h1 sup,
h2 sup,
h3 sup,
h4 sup
{
	vertical-align: text-top;
	font-size: 0.65em;
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Updated */
}
/********** Конец **************/


/***************************
 Layout
***************************/
html {
	background: #e6e6e6 url('bkg-html.jpg') repeat-x;
	height: 100%;
	width: 100%;
}

body {
	background: transparent url('bkg-blue.png') no-repeat right top;
	height: 100%;
	width: 100%;
	font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
	color: #4b4b4b;
	font-size: 0.71em; /* Follows MSCOM Typography Guidelines */
}

#container {
	width: 969px;
	margin: 0px auto 0px auto;
	background: transparent url('bkg-shadow.png') no-repeat center 53px;
}

#container-inner {
	width: 945px;
	margin: 0px auto 0px auto;
}

#content {
	border-left: 1px #e5e5e5 solid;
	border-right: 1px #e5e5e5 solid;
	background-color: #FFFFFF;
	margin: 0px auto 0px auto;
	width: 943px;
}

#header {
	height: 75px;
	position: relative;
}

#header .brand {
	position: absolute;
	top: 30px;
	left: 0px;
}

.search-main 
{
	position: absolute;
	top: 13px;
	right: 0px;
	width: 700px;
}

.search-main .search-box 
{
	margin: 11px 0px 0px 0px;
}

.search-main .search-box input[type="text"] 
{
	width:250px;
	margin: 0px;
	float: right;
	padding: 2px;
}

.search-main .search-box input[type="image"] 
{
	float: right;
	border-width: 0px;
}
/********** Конец **************/

/***************************
 Navigation
***************************/

#nav {
	height: 73px;
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
}

.PrimaryNav
{
	position: relative;
	height: 38px;
	background: black url(menu-middle.jpg) left top repeat-x;
}

.PrimaryNav,
.PrimaryNav ul
{
	width: 937px;
}

.PrimaryNav ul li
{
	background: transparent url(menu-divider.jpg) right top no-repeat;
}

.PrimaryNav ul li a,
.PrimaryNav ul li span
{
	padding: 10px 6px 5px 6px;
	margin: 3px 10px 2px 10px;
	position: relative;
	display: block;
	height: 18px;
	white-space: nowrap;
	font-size: 12px;
	color: White;
}

.PrimaryNav ul li a:hover
{
	background: url(menu-selected-middle.jpg) left top repeat-x;
}

.PrimaryNav ul li a span,
.PrimaryNav ul li a:hover span,
.PrimaryNav ul li span span
{
	text-decoration: none !important;
}

.PrimaryNav ul li a span.Menu-left,
.PrimaryNav ul li a span.Menu-right,
.PrimaryNav ul li span span.Menu-left,
.PrimaryNav ul li span span.Menu-right
{
	position: absolute;
	top: 0;
	width: 4px;
	font-size: 1px;
	padding: 0;
	margin: 0;
}

.PrimaryNav ul li a span.Menu-left,
.PrimaryNav ul li span span.Menu-left,
.PrimaryNav ul li a span.Menu-right,
.PrimaryNav ul li span span.Menu-right
{
	height: 33px;
}

.PrimaryNav ul li a span.Menu-left,
.PrimaryNav ul li span span.Menu-left
{
	left: -4px;
}

.PrimaryNav ul.MenuSelected li a span.Menu-right,
.PrimaryNav ul.MenuSelected li span span.Menu-right
{
	background: url(menu-selected-right.jpg) left top no-repeat;
}

.PrimaryNav ul li a span.Menu-right,
.PrimaryNav ul li span span.Menu-right
{
	right: -4px;
}

.PrimaryNav ul.MenuSelected li a span.Menu-left,
.PrimaryNav ul.MenuSelected li span span.Menu-left
{
	background: url(menu-selected-left.jpg) left top no-repeat;
}

.PrimaryNav ul li a,
.PrimaryNav ul li span
{
	padding: 10px 6px 5px 6px;
	margin: 3px 10px 2px 10px;
}


#PrimaryNavLeft
{
	position: relative;
	padding-left: 4px;
	background: black url(menu-left.jpg) left top no-repeat;
	z-index: 1000;
	font-family: Segoe UI, Verdana, Tahoma, Helvetica, Arial, sans-serif; /* Follows MSCOM Typography Guidelines */
}
#PrimaryNavRight
{
	position: relative;
	padding-right: 4px;
	background: black url(menu-right.jpg) right top no-repeat;
}


ul.Menu 
{
	position: relative;
}

ul.Menu, 
ul.Menu ul
{
	margin: 0;
	padding: 0;
	display: block;

}

ul.Menu li
{
	position: relative;
	list-style: none;
	float: left;
	color: White;
}
ul.Menu li a,
ul.Menu li span
{
	display: block;
	text-decoration: none;
}
ul.Menu.MenuSelected
{

}

div.popup
{
	background-color:#FFFFFF;
	border:1px solid #B8B8B8;
	overflow:auto;
	z-index:1;
}

div.popup ul
{
	width: 120px;
	display: block !important;
}
div.popup li
{
	display: block !important;
}

div.popup ul li
{
	list-style: none;
	color: Black;
	background: none;
	white-space: no wrap;
	position: static;
}

/********** Конец **************/

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0
AKyHuH Explorer

AKyHuH

Posted
Posted

честно говоря, такое чувство что микрософт пользуется пэйджмейкером для создания страничек, т.к. коды у них какие-то нереальные...

ИМХО, не советую в эти дебри лезть, т.к. намного проще самому сделать выпадающее меню...

Link to comment
Share on other sites
  • 0
AKyHuH Explorer

AKyHuH

Posted
Posted

честно говоря поковыряв 5 минут так и не допер в чем там косяк, но решение нашел...

выглядит оно вот так:

div.popup li
{
	display: block !important;
	clear: both;
}

поковыряв ещё 2 минуты пришел к выводу, что косяк вот тут:

ul.Menu li
{
	position: relative;
	list-style: none;
	float: left;
	color: White;
}

а именно в float: left которое применяется ко всем li внутри ul.Menu, а ваш выпадающий список также получается попадает по это правило и никакой display: block тут не поможет, ибо блоки замечательно следуют правилам обтекания в том числе и float: left;

Link to comment
Share on other sites
  • 0
SHUstriK Explorer

SHUstriK

Posted
  • Author
Posted

Всем большое спасибо за помощь, завтра обязательно попробую Ваши варианты.

К слову, если проблема во float:left, какой float поставить на li во внутреннем списке, чтобы было вертикально?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept