Граница из изображений - HTML и CSS

ULTIMITE · 06.06.2011, 22:44

Здравствуйте, господа форумчане, у меня возникла проблема при создание страницы. Я хочу сделать границу у дива из изображений. В роле картинок - колючая проволока (2 вида - вертикальная и горизонтальная). Я смог как-то с четырьмя дивами - по одному на сторону. Но эта техника работает только с заданными пропорциями. Если поставить 100%, то не пашет, поэтому я не знаю, как сделать так, что бы границы сами расширялись в зависимости от объема информации в диве... Подскажите, пожалуйста, как можно это провернуть! Буду очень признателен.

Виталий Желтяков · 06.06.2011, 23:07

Если нужно кроссбраузерно, то используйте таблицы.

marccella · 07.06.2011, 00:04

Выложи код.

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

Выкладывай HTML и CSS сюда, тогда можно будет конкретнее обсуждать/

ULTIMITE · 07.06.2011, 17:58

HTML

Цитата:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Документ без названия</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="bg">
<div id="container">

<div id="header">
<ul>
<li><a href="#" class="leftmenu">Главная</a></li>
<li><a href="#">Форум</a></li>
<li><a href="#">Файлы</a></li>
<li><a href="#">О нас</a></li>
</ul>
</div>
<div id="content">
<div id="top"> </div>
<div id="left"> </div>
<div id="right"> </div>
<div id="content"> </div>
<div id="clear"> </div>
<div id="bottom"> </div>
</div>

</div>
</div>
</body>
</html>

CSS

Цитата:

* {padding: 0;
margin: 0;
}
body { background: #000;
font: 12pt Verdana, Geneva, sans-serif #fff;
}
#bg { width: 100%; height: 100%; background: url(images/backgroundBg.jpg) no-repeat; margin: 0 auto; position: fixed; top: 0; left: 0; }
#container { width: 960px;
height: 1050px;
background: url(images/rjavchina.gif) repeat-y;
margin: 0 auto;
padding: 0;
border-top: url(images/step24.png) repeat-x;
}
#header { width: 960px;
height: 400px;
background: url(images/headerBG.gif) no-repeat;
}

#header ul { width: 960px;
height: 80px;
float: left;
margin: 325px 0px 0 0px;
padding: 0;
list-style-type: none;
}
#header ul li { float: left;
margin: 0 5px 0 5px;
}
#header ul li a { background: url(images/rjavchina_button.gif) no-repeat;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 22px;
width: 200px;
height: 80px;
line-height: 80px;
display: block;
text-decoration: none;
color: #ccc;
text-align: center;
}
#header ul li a:hover { background: url(images/Gran_iron.gif) no-repeat; }

.leftmenu { margin: 0 0 0 80px; }

#content { width: 960px;}
#top { position: relative;
width: 940px;
height: 20px;
top: 0;
left: 0;
padding: 0;
background: url(images/step24.gif) repeat-x;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#left {
float: left;
width: 20px;
height: 1000px;
padding: 0;
background: url(images/step24_Vert.gif) repeat-y;
margin-top: -10px;
margin-bottom: -10px;
}
#right { float: right;
height: 1000px;
width: 20px;
padding: 0;
background: url(images/step24_Vert.gif) repeat-y;
margin-top: -10px;
margin-bottom: -10px;
}
#clear { clear: both;
height: 0;
padding: 0;
margin: 0;
}
#bottom { position: relative;
bottom: 0;
left: 0;
height: 20px;
width: 940px;
padding: 0;
background: url(images/step24.gif) repeat-x;
margin-left: 10px;
margin-right: 10px;
}

#main_content { width: 920px;
height: 960px;
}

ULTIMITE · 07.06.2011, 21:28

Цитата:

Сообщение от Виталий Желтяков

Если нужно кроссбраузерно, то используйте таблицы.

Кроссбраузерность нужна в разумных пределах... На internet Explorer 9 версии, например. Старые - в топку.

marccella · 08.06.2011, 00:24

Во первых у вас два раза встречается идентификатор 'content'. Такого быть не должно (по спецификации), но многие браузеры на это чихают и в данном случае это не мешает.

Див сварачивается если не задавать определенные размеры потому что в нем ничего нет, кроме заднего фона заданного в CSS, но это не КОНТЕНТ.

Раскажу как зделать правильно. Допустим первым тегом в диве будет 'h2'. Ему и задаете задний фон проволки, которая будет наверху. При помощи
свойства 'padding' регулируете местонахождение текста находящегося в теге 'h2'... И так импровизируете с разными тегами, чтобы не захламлять раметку лишними дивами...

Как можно зделать:

Код:

#top { position: relative;
height: 20px;
width: 100%;
top: 0;
left: 0;
padding: 0;
background: url(images/step24.gif) repeat-x;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
}
#left {
float: left;
width: 20px;
height: 100%;
padding: 0;
background: url(images/step24_Vert.gif) repeat-y;
margin-top: -10px;
margin-bottom: -10px;
}
#right { float: right;
width: 20px;
height: 100%;
padding: 0;
background: url(images/step24_Vert.gif) repeat-y;
margin-top: -10px;
margin-bottom: -10px;
}
#clear { clear: both;
height: 0;
padding: 0;
margin: 0;
}
#bottom { position: relative;
bottom: 0;
left: 0;
height: 20px;
width: 100%;
padding: 0;
background: url(images/step24.gif) repeat-x;
margin-left: 10px;
margin-right: 10px;
}

При таком коде поидее, при добалении содержимого "проволки" будут выресовываться. Но при том что у вас все позиционированно разными методами, думаю что будут неприятности. Советую дивы с задним фоном позиционировать абсолютно!!!

Виталий Желтяков · 08.06.2011, 06:56

Убейте себя об стену. Границы блока испокон веков рисовались таблицами без проблем. Вас что? дивная пчела укусила?

ZvEr_HaCkEr · 08.06.2011, 07:54

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

Виталий Желтяков · 08.06.2011, 09:11

Художественный границы блоков не предназначены для украшения, поэтому никогда не стоит их использовать на сайте, за исключение тех случаев, где художественная граница нужна как элемент отображения информации. [carcazm]

Уже два дня обсуждаете то, что можно сделать таблицей за 5 минут.

marccella · 08.06.2011, 11:57

Цитата:

Сообщение от Виталий Желтяков

Убейте себя об стену. Границы блока испокон веков рисовались таблицами без проблем. Вас что? дивная пчела укусила?

Я не хотел затрагивать ваш професионализм. Но как сказал ZvEr_HaCkEr, таблицы предназначени дла табулярной информации. HTML изначально предназначена для разметки, а не для дизайна.

Не одна нормальная организация/фирма и не один нормальный инженер, никогда не будет 'рисовать границы' блока таблицами или советовать такое. То что Вы так привыкли, это еще не значит что другим надо 'убить себя об стену'.

Суть в том что Я бы лично, зделал ети 'границы' за 3 минуты(акцентирую что зделал бы быстрее вас с вашими методамии). А если в будущем мне понадобилось чеголибо там изменить, то времени ушло бы в раз 15 меньше чем у вас с вашими таблицами. Плюс меншии размер файла, чистая разметка, удобность просматривания сайта людям с ограниченным зрением, экономия времени, никого не оскорбляю, не выгляжу чертом. Видите сколько плюсов зделать ети 'проволки' при помощи CSS, господин "Профессионал"?

06.06.2011, 22:44	#1
ULTIMITE Регистрация: 06.06.2011 Сообщений: 6	Граница из изображений Здравствуйте, господа форумчане, у меня возникла проблема при создание страницы. Я хочу сделать границу у дива из изображений. В роле картинок - колючая проволока (2 вида - вертикальная и горизонтальная). Я смог как-то с четырьмя дивами - по одному на сторону. Но эта техника работает только с заданными пропорциями. Если поставить 100%, то не пашет, поэтому я не знаю, как сделать так, что бы границы сами расширялись в зависимости от объема информации в диве... Подскажите, пожалуйста, как можно это провернуть! Буду очень признателен.

