p.position_content {
position: absolute;
left: 500px;
top: 400px;
text-shadow: 0px 1px 0px #FFFFFF;
}
Вопросы по CSS/HTML
Не нашёл тему с вопросами по сабжу и решил создать сам.
Вот прошёл «курс» обучения по CSS/HTML от W3C школы, попытался реализовать свою идею и подручных материалов и в процессе появилс\ вопрос о позиционировании. Мануалы не помогли, возможно живой человек объяснит мне подробнее...
Делал в CSS позиционирование при помощи absolute, в принципе выровнял всё нормально, по своему рабочему монитору (1280х1024). Пришёл домой, открыл страничку на домашнем мониторе (1680х1050) а объекты не по центру, где-то больше символов и т.д. Пытался поискать в интернете, но во всех подсказках путаюсь или что-то не выходит. Так вот, можно ли как-то отцентрировать какой либо контент по центру, а не задав ему определённое местоположение? Чтобы на любом разрешении монитора контент был всегда по центру.
Вот прошёл «курс» обучения по CSS/HTML от W3C школы, попытался реализовать свою идею и подручных материалов и в процессе появилс\ вопрос о позиционировании. Мануалы не помогли, возможно живой человек объяснит мне подробнее...
Делал в CSS позиционирование при помощи absolute, в принципе выровнял всё нормально, по своему рабочему монитору (1280х1024). Пришёл домой, открыл страничку на домашнем мониторе (1680х1050) а объекты не по центру, где-то больше символов и т.д. Пытался поискать в интернете, но во всех подсказках путаюсь или что-то не выходит. Так вот, можно ли как-то отцентрировать какой либо контент по центру, а не задав ему определённое местоположение? Чтобы на любом разрешении монитора контент был всегда по центру.
Код:
Код:
p.position_content {
position: absolute;
left: 50%;
top: 50%;
width: 300px; // например
height: 400px; // опять же, например
margin-left: -150px; // width / 2
margin-top: -200px; // width / 2
}
position: absolute;
left: 50%;
top: 50%;
width: 300px; // например
height: 400px; // опять же, например
margin-left: -150px; // width / 2
margin-top: -200px; // width / 2
}
Возможно, существуют извращенные браузеры, где это не работает, но везде, где я тестировал, приведенный код прекрасно отрабатывает. Если нужно позиционировать динамически - меняйте соответствующие свойства через JS.
О! Огромное спасибо. На рабочем мониторе нормально отображается, приду домой проверю на своём мониторе. :)
Позиционировать динамически — под каждый браузер своя позиция?
Позиционировать динамически — под каждый браузер своя позиция?
2Alexander толкьо position:relative
а если нужно выравнять только горизонталь, то для блоковых елементов достаточно:
а вобще пользуйтесь гуглом. вот первая же ссылка
http://www.yanajy.com/sdelay-sam/horisontal-and-vertical-align-middle-for-div-with-css.html
а если нужно выравнять только горизонталь, то для блоковых елементов достаточно:
Код:
margin-left:auto;
margin-right:auto;
margin-right:auto;
а вобще пользуйтесь гуглом. вот первая же ссылка
http://www.yanajy.com/sdelay-sam/horisontal-and-vertical-align-middle-for-div-with-css.html
Clubberry, что вы имеете в виду? Я имел в виду следующее:
Lone Wolf, почему relative? Элемент же нужно сдвинуть элемент не относительно текущего положения, а относительно верхней левой точки экрана. Плюс только что проверил "на опыте" :) - там действительно нужен absolute.
Код:
var p = document.getElementById('your_element');
p.style.position = 'absolute';
p.style.width = '300px';
p.style.height = '400px';
p.style.left = '50%';
p.style.top = '50%';
p.style.marginLeft = '-150px';
p.style.marginTop = '-200px';
p.style.position = 'absolute';
p.style.width = '300px';
p.style.height = '400px';
p.style.left = '50%';
p.style.top = '50%';
p.style.marginLeft = '-150px';
p.style.marginTop = '-200px';
Lone Wolf, почему relative? Элемент же нужно сдвинуть элемент не относительно текущего положения, а относительно верхней левой точки экрана. Плюс только что проверил "на опыте" :) - там действительно нужен absolute.
@Lone Wolf, у меня на рабочем месте нет доступа в интернет. Только на некоторые сайты.
Зачем юзать position и т.д.?
Достаточно просто margin: auto - и будет требуемый блок выровнен по центру. Без всяких left, top и т.д.
Достаточно просто margin: auto - и будет требуемый блок выровнен по центру. Без всяких left, top и т.д.
Цитата: UAS
Зачем юзать position и т.д.?
Достаточно просто margin: auto - и будет требуемый блок выровнен по центру. Без всяких left, top и т.д.
Достаточно просто margin: auto - и будет требуемый блок выровнен по центру. Без всяких left, top и т.д.
Вертикально не будет
Цитата: Alexander92
Lone Wolf, почему relative? Элемент же нужно сдвинуть элемент не относительно текущего положения, а относительно верхней левой точки экрана. Плюс только что проверил "на опыте" :) - там действительно нужен absolute.
Ну в даном случае да. но вот в общем?
Цитата: UAS
Зачем юзать position и т.д.?
Достаточно просто margin: auto - и будет требуемый блок выровнен по центру. Без всяких left, top и т.д.
Достаточно просто margin: auto - и будет требуемый блок выровнен по центру. Без всяких left, top и т.д.
Т.е. если будет просто:
Код:
p.position_content {
margin: auto;
}
margin: auto;
}
То контент без всяких проблем отобразиться по центру?
Цитата: Clubberry
Т.е. если будет просто:
То контент без всяких проблем отобразиться по центру?
Код:
p.position_content {
margin: auto;
}
margin: auto;
}
То контент без всяких проблем отобразиться по центру?
данный p будет поцентру - горизонтально
Почему-то не срабатывает.
Помогает только вариант Alexander92, но слишком много кода, а хотелось бы поменьше мороки. :)
Код:
p.text {
margin-left: auto;
margin-right: auto;
}
margin-left: auto;
margin-right: auto;
}
Помогает только вариант Alexander92, но слишком много кода, а хотелось бы поменьше мороки. :)
Цитата: Clubberry
Почему-то не срабатывает.
Помогает только вариант Alexander92, но слишком много кода, а хотелось бы поменьше мороки. :)
Код:
p.text {
margin-left: auto;
margin-right: auto;
}
margin-left: auto;
margin-right: auto;
}
Помогает только вариант Alexander92, но слишком много кода, а хотелось бы поменьше мороки. :)
полный код... вместе с html в студию
Было бы что давать в студию))
HTML:
CSS:
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 name="author" content="mr. text"/>
<meta name="description" content="text"/>
<meta name="keywords" content="text, text, text"/>
<link rel="stylesheet" href="css/style.css"/>
<title>text</title>
</head>
<body>
<p>TEXT TEXT TEXT</p>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"/>
<head>
<meta name="author" content="mr. text"/>
<meta name="description" content="text"/>
<meta name="keywords" content="text, text, text"/>
<link rel="stylesheet" href="css/style.css"/>
<title>text</title>
</head>
<body>
<p>TEXT TEXT TEXT</p>
</body>
</html>
CSS:
Код:
p {
margin-left: auto;
margin-right: auto;
}
margin-left: auto;
margin-right: auto;
}
кстати, а как сделать точечное или прерывающееся подчёркивание? типа как азбука морзе :D
...
---
...
---
p по дефолту имеет ширину 100%. поэтому сцентрировать елмент не получится.. так-ак некуда его центрировать
Либо задай ширину, либо для центрирование текста внутри p используй text-align:center
Либо задай ширину, либо для центрирование текста внутри p используй text-align:center
Только что попробовал отцентрировать этим методом картинку. Результат нулевой.
Про центрирование текста я знаю. :) Думал можно таким способом отцентрировать.
Про центрирование текста я знаю. :) Думал можно таким способом отцентрировать.
Поставь себе на лису аддон firebug. Очь удобно будет.
использывать border-bottom.
Спасибо.
Цитата:
Только что попробовал отцентрировать этим методом картинку. Результат нулевой.
Картинке бы display:block и ширину задать.
А как сделать чтобы изображение растягивалось автоматически по ширине и высоте разрешения?
Вам здесь что, справочник что ли? КО намекает, что есть такие параметры width и height, о которых здесь уже говорилось, их и юзайте.
И скачайте справочники по css, или листайте тот же w3c
И скачайте справочники по css, или листайте тот же w3c
к чему тогда форум? чтобы задавать вопросы.
в w3c об этом не говорится, начнём с этого. ко, блин.
width и height определяется как для одного разрешения, к примеру 1680х1050, а если разрешение будет 1024х768, то часть изображения просто пропадёт за рамками монитора, а мне надо, чтобы всё изображение было видно.
в w3c об этом не говорится, начнём с этого. ко, блин.
width и height определяется как для одного разрешения, к примеру 1680х1050, а если разрешение будет 1024х768, то часть изображения просто пропадёт за рамками монитора, а мне надо, чтобы всё изображение было видно.
Форум необходим для того, чтобы задавать какие-то корректные вопросы, которые действительно сложны для понимания или поиска ошибок. У вас же вопросы из разряда "а какой параметр отвечает за это?".
Если не полениться и набрать в гугле "справочник CSS", то можно найти 100500 материалов.
Если бы Вы также не поленились полистать инет, то знали бы, что width и height можно задавать и в пикселях, и в процентах. Проценты и используйте.
Если не полениться и набрать в гугле "справочник CSS", то можно найти 100500 материалов.
Если бы Вы также не поленились полистать инет, то знали бы, что width и height можно задавать и в пикселях, и в процентах. Проценты и используйте.
Хех, я удивляюсь, очень сильно удивляюсь. Ведь можно было сразу сказать об этом и не начить срачь. Спасибо, помогло.