Перейти к публикации

Рекомендованные сообщения

RED, если честно я не понимаю зачем дивами заменять таблицу ,которая используется не в качестве верстки а как именно таблица??

Отказывайтесь от этой мысли.

Для верстки - пожалуйста, а лепить таблицу дивами просто вообще не нужно

Ссылка на сообщение
Поделиться на других сайтах

Да кстати любители чистых DIV'ов.

Реализуйте на практике следующую задачку:

требуется расположить на экране прямоугольник размерами 300х200 так, чтобы он был ровно по центру при любом разрешении монитора.

Итак, вперёд! :)

Ссылка на сообщение
Поделиться на других сайтах

Да кстати любители чистых DIV'ов.

Реализуйте на практике следующую задачку:

требуется расположить на экране прямоугольник размерами 300х200 так, чтобы он был ровно по центру при любом разрешении монитора.

Итак, вперёд! :)

Делается без проблем, гугль в помощь.

Ссылка на сообщение
Поделиться на других сайтах

max-money, стоп стоп стоп - я так и думал, что в гугль пошлёте.

Дело в том, чтобы я хочу вас проверить, а именно реализовать такую простенькую задачку ;)

Прямо здесь

Ссылка на сообщение
Поделиться на других сайтах

Дело в том, чтобы я хочу вас проверить, а именно реализовать такую простенькую задачку ;)

Прямо здесь

Я вам своих услуг не предлагал и не предлагаю :) , и поэтому проверять меня думаю просто незачем.

Если интересно посмотреть безтабличную верстку сайта на ДЛЕ - Энергетика UA.

Я раньше тоже любил использовать таблицы, потом вкусы немного поменялись.

Ссылка на сообщение
Поделиться на других сайтах

max-money, к сожалению вынужден считать что Вы тест не прошли...

Здесь я не нанимаю на работу, просто хочется произвести обмен опытом.

Задачка то пустяковая :)

А сайт отличный, да и CSS не вышло за рамки 12Кб, молодец =)

Ссылка на сообщение
Поделиться на других сайтах

скажите плизз что этот код означет

TABLE {

BORDER-RIGHT: #c0c0c0 0px solid; BORDER-TOP: #c0c0c0 1px solid; BACKGROUND: #f4f4f4; MARGIN: 0px; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 0px solid

}

TABLE TD {

BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 95%; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BORDER-BOTTOM: #c0c0c0 1px solid

}

TABLE TH {

BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 95%; BACKGROUND: #e8e8e8; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BORDER-BOTTOM: #c0c0c0 1px solid

}

TABLE P {

FONT-SIZE: 100%; MARGIN: 1px

Ссылка на сообщение
Поделиться на других сайтах

скажите плизз что этот код означет

TABLE {

BORDER-RIGHT: #c0c0c0 0px solid; BORDER-TOP: #c0c0c0 1px solid; BACKGROUND: #f4f4f4; MARGIN: 0px; BORDER-LEFT: #c0c0c0 1px solid; BORDER-BOTTOM: #c0c0c0 0px solid

}

TABLE TD {

BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 95%; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BORDER-BOTTOM: #c0c0c0 1px solid

}

TABLE TH {

BORDER-TOP-WIDTH: 0px; BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 1px; PADDING-LEFT: 1px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 95%; BACKGROUND: #e8e8e8; PADDING-BOTTOM: 1px; PADDING-TOP: 1px; BORDER-BOTTOM: #c0c0c0 1px solid

}

TABLE P {

FONT-SIZE: 100%; MARGIN: 1px

Означает задание стилей для таблицы.

Ссылка на сообщение
Поделиться на других сайтах

Foxriver, ой может вы мою задачку решите?

требуется средствами CSS без использования таблиц расположить на экране прямоугольник размерами 300х200 так, чтобы он был ровно по центру при любом разрешении монитора.
Ссылка на сообщение
Поделиться на других сайтах

<div style="position:absolute;left:50%;top:50%;width:300px;height:200px;border:1px solid #999999;">блок<div>

Лучше поставить 40% так блок будет более центрованно выглядеть

Ссылка на сообщение
Поделиться на других сайтах

Проверяем!

Мозилла не отцентровала, IE тоже самое.

И всё это при разрешении 1280х1024

Давайте ещё варианты =)

Изменено пользователем lifestar
Ссылка на сообщение
Поделиться на других сайтах

Ребят подскажите на собственном опыте как мне в стандартном скине дле,отступить там например 10px где что ковырять подскажите надо очень

Ссылка на сообщение
Поделиться на других сайтах

Проверяем!

Мозилла не отцентровала, IE тоже самое.

И всё это при разрешении 1280х1024

Давайте ещё варианты =)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<div style="position: absolute;  overflow: auto;  width: 300px;  height: 200px;  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -100px;  background: #f00;  border: solid 1px black;  padding: 10px;"><p> </p></div>

Ссылка на сообщение
Поделиться на других сайтах

max-money, ай молодец!! :)

Прошёл тест.

А теперь впишем в этот квадрат ровно по центру другой квадрат, размерами 150х100, ну и белого цвета...

Но так чтобы он не был слоем поверх остальных, а был именно внутри контейнера первого квадрата

Сумеете?

;)

Изменено пользователем lifestar
Ссылка на сообщение
Поделиться на других сайтах

Ну, логично вытекает

<div style="position: absolute;  overflow: auto;  width: 300px;  height: 200px;  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -100px;  background: #f00;  border: solid 1px black;  padding: 10px;"><div style="position:absolute; overflow:auto; width:150px; height:100px; left:50%; top:50%; margin-left: -75px; margin-top: -50px; background:#ffffff; border: solid 1px black;"><p> </p></div></div>

Ссылка на сообщение
Поделиться на других сайтах

Torquemada, нет нет, у вас получилось 2 слоя, и маленький квадрат лежит сверху большого, а надо чтобы был внутри =)

Визуально одно и тоже, а на практике нет.

Но вы оба молодцы =)

Я раньше такое только с таблицей делал, когда ещё заморачивался с динамичной высотой, зависящей от разрешения экрана

Ссылка на сообщение
Поделиться на других сайтах

Ну, можно вот так:

<div style="position: absolute;  overflow: auto;  width: 300px;  height: 200px;  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -100px;  background: #f00;  border: solid 1px black;  padding: 10px;"><div style="position:relative; overflow:auto; width:150px; height:100px; left:75px; top:50px; background:#ffffff; border: solid 1px black;"><p> </p></div></div>

Это по идее - внутри. Но тогда уже надо считать цифири)

Изменено пользователем Torquemada
Ссылка на сообщение
Поделиться на других сайтах

Неа, нужно position: relative; иначе будет перекрывать


<div style="position: absolute;  overflow: auto;  width: 300px;  height: 200px;  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -100px;  background: #f00;  border: solid 1px black;" adding: 0px;>

<div style="position: relative; width: 150px;  height: 100px;  left: 50%;  top: 50%;  margin-left: -75px;  margin-top: -50px;  border: solid 1px #000;   background: #fff;"> </div>

</div>


<div style="position: absolute;  overflow: auto;  width: 300px;  height: 200px;  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -100px;  background: #f00;  border: solid 1px black;" adding: 0px;>

<div>Не перекрывает, а сдвигает</div>

<div style="position: relative; width: 150px;  height: 100px;  left: 50%;  top: 50%;  margin-left: -75px;  margin-top: -50px;  border: solid 1px #000;   background: #fff;"> </div>

</div>

Ссылка на сообщение
Поделиться на других сайтах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

а что это за текст?Если это программа какая то то скиньте объясните для чего она.

Ссылка на сообщение
Поделиться на других сайтах

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

а что это за текст?Если это программа какая то то скиньте объясните для чего она.

Это указание стандарта, в соответствии с которым написан код. Без него возможно некоректное отображение в различных браузерах. При сложной верстке сильно упрощает жизнь.

Почитать можно сдесь:

http://www.i2r.ru/static/479/out_13654.shtml

Изменено пользователем max-money
Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...