Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
PHP Puzzles. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL на примерах. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель MySQL 5. Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: при малом размере окна правый элемент перескакивает вниз
 
 автор: yaolegyest   (25.10.2009 в 19:23)   письмо автору
 
 

Здравствуйте. Такая проблема: справа от таблицы рисунок (у таблицы float:left; у рисунка position:relative;). при уменьшении размера окна (например просто растягиваю панель избранное) рисунок перескакивает под таблицу. Указал ширину таблицы в процентах (80% ) - помогло лишь отчасти - позже перескакивает. Уменьшать еще ширину таблицы нелогично - есть полоса прокрутки и справа куча места – рисунок должен уходить вправо, а не перескакивать вниз - для этого и существует полоса прокрутки. Подскажите пожалуйста правильное решение.

  Ответить  
 
 автор: neokortex   (25.10.2009 в 19:25)   письмо автору
 
   для: yaolegyest   (25.10.2009 в 19:23)
 

советую выложить файл (прикрепить) и указать какой браузер используете

  Ответить  
 
 автор: yaolegyest   (25.10.2009 в 20:20)   письмо автору
1.7 Кб
 
   для: neokortex   (25.10.2009 в 19:25)
 

Чтобы не нагромождать ненужного вырезал из файла необходимое:
<html>
<head>
<link rel="stylesheet" href='123.css' type='text/css'>
</head>
<body>
<table class='tb3'>
<tr ><td class='tb2' width=100> имя</td><td class='tb2' >очень длинный текст обьявления</td></tr>
</table>
<div id='ris_comp'><img src="15.gif"></div>
</body>
</html>
Где 123.css:
.tb3
{
width:88%;
border:solid 1pt black;
padding:0px;
border-collapse:collapse;
float:left;
}

.tb2
{

text-align:center;
border:solid 1pt black;
padding:0px;
border-collapse:collapse;

}
#ris_comp
{

position:relative;
top:40;
left:25;
}
Браузер IE7. При уменьшении размера окна рисунок 15.gif перескакивает под таблицу. По-моему то же будет и в других браузерах, потому что когда я увеличиваю ширину таблицы до 90% в neone происходит то же самое. 15.gif прикрепил, как прикрепить несколько файлов не знаю (кстати тоже подскажите- каждый следующий файл заменяет предыдущий, с нажатым ctrl тоже не получается, может здесь можно только один файл прикрепить?)

  Ответить  
 
 автор: yaolegyest   (26.10.2009 в 17:02)   письмо автору
 
   для: neokortex   (25.10.2009 в 19:25)
 

css только начал изучать, почему-то думал, что это несложный вопрос (в смысле вопрос как сделать, чтобы правый элемент не перескакивал вниз при уменьшении размера окна).

  Ответить  
 
 автор: AlexSol   (26.10.2009 в 17:05)   письмо автору
 
   для: yaolegyest   (26.10.2009 в 17:02)
 

посмотрите парамерт min-width применительно к body

  Ответить  
 
 автор: yaolegyest   (27.10.2009 в 00:15)   письмо автору
 
   для: AlexSol   (26.10.2009 в 17:05)
 

Не помогает min-width.Попробовал просто вставить рисунок - полоску на всю ширину окна, которая как и положено при уменьшении размера окна уходит за правый край экрана и с помощью полосы прокрутки ее можно всю просмотреть, а вот рисунок который справа от таблицы никак не хочет уходить за правый край, соскакивает вниз под таблицу. Попробовал взять таблицу с рисунком в<div clas='wid_th'> ,а в css прописал:
.wid_th
{
width:900px;
}
но это тоже не дало никакого эффекта.Подозреваю, причина где-то зарыта в том, что к таблице прописано float:left; , но для меня полная загадка почему рисунок так категорически не хочет уходить вправо за край окна хотя-бы на несколько пикселей

  Ответить  
 
 автор: AlexSol   (27.10.2009 в 09:49)   письмо автору
 
   для: yaolegyest   (27.10.2009 в 00:15)
 

правильно параметры подобрать нужно.

а с float ничего удивительного. float задает обтекание элемента, и когда места не хватает происходит смещение

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title></title>
</head>

<body>
<style>
body{
    min-width:900px;
}
.tb3
{
width:75%;
border:solid 1pt black;
padding:0px;
border-collapse:collapse;
float:left;
}

.tb2
{

text-align:center;
border:solid 1pt black;
padding:0px;
border-collapse:collapse;

}
#ris_comp
{

position:relative;
top:40;
left:25;
}



</style>

<table class='tb3'>
<tr ><td class='tb2' width=100> имя</td><td class='tb2' >очень длинный текст обьявления</td></tr>
</table>
<div id='ris_comp'><img src="15.gif" width="200"></div>
</body>
</html>

  Ответить  
 
 автор: yaolegyest   (29.10.2009 в 19:06)   письмо автору
 
   для: AlexSol   (27.10.2009 в 09:49)
 

Сделал такое наблюдение - если из вышеуказанного скрипта убрать <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">(а в моем скрипте такой записи не было), то рисунок перескакивает, т.е. дело не в правильно подобраных параметрах.Когда я вставляю эту строчку в свой скрипт, он работает как положено(правый элемент не перескакивает, я даже пробовал ее сокращать, оказывается правильно будет работать даже если оставить только <!DOCTYPE>(хотя это какой-то абсурд).
Выходит без этой записи min-width:900px; не воспринимается браузером(почему, ведь в остальном css работает нормально?).Интересно, каким типом документа браузер считает мой скрипт без этой записи.

  Ответить  
 
 автор: serjinio   (30.10.2009 в 11:42)   письмо автору
 
   для: yaolegyest   (29.10.2009 в 19:06)
 

вставьте картинку в ячейку этой таблицы и не будет перескакивать
второй вариант обернуть картинку в див и этот див и таблицу обернуть еще дивом и использовать отрицательные поля

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования