Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Рамка банера

Автор: prikolist 20.3.2010, 21:26

Рамка не облегает картинку, а растягивается по длине, не получается делать так, чтоб она облегала чисто картинку.
Вот исходник style.css

HTML

#baner{border-color:orange; text-align:center; border-style:ridge;
border-width:15px; }

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head><title>Банер</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<div id="baner"><img src="baner.jpg" alt="Фото "></div>
<body>
</body>
</HTML>

Вот результат фото нижу.

Автор: bars80080 20.3.2010, 22:49

Код


#baner{border-color:orange; text-align:center; border-style:ridge;
border-width:15px; float: left; }

два вопроса:
1. откуда вы берёте эту аццкую подсветку? как вы её вообще вставляете?
2. почему слой вне тэгов <body>

Автор: prikolist 20.3.2010, 23:00

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head><title>Банер</title>
<link rel="stylesheet" type="text/css" href="style1237.css">
</head>

<body>
<img id="baner" src="baner.jpg" alt="Фото ХАИ">
</body>

Файл css

Код



#baner{border-color:orange; text-align:center; border-style:ridge;
border-width:15px; text-align:center; }

Но рамка не стоит по центру, хотя у меня и прописанно в фалйе style.css ----> text-align:center;

Автор: SelenIT 20.3.2010, 23:02

Блочные элементы типа DIV всегда по умолчанию растягиваются на всю доступную ширину предка, если им не задана явная ширина, float или display:table. В данном случае, имхо, логичнее задать рамку самому эл-ту IMG (или ссылке A вокруг него, если она будет).

Цитата(bars80080 @ 20.3.2010, 22:49

)

2. почему слой вне тэгов <body>

Кстати, да (при парсинге-то оно в body попадет, но не стоит злоупотреблять искуственным интеллектом парсера;). И доктайп плохой, негодный, с ним страница будет рисоваться в режиме эмуляции глюков старых браузеров (Quirks mode). Лучше верстать под стандартный режим (напр., с доктайпом HTML5 - <!DOCTYPE html>, без излишеств).

Автор: prikolist 20.3.2010, 23:10

Картинка не віравнивается по центру именно средствами css,что делать?

Автор: SelenIT 21.3.2010, 11:41

Выравнивается, через text-align:center для контейнера.

Автор: prikolist 21.3.2010, 14:26

CSS

HTML

.center{text-align:center;}
#baner{border-color:orange; border-style:ridge; border-width:15px;

HTML

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<head><title>Банер</title></head>
<body>
<div class="center"><img id="baner" src="baner.gif" alt="Фото ХАИ"></div>
</body>
</HTML>

Не работает вообще. Только кратинка загружается и всё.

Автор: SelenIT 21.3.2010, 15:27

А где в этом коде этот CSS подключается (<link>, как было в старом)?