------------------------------------------------------
| Логотип или что-то ещё |
| |
------------------------------------------------------
------------------------------------------------------
| Меню 1 |
------------------------------------------------------
------------------------------------------------------
| | |
| Меню 2 | |
| | |
| | |
------------------------------------------------------
Как сделать так, чтобы меню не прыгало?
Допустим есть сайт...
Выглядит он примерно так:
При изменении вертикальных размеров Меню 1 при переходе по ссылкам Меню 2 всё время прыгает!
Как бы его зафиксировать, чтоб не прыгало?
Это не помогает:
Так фиксируется и не прыгает, но почему-то текст начинает залазить под Меню 2:
Что делать???
Выглядит он примерно так:
Код:
При изменении вертикальных размеров Меню 1 при переходе по ссылкам Меню 2 всё время прыгает!
Как бы его зафиксировать, чтоб не прыгало?
Это не помогает:
Код:
<div style="position:relative; top:50; left:0;">....</div>
Так фиксируется и не прыгает, но почему-то текст начинает залазить под Меню 2:
Код:
<div style="position:absolute; top:50; left:0;">....</div>
Что делать???
Код:
<div style="position:absolute; top:50; left:0; z-index: 1000;">....</div>
Что-то я забыл про этот z-index!
Спасибо! Попробую! Если что-то не получится, то напишу...
Спасибо! Попробую! Если что-то не получится, то напишу...
Код:
------------------------------------------------------
| Логотип или что-то ещё |
| |
------------------------------------------------------
------------------------------------------------------
| Меню 1 |
------------------------------------------------------
------------------------------------------------------
| | |
| Меню 2 | |
| | Текст |
| | |
------------------------------------------------------
| Меню 3 |
------------------------------------------------------
| Логотип или что-то ещё |
| |
------------------------------------------------------
------------------------------------------------------
| Меню 1 |
------------------------------------------------------
------------------------------------------------------
| | |
| Меню 2 | |
| | Текст |
| | |
------------------------------------------------------
| Меню 3 |
------------------------------------------------------
При такой структуре иногда если "Текста" мало, то "Меню 3" подлазиет под "Меню 2"!
Можно ли как-то вычислить координату top "Меню 3" и если она меньше определённого значения, то опускать его вниз?
UAS
Так не совсем работает:
Так не совсем работает:
Цитата:
<div style="position:absolute; top:50; left:0; z-index: 1000;">....</div>
Если бы всё было на слоях, то это нормально, а если не всё, то absolute слой начинает становиться как бы сам по себе и выпадает из таблицы, а так как он z-index: 1000, то начинает перекрывать всё, что под него начинает подлазить!
Приходится всё решать за счёт <td width=xxx heigth=xxx>, а если width and height переменные, то эта задачка становится нетривиальной!
Meatcoins, приведите пример с кодом или лучше покажите HTML шаблон. А то это гадание на кофейной гуще.
PS Модераторы, перенесите тему в раздел "Верстка HTML"
PS Модераторы, перенесите тему в раздел "Верстка HTML"
Первая библиотека:
Вторая библиотека просто закрывает все теги.
Вот localmenu2.txt:
Вот localmenu.txt:
Код:
............
<div>
<!--LocalMenu-->
<?php
$my_name=basename($__FILE__);
$ini_file=dirname($__FILE__).'/config.ini';
$ini_string='';
if(file_exists($ini_file))
{
$ini_string=file_get_contents($ini_file);
$ini_string=preg_replace('#(^.*)('.$my_name.'.{.*?})(.*$)#is','$2',$ini_string);
preg_match('#(^.*)('.$my_name.'.{.*?})(.*$)#is',$ini_string,$my_pockets);
@$ini_string=$my_pockets[0];
$ini_string=preg_match('#(^.*?)({lm1\s)(.*?)(})#is',$ini_string,$my_pockets);
@$ini_string=$my_pockets[3];
}
if($ini_string==''){$ini_string="localmenu.txt";}
$filename=dirname($__FILE__);
$filename=$filename."/".$ini_string;
$handle=fopen($filename,"r");
if($handle!=null){
$st = fread($handle, filesize($filename));
fclose($handle);
}
$filename=basename($__FILE__);
$dirname=dirname($__FILE__);
$st=preg_replace('{(<a href="Firm.*?'.$filename.')(.*?)(<[\/\\\\]a>)}is','$1" style="FONT-WEIGHT: bold; background-color : #FFE4A6;$2$3',$st);
$st=preg_replace('{(<a href=.*?>)(.*?)(</a>)}is','$1<strong>$2</strong>$3',$st);
$bool=preg_match('{(#)}is',$st);
if ($bool==0){$st=str_replace($what,$to,$st);}
else{$st=preg_replace('{('.$what.')(?!#)}is',$to,$st);}
echo $st;
?>
<!--LocalMenu-->
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<?php
$wi=0;
$he=0;
$my_name=basename($__FILE__);
$ini_file=dirname($__FILE__).'/config.ini';
$ini_string='';
if(file_exists($ini_file))
{
$ini_string=file_get_contents($ini_file);
$ini_string=preg_replace('#(^.*)('.$my_name.'.{.*?})(.*$)#is','$2',$ini_string);
preg_match('#(^.*)('.$my_name.'.{.*?})(.*$)#is',$ini_string,$my_pockets);
#print_r ($my_pockets);
@$ini_string=$my_pockets[0];
#$ini_string=preg_replace('#(^.*?)({lm1\s)(.*?)(})#is','$3',$ini_string);
$ini_string=preg_match('#(^.*?)({lm2\s)(.*?)(})#is',$ini_string,$my_pockets);
#print_r($my_pockets);
@$ini_string=$my_pockets[3];
}
if($ini_string==''){$ini_string="localmenu2.txt"; $wi=200; $he=450;}
$filename=$filename2."/".$ini_string;
$handle=fopen($filename,"r");
if($handle!=null){
$st = fread($handle, filesize($filename));
fclose($handle);
}
$filename=dirname($__FILE__);
preg_match('{(?<=Firm[\/\\\\])(\w+)}is',$filename,$pockets);
@$ge=$pockets[1];
if ($ge!=''){
$st=preg_replace('{(<a class="localmenu2" href="Firm[\/\\\\]'.$ge.')(.*?)(<[\/\\\\]td>)}is','<div style="TEXT-ALIGN: center; FONT-WEIGHT: bold; background-color : #FFE4A6;">$1$2</div>$3',$st);
}
$st=preg_replace('{(<a class="localmenu2" href=.*?>)(.*?)(</a>)}is','$1<h4>$2</h4>$3',$st);
$st=str_replace($what,$to,$st);
#echo " ";
$td='<td valign=top width='.$wi.' height='.$he.'>
<!--LocalMenu2-->'."\r\n";
#$td='<td valign=top>
# <!--LocalMenu2-->'."\r\n";
echo $td;
echo $st;
?>
<!--LocalMenu2-->
</td>
............
<div>
<!--LocalMenu-->
<?php
$my_name=basename($__FILE__);
$ini_file=dirname($__FILE__).'/config.ini';
$ini_string='';
if(file_exists($ini_file))
{
$ini_string=file_get_contents($ini_file);
$ini_string=preg_replace('#(^.*)('.$my_name.'.{.*?})(.*$)#is','$2',$ini_string);
preg_match('#(^.*)('.$my_name.'.{.*?})(.*$)#is',$ini_string,$my_pockets);
@$ini_string=$my_pockets[0];
$ini_string=preg_match('#(^.*?)({lm1\s)(.*?)(})#is',$ini_string,$my_pockets);
@$ini_string=$my_pockets[3];
}
if($ini_string==''){$ini_string="localmenu.txt";}
$filename=dirname($__FILE__);
$filename=$filename."/".$ini_string;
$handle=fopen($filename,"r");
if($handle!=null){
$st = fread($handle, filesize($filename));
fclose($handle);
}
$filename=basename($__FILE__);
$dirname=dirname($__FILE__);
$st=preg_replace('{(<a href="Firm.*?'.$filename.')(.*?)(<[\/\\\\]a>)}is','$1" style="FONT-WEIGHT: bold; background-color : #FFE4A6;$2$3',$st);
$st=preg_replace('{(<a href=.*?>)(.*?)(</a>)}is','$1<strong>$2</strong>$3',$st);
$bool=preg_match('{(#)}is',$st);
if ($bool==0){$st=str_replace($what,$to,$st);}
else{$st=preg_replace('{('.$what.')(?!#)}is',$to,$st);}
echo $st;
?>
<!--LocalMenu-->
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<?php
$wi=0;
$he=0;
$my_name=basename($__FILE__);
$ini_file=dirname($__FILE__).'/config.ini';
$ini_string='';
if(file_exists($ini_file))
{
$ini_string=file_get_contents($ini_file);
$ini_string=preg_replace('#(^.*)('.$my_name.'.{.*?})(.*$)#is','$2',$ini_string);
preg_match('#(^.*)('.$my_name.'.{.*?})(.*$)#is',$ini_string,$my_pockets);
#print_r ($my_pockets);
@$ini_string=$my_pockets[0];
#$ini_string=preg_replace('#(^.*?)({lm1\s)(.*?)(})#is','$3',$ini_string);
$ini_string=preg_match('#(^.*?)({lm2\s)(.*?)(})#is',$ini_string,$my_pockets);
#print_r($my_pockets);
@$ini_string=$my_pockets[3];
}
if($ini_string==''){$ini_string="localmenu2.txt"; $wi=200; $he=450;}
$filename=$filename2."/".$ini_string;
$handle=fopen($filename,"r");
if($handle!=null){
$st = fread($handle, filesize($filename));
fclose($handle);
}
$filename=dirname($__FILE__);
preg_match('{(?<=Firm[\/\\\\])(\w+)}is',$filename,$pockets);
@$ge=$pockets[1];
if ($ge!=''){
$st=preg_replace('{(<a class="localmenu2" href="Firm[\/\\\\]'.$ge.')(.*?)(<[\/\\\\]td>)}is','<div style="TEXT-ALIGN: center; FONT-WEIGHT: bold; background-color : #FFE4A6;">$1$2</div>$3',$st);
}
$st=preg_replace('{(<a class="localmenu2" href=.*?>)(.*?)(</a>)}is','$1<h4>$2</h4>$3',$st);
$st=str_replace($what,$to,$st);
#echo " ";
$td='<td valign=top width='.$wi.' height='.$he.'>
<!--LocalMenu2-->'."\r\n";
#$td='<td valign=top>
# <!--LocalMenu2-->'."\r\n";
echo $td;
echo $st;
?>
<!--LocalMenu2-->
</td>
............
Вторая библиотека просто закрывает все теги.
Вот localmenu2.txt:
Код:
<div style="position:absolute; top:250; left:11; z-index: 1000;">
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>Какие-то пункты</td>
</tr>
</table>
</div>
<table border="0" cellspacing="0" cellpadding="0" >
<tr>
<td>Какие-то пункты</td>
</tr>
</table>
</div>
Вот localmenu.txt:
Код:
<table class="menu2" border="0" width="800" cellspacing="0" cellpadding="0">
<tr>
<td>Всякие пункты меню</td>
<td>Всякие пункты меню</td>
<td>Всякие пункты меню</td>
</tr>
</table>
<tr>
<td>Всякие пункты меню</td>
<td>Всякие пункты меню</td>
<td>Всякие пункты меню</td>
</tr>
</table>
Код:
<html>
<head>
<!--Defines-->
<title>...</title>
</head>
<body>
<table width=800>
<tr>
<td><center><div style="position:relative;"><img src="../..."></div></center></td></tr>
<tr>
<!--MAINMenu-->
<td class="menu1c" width="800" valign="middle" >
</td> <!--MAINMenu-->
</tr>
<tr>
<td>
<div>
<!--LocalMenu-->
<table class="menu2" border="0" width="800" cellspacing="0" cellpadding="0">
<tr>
<td class="menu21" ></td>
</tr>
</table> <!--LocalMenu-->
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td valign=top width=200 height=450>
<!--LocalMenu2-->
<div style="position:absolute; top:250; left:11; z-index: 1000;">
<table class="menu3c" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="dist3" ></td>
</tr>
</table>
</div> <!--LocalMenu2-->
</td>
<td valign="middle" align="center">
<table>
<tr>
<td width="600" valign="top" align="center">
Тут содержание!!!
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=end height="15">
............
</td>
</tr>
</table>
</body>
</html>
<head>
<!--Defines-->
<title>...</title>
</head>
<body>
<table width=800>
<tr>
<td><center><div style="position:relative;"><img src="../..."></div></center></td></tr>
<tr>
<!--MAINMenu-->
<td class="menu1c" width="800" valign="middle" >
</td> <!--MAINMenu-->
</tr>
<tr>
<td>
<div>
<!--LocalMenu-->
<table class="menu2" border="0" width="800" cellspacing="0" cellpadding="0">
<tr>
<td class="menu21" ></td>
</tr>
</table> <!--LocalMenu-->
</div>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td valign=top width=200 height=450>
<!--LocalMenu2-->
<div style="position:absolute; top:250; left:11; z-index: 1000;">
<table class="menu3c" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td class="dist3" ></td>
</tr>
</table>
</div> <!--LocalMenu2-->
</td>
<td valign="middle" align="center">
<table>
<tr>
<td width="600" valign="top" align="center">
Тут содержание!!!
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class=end height="15">
............
</td>
</tr>
</table>
</body>
</html>
Цитата: Meatcoins
Так фиксируется и не прыгает, но почему-то текст начинает залазить под Меню 2:
Код:
<div style="position:absolute; top:50; left:0;">....</div>
Что делать???
Если с этим кодом вы пропишите для блока с текстом еще и margin-left:200px; то налазить не будет (отступ слева поставьте тот, который нужен).
PS Покажите сам результирующий HTML (т.е. в меню браузера: Вид -> Исходный код). А то все равно, мало что понятно.
Хотя это и не важно...
Проще оказалось переместить прыгающее Меню, чем возякаться со слоями!
Проще оказалось переместить прыгающее Меню, чем возякаться со слоями!