CSS дизайн

[lifestar 18]

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

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

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

[RED 1]

Понял, спасибо. Уже отказался.

[lifestar 18]

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

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

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

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

[max-money 0]

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

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

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

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

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

[lifestar 18]

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

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

Прямо здесь

[max-money 0]

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

Прямо здесь

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

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

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

[lifestar 18]

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

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

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

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

[RED 1]

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

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

[FeaR 0]

Ребят а можите помоч найти css дизайн или пример таблицы

[Foxriver 0]

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

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

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

[lifestar 18]

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

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

[Vano 0]

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

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

[lifestar 18]

Проверяем!

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

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

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

Изменено 15 августа 2007 пользователем lifestar

[FeaR 0]

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

[Tong 0]

FeaR,

style.css

все зависит от того что именно будет отступать.

[max-money 0]

Проверяем!

Мозилла не отцентровала, 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>

[lifestar 18]

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

Прошёл тест.

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

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

Сумеете?

Изменено 15 августа 2007 пользователем lifestar

[Torquemada 0]

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

<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>

[lifestar 18]

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

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

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

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

[Torquemada 0]

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

<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>

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

Изменено 15 августа 2007 пользователем Torquemada

[max-money 0]

Неа, нужно 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>

[Vano 0]

а поидеии существует z-index:0; и z-index:1;

[Torquemada 0]

Vano,

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

[FeaR 0]

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

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

[max-money 0]

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

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

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

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

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

Изменено 16 августа 2007 пользователем max-money