Моё меню Общее меню Пользователи Правила форума Все прочитано
Вернуться   uForum.uz > ИКТ и телеком > IT-индустрия > Софт > Программирование > Веб программирование
Знаете ли Вы, что ...
...инструкция по установке аватара описана в Правилах форума.
<< Предыдущий совет - Случайный совет - Следующий совет >>

Веб программирование Вопросы WEB программирования (Java Script и т.д.)


Ответить

 
Опции темы Опции просмотра
Старый 27.04.2010 11:14   #11  
Real ID Group
Аватар для Maxim Kopytov
Оффлайн
PM
AKA:Maximus
Сообщений: 1,481
+ 806  740/408
– 10  12/10

UzbekistanОтправить сообщение для Maxim Kopytov с помощью ICQОтправить сообщение для Maxim Kopytov с помощью Skype™
Решение при помощи expression



Решение при помощи expression

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Vertical align MIDDLE</title>

<style type="text/css">
body {font: 11px Arial, Helvetica, sans-serif;}
ul, li { list-style: none outside none;}
ul {padding: 0;}
li {float: left; background-color:#FFCC99; margin: 0 10px 0 0; width:130px; height: 46px; border:1px solid; overflow:hidden;}


a {
display: block;
cursor: pointer;

}

.box {
display: table-cell;
vertical-align: middle;
height: 46px;
background-color: #FF9900;

}
p{
margin-top:expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
background-color:#FFFFCC;
text-align: center;
margin: 0 auto;
width: 110px;
}

.left {padding-left: 10px;}
.right {padding-right: 10px;}

</style>

</head>
<body>
<ul>
<li>
<div class="left">
<div class="right">
<a href="#">
<div class="box">
<p>Main page</p>
</div>
</a>
</div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Products</p>
</div>
</a></div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Interesting article about Mr. Brown</p>
</div>
</a></div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Hallo! How are You?</p>
</div>
</a></div>
</div>
</li>
<li>
<div class="left">
<div class="right"><a href="#">
<div class="box">
<p>Feedback</p>
</div>
</a></div>
</div>
</li>
</ul>
</body>
</html>
[/HTML].left, .right - нужны мне для дополнительного оформления.

PS. Думаю код можно будет еще упростить.
__________________
Internet, Hosting, Colocation

Последний раз редактировалось Maxim Kopytov; 27.04.2010 в 11:28.
Ответить 
Старый 27.04.2010 13:42   #12  
Real ID Group
Аватар для Aziz Madetov
Оффлайн
Сообщений: 1,504
+ 3,004  1,175/528
– 55  21/17

Uzbekistan
Код точно работает во всех браузерах?
Ответить 
Старый 27.04.2010 15:07   #13  
Known ID Group uParty Member
Аватар для Dolphin
Оффлайн
Imperium of Man
Inquisitor
Сообщений: 5,990
+ 5,680  4,442/2,033
– 128  137/102

Russian FederationОтправить сообщение для Dolphin с помощью ICQОтправить сообщение для Dolphin с помощью Skype™Facebook
Цитата:
Сообщение от Maxim Kopytov Посмотреть сообщение
Internet Explorer 6,7 об этом не знает.
Так от IE6 же все вроде отказались уже. Делайте таблицами.
Ответить 
Старый 27.04.2010 16:47   #14  
Real ID Group
Аватар для Maxim Kopytov
Оффлайн
PM
AKA:Maximus
Сообщений: 1,481
+ 806  740/408
– 10  12/10

UzbekistanОтправить сообщение для Maxim Kopytov с помощью ICQОтправить сообщение для Maxim Kopytov с помощью Skype™
Цитата:
Сообщение от Dolphin Посмотреть сообщение
Цитата:
Сообщение от Maxim Kopytov Посмотреть сообщение
Internet Explorer 6,7 об этом не знает.
Так от IE6 же все вроде отказались уже. Делайте таблицами.
Вот какой настырный. Ну не 6-ка, так 7-ка не понимает table-cell.

Код вроде бы работает во всех актуальных браузерах. Позже протестирую и уточню.
Opera, Mozilla, Chrome - понимают table-cell и middle.
А expression для IE (будь он неладен)
__________________
Internet, Hosting, Colocation
Ответить 
Реклама и уведомления
Старый 27.04.2010 22:38   #15  
Real ID Group
Аватар для Maxim Kopytov
Оффлайн
PM
AKA:Maximus
Сообщений: 1,481
+ 806  740/408
– 10  12/10

UzbekistanОтправить сообщение для Maxim Kopytov с помощью ICQОтправить сообщение для Maxim Kopytov с помощью Skype™
Цитата:
Сообщение от Maxim Kopytov Посмотреть сообщение
Цитата:
Сообщение от Dolphin Посмотреть сообщение
Цитата:
Сообщение от Maxim Kopytov Посмотреть сообщение
Internet Explorer 6,7 об этом не знает.
Так от IE6 же все вроде отказались уже. Делайте таблицами.
Вот какой настырный. Ну не 6-ка, так 7-ка не понимает table-cell.

Код вроде бы работает во всех актуальных браузерах. Позже протестирую и уточню.
Opera, Mozilla, Chrome - понимают table-cell и middle.
А expression для IE (будь он неладен)
Проверил. Код работает IE5.5, IE6, IE7
Mozilla FF 3.5.2, естественно Safari, Opera.
Всю историю браузеров не проверял конечно Но и этого уже думаю достаточно.
Короче меня устраивает это решение.
__________________
Internet, Hosting, Colocation
Ответить 
Старый 17.05.2010 12:46   #16  
Real ID Group
Аватар для Maxim Kopytov
Оффлайн
PM
AKA:Maximus
Сообщений: 1,481
+ 806  740/408
– 10  12/10

UzbekistanОтправить сообщение для Maxim Kopytov с помощью ICQОтправить сообщение для Maxim Kopytov с помощью Skype™


[HTML]

<!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>Dinamic height</title>
</head>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
#box {
background-color:#FFFFCC;
padding:10px;
border:1px solid #FFCC99;
display: table-cell;
vertical-align: middle;
}
#left_block {
background-color:#00CCFF;
float:left;
width: 70%;
}
#right_block {
background-color:#FF9999;
float:right;
width: 30%;
height: auto;
}
</style>
<body>
<div id="box">
<div id="left_block">
<h1>left_block</h1>
<p>The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</p>
<p>This license, the Lesser General Public License, applies to some specially designated software packages--typically libraries--of the Free Software Foundation and other authors who decide to use it. You can use it too, but we suggest you first think carefully about whether this license or the ordinary General Public License is the better strategy to use in any particular case, based on the explanations below.</p>
<p>When we speak of free software, we are referring to freedom of use, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish); that you receive source code or can get it if you want it; that you can change the software and use pieces of it in new free programs; and that you are informed that you can do these things. </p>
</div>
<div id="right_block">
<h1>right_block</h1>
<p>The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</p>
</div>
</div>
<strong>Задача:</strong> Выровнять красный правый блок относительно голубого левого, вертикально по центру
</body>
</html>

[/HTML]
__________________
Internet, Hosting, Colocation
Ответить 
Старый 18.05.2010 09:59   #17  
Real ID Group
Аватар для Maxim Kopytov
Оффлайн
PM
AKA:Maximus
Сообщений: 1,481
+ 806  740/408
– 10  12/10

UzbekistanОтправить сообщение для Maxim Kopytov с помощью ICQОтправить сообщение для Maxim Kopytov с помощью Skype™
Сложность блочной верстки вынуждает воспользоваться стандартными таблицами.

Блочная верстка получилась такой:
[HTML]
<!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>Dinamic height</title>
</head>
<style type="text/css">
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
h1 {
margin:0;
padding:0;
font-size: 12px;
}
#box {
background-color:#FFFFCC;
padding: 10px;
border:1px solid #FFCC99;
}
#left_block {
width: 70%;
display: table-cell;
vertical-align: middle;
}
#right_block {
width: 30%;
display: table-cell;
vertical-align: middle;
}
#left_block #center {
background-color:#00CCFF;
height:100%;
}
#right_block #center {
background-color:#FF9999;
height:100%;
}
.clear {
clear: both;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">

#box { display: block; height: 100%; padding-top: -10px;}


#left_block, #right_block { overflow: hidden; margin-top:expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}

#left_block {
background-color:#00CCFF;
width: 70%;
float:left;
}

#right_block {
background-color:#FF9999;
width: 30%;
float:right;
}

</style>
<![endif]-->
<body>
<div id="box">
<div id="left_block">
<div id="center">
<h1>left_block</h1>
The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</br>
This license, the Lesser General Public License, applies to some specially designated software packages--typically libraries--of the Free Software Foundation and other authors who decide to use it. You can use it too, but we suggest you first think carefully about whether this license or the ordinary General Public License is the better strategy to use in any particular case, based on the explanations below.</br>
When we speak of free software, we are referring to freedom of use, not price. Our General Public Licenses are designed to make sure that you have the freedom to distribute copies of free software (and charge for this service if you wish); that you receive source code or can get it if you want it; that you can change the software and use pieces of it in new free programs; and that you are informed that you can do these things. </br>
</div>
</div>
<div id="right_block">
<div id="center">
<h1>right_block</h1>
The licenses for most software are designed to take away your freedom to share and change it. By contrast, the GNU General Public Licenses are intended to guarantee your freedom to share and change free software--to make sure the software is free for all its users.</br>
</div>
</div>
</div>
</body>
</html>
[/HTML]

условные комментарии + expression
__________________
Internet, Hosting, Colocation

Последний раз редактировалось Maxim Kopytov; 18.05.2010 в 10:02.
Ответить 
Ответить

Метки
html css middle
Опции темы
Опции просмотра




Powered by vBulletin® Version 3.8.5
Copyright ©2000 - 2024, Jelsoft Enterprises Ltd. Перевод: zCarot
Advertisement System V2.5 By Branden
OOO «Единый интегратор UZINFOCOM»


Новые 24 часа Кто на форуме Новички Поиск Кабинет Все прочитано Вверх