08.06.2011, 00:24	#6
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	Во первых у вас два раза встречается идентификатор 'content'. Такого быть не должно (по спецификации), но многие браузеры на это чихают и в данном случае это не мешает. Див сварачивается если не задавать определенные размеры потому что в нем ничего нет, кроме заднего фона заданного в CSS, но это не КОНТЕНТ. Раскажу как зделать правильно. Допустим первым тегом в диве будет 'h2'. Ему и задаете задний фон проволки, которая будет наверху. При помощи свойства 'padding' регулируете местонахождение текста находящегося в теге 'h2'... И так импровизируете с разными тегами, чтобы не захламлять раметку лишними дивами... Как можно зделать: Код: #top { position: relative; height: 20px; width: 100%; top: 0; left: 0; padding: 0; background: url(images/step24.gif) repeat-x; margin-top: 10px; margin-left: 10px; margin-right: 10px; } #left { float: left; width: 20px; height: 100%; padding: 0; background: url(images/step24_Vert.gif) repeat-y; margin-top: -10px; margin-bottom: -10px; } #right { float: right; width: 20px; height: 100%; padding: 0; background: url(images/step24_Vert.gif) repeat-y; margin-top: -10px; margin-bottom: -10px; } #clear { clear: both; height: 0; padding: 0; margin: 0; } #bottom { position: relative; bottom: 0; left: 0; height: 20px; width: 100%; padding: 0; background: url(images/step24.gif) repeat-x; margin-left: 10px; margin-right: 10px; } При таком коде поидее, при добалении содержимого "проволки" будут выресовываться. Но при том что у вас все позиционированно разными методами, думаю что будут неприятности. Советую дивы с задним фоном позиционировать абсолютно!!! Последний раз редактировалось marccella; 08.06.2011 в 00:36.

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
вывод изображений	dimonnnn	PHP	3	14.08.2010 10:42
Сравнение изображений	AmbaQ	Общие вопросы Delphi	1	07.08.2010 19:20
С++ айти первых 10 натуральных чисел, нацело делятся на 19 и находятся в интервале, левая граница которог	loloverg	Помощь студентам	2	25.05.2010 19:42
граница проверки простого числа	fs444	Общие вопросы C/C++	4	24.03.2010 20:11
Просмотрищик изображений	Jambooo	Мультимедиа в Delphi	2	26.02.2010 01:40

06.06.2011, 23:07	#2
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Если нужно кроссбраузерно, то используйте таблицы.

07.06.2011, 00:04	#3
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	Выложи код. А так могу сказать что если картинки вставляются в дивы как задний фон, то при отсутсвии контента в диве или без указания фиксированного размера картинок не будет видно, т.к. в реале в дивах ничего нет, чтобы их развернуть и заднего фона, т.е. проволки, не видно. Выкладывай HTML и CSS сюда, тогда можно будет конкретнее обсуждать/

08.06.2011, 06:56	#7
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Убейте себя об стену. Границы блока испокон веков рисовались таблицами без проблем. Вас что? дивная пчела укусила?

08.06.2011, 07:54	#8
ZvEr_HaCkEr VisualC++/DirectX Форумчанин Регистрация: 16.07.2010 Сообщений: 831	Таблицы не предназначены для верстки, поэтому никогда не стоит их использовать на сайте, за исключение тех случаев, где таблица нужна как элемент отображения информации.

08.06.2011, 09:11	#9
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Художественный границы блоков не предназначены для украшения, поэтому никогда не стоит их использовать на сайте, за исключение тех случаев, где художественная граница нужна как элемент отображения информации. [carcazm] Уже два дня обсуждаете то, что можно сделать таблицей за 5 минут.