Позиционирование по центру - HTML и CSS

segail · 22.12.2013, 11:47

Здравствуйте.
Пытаюсь позиционировать рисунок-ссылку по центру, он исчезает.
HTML

Код HTML:

<div id="ps">
<a href="#"></a>
</div>

CSS

Код HTML:

#ps a{
width: 570px;
height: 570px;
position: relative;
margin: 100px auto;
background: url('ps.png');
}

Как установить рисунок ссылку по центру?

Smitt&Wesson · 22.12.2013, 12:18

Девочка, ну, что Вы себе удумали! Я, в CSS, не абы-какой спец. Но тут ошибку и так видно

Цитата:

Вы по этой ссылке перейти пытались?

segail · 22.12.2013, 12:27

Цитата:

Сообщение от Smitt&Wesson

Девочка, ну, что Вы себе удумали! Я, в CSS, не абы-какой спец. Но тут ошибку и так видно Вы по этой ссылке перейти пытались?

Так причем тут ссылка мамочка, ссылку потом вставлю. Картинка вообще не отображается.

_PROGRAMM_ · 22.12.2013, 21:05

Цитата:

position: relative;

Код:

position:absolute;

----

Цитата:

margin: 100px auto;

заменить на

Код:

left:50%;
margin-left:-285px;

-----

Код:

#ps a{

Что за бред? Меняем

Цитата:

#ps{

Golova1234 · 23.12.2013, 10:52

Во первых, где у вас содержиться этот код в html странице или в файле css, это не маловажный фактор, если он все же содержиться в css файле то путь и файлу изображения должен выглядеть примерно так b a c k g r o u n d : u r l ( '../images/ p s . p n g ' ) , но чтобы сказать точнее, мне нужно знать все же путь к вашему изображению.

Naive · 23.12.2013, 13:24

пустой строковый элемент ес-но исчезнет, ибо не имеет размеров, сделай его блочным

segail · 23.12.2013, 17:37

Цитата:

Сообщение от Golova1234

Во первых, где у вас содержиться этот код в html странице или в файле css, это не маловажный фактор, если он все же содержиться в css файле то путь и файлу изображения должен выглядеть примерно так b a c k g r o u n d : u r l ( '../images/ p s . p n g ' ) , но чтобы сказать точнее, мне нужно знать все же путь к вашему изображению.

Разные файлы html, css, ps, лежат в одной директории.
Короче не знаю... Сделал более проще, но грубее.
По предложенному коду от _PROGRAMM_ ссылка (a href="#") становится не активной. То есть если убрать тэг а с индификатора #ps то ссылка не активна.

Вот так на данный момент выглядит код.

Код 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" xml:lang="en" lang="en">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>

<body>

<div id="ps">
<a href="#"><img src="ps.png" width="570" height="570" border="0"/></a>
</div>	

</body>
</html>

_______________________________________________

body {
    background: #000000;
}


#ps {
width: 570px;
height: 570px;
position: relative;
margin: 100px auto;
}

Правильно ли нет, но в различных браузерах позиционирование корректное и ссылка активна. А с выводом картинки в сss при моем варианте пропадает картинка а при варианте от _PROGRAMM_ ссылка не активна... Где-то примерно так...

_PROGRAMM_ · 23.12.2013, 18:51

Цитата:

ссылка (a href="#") становится не активной

что это значит? Нажать на нее нельзя?
Попробуйте сделать как я сказал, но не трогайте #ps a

segail · 23.12.2013, 19:18

Цитата:

что это значит? Нажать на нее нельзя?

Да не активно нажатие

Цитата:

Попробуйте сделать как я сказал, но не трогайте #ps a

То есть оставить тег а?

Если индификатор прописан таким образом #ps a{
То Ваш код работает корректно.
Но Вы же пишите что это бред...
Короче так, тогда все нормалек.

Код HTML:

#ps a{
width: 570px;
height: 570px;
position: absolute;
left :50%;
margin-left: -285px;
top: 100px;
background: url('ps.png');
}

_PROGRAMM_ · 23.12.2013, 20:01

Я не понял просто, что вы хотели.

Цитата:

Короче так, тогда все нормалек.

Вот и отлично. Теперь, пока работает, не трогайте

22.12.2013, 11:47	#1
segail Форумчанин Регистрация: 13.06.2009 Сообщений: 691	Позиционирование по центру Здравствуйте. Пытаюсь позиционировать рисунок-ссылку по центру, он исчезает. HTML Код HTML: <div id="ps"> <a href="#"></a> </div> CSS Код HTML: #ps a{ width: 570px; height: 570px; position: relative; margin: 100px auto; background: url('ps.png'); } Как установить рисунок ссылку по центру? Последний раз редактировалось segail; 22.12.2013 в 12:36.

23.12.2013, 13:24	#6
Naive Раздолбайских Дел Старожил Регистрация: 22.05.2009 Сообщений: 3,828	пустой строковый элемент ес-но исчезнет, ибо не имеет размеров, сделай его блочным Alar, верни репу!

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Позиционирование символа по центру	Grimnir69	Помощь студентам	1	09.12.2012 17:14
Позиционирование логотипа по центру	nuon	HTML и CSS	3	02.05.2012 12:34
позиционирование	Kvakin	HTML и CSS	0	30.04.2012 17:32
Позиционирование блока по центру с динамическими элементами и их гибкостью *сложно	AlienNation	JavaScript, Ajax	0	22.10.2011 03:55
Позиционирование	Syltan	HTML и CSS	0	25.03.2010 19:15

23.12.2013, 10:52	#5
Golova1234 Регистрация: 12.11.2011 Сообщений: 6	Во первых, где у вас содержиться этот код в html странице или в файле css, это не маловажный фактор, если он все же содержиться в css файле то путь и файлу изображения должен выглядеть примерно так b a c k g r o u n d : u r l ( '../images/ p s . p n g ' ) , но чтобы сказать точнее, мне нужно знать все же путь к вашему изображению.