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

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

Ну и сколько блоков Вы использовали? 9? Это вместо 1 таблицы. Ну, и где тут удобство?

marccella · 08.06.2011, 14:09

Данный CSS код слишком захламлен, с этим я согласен.

ULTIMITE · 08.06.2011, 21:45

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

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

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

ULTIMITE · 08.06.2011, 22:37

marccella, я попробовал сделать так, как вы написали. Но увы, далеко дело не пошло. Наверное, я что-то попутал. Вот код:

HTML

Цитата:

<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">
<H2> Форум сталкеров </H2>
<div id="left"> </div>
<div id="main_content"> dgfadjga <br /> dsjagkdsjfds <br /> dfasdgasdgf</div>
<div id="right"> </div>
<div id="clear"> </div>
<H3> www.stalker-gang.ru <br /><br /></H3>
</div>

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

CSS

Цитата:

* {padding: 0;
margin: 0;
color: #ffffff;
}
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: absolute;
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;
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, #right {
float: left;
width: 20px;
height: 100%;
padding: 10px;
background: url(images/step24_Vert.gif) repeat-y;
}

#main_content { margin: 0 25px;
padding: 10px;
}

#right { float: right;
}
#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;
}

H2 { width: 940px;
padding: 25px 0 0 0;
background: url(images/step24.gif) repeat-x;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px; }

H3 { padding: 0 0 25px 0;
background: url(images/step24.gif) repeat-x;
margin-left: 10px;
margin-right: 10px;
margin-top: 25px;
}

Уж и так и так попробовал, но никак. Раньше боковые "проволоки" вообще не были видны, а сейчас хоть квадратики. По возможности, прошу указать на ошибку.

marccella · 09.06.2011, 02:43

В CSS: Удалите селектор #top и все его декларации, т.к его уже нет в разметке. Если Вы решили задать элементу с ид #content фиксированную ширину, то легче будет зделать такойже ширины задний фон с проволкой по обе стороны (слево и с право по вертикали).

Вот так:
x.....х
х.....х
х.....х
х.....х

И задать ее задним фоном для элемента 'p'.

Советую стереть весь CSS и начать заново. Слишком захламлен.

Хорошо былобы видеть скриншоты а еще лучше ссылку на недоработанный сайт!

ULTIMITE · 11.06.2011, 09:11

Вот ссылка на архив со всем к сайту.

http://depositfiles.com/files/0d0g7sktg

Текст там от балды вставлен, что-бы наблюдать за изменением проволоки от количества текста.

marccella · 11.06.2011, 15:30

HTML:

Код HTML:

<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">
        	<H2> Форум сталкеров </H2>
            <div id="left"></div>
            <div id="right"></div>
            <div id="main_content"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <H3>www.stalker-gang.ru</H3>
          </div>
        
    </div>
	</div>
</body>
</html>

CSS:

Код:

@charset "utf-8";
* {padding: 0;
   margin: 0;
   color: #ffffff;
   }
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: absolute;
	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; position: relative;}
#left { position: absolute; height: 100%; width: 20px; background: url(images/step24_Vert.gif) repeat-y;
        top:0; left:0; }
#right { position: absolute; height: 100%; width: 20px; background: url(images/step24_Vert.gif) repeat-y;
         top:0; right:0; }
#main_content { margin: 0 20px 20px; }



H2 { width: 940px;
	 padding: 25px 0 10px 20px;
	 background: url(images/step24.gif) repeat-x;
	 margin-top: 10px;
      }

H3 {
	 background: url(images/step24.gif) repeat-x bottom;
     padding: 0 20px 20px;
}

08.06.2011, 21:45	#13
ULTIMITE Регистрация: 06.06.2011 Сообщений: 6	Я, конечно, по своему опыту не знаю, но все лица, которые мне могли посоветовать, советовали делать в DIV`ах, кроме моей учительницы, которая со стилями вообще не особо дружит. Последний раз редактировалось ULTIMITE; 08.06.2011 в 21:48.

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

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
вывод изображений	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

08.06.2011, 12:49	#11
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Ну и сколько блоков Вы использовали? 9? Это вместо 1 таблицы. Ну, и где тут удобство?

08.06.2011, 14:09	#12
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	Данный CSS код слишком захламлен, с этим я согласен.

08.06.2011, 22:35	#14
Виталий Желтяков Старожил Регистрация: 19.04.2010 Сообщений: 2,702	Я не спорю, для абсолютного большинства задач лучшим образом подходит дивная верстка, но только не тогда, когда из дивов строится таблица. В данном случае мы строим таблицу, хотя и называем её художественной рамкой.

09.06.2011, 02:43	#16
marccella Пользователь Регистрация: 22.05.2011 Сообщений: 42	В CSS: Удалите селектор #top и все его декларации, т.к его уже нет в разметке. Если Вы решили задать элементу с ид #content фиксированную ширину, то легче будет зделать такойже ширины задний фон с проволкой по обе стороны (слево и с право по вертикали). Вот так: x.....х х.....х х.....х х.....х И задать ее задним фоном для элемента 'p'. Советую стереть весь CSS и начать заново. Слишком захламлен. Хорошо былобы видеть скриншоты а еще лучше ссылку на недоработанный сайт!

11.06.2011, 09:11	#17
ULTIMITE Регистрация: 06.06.2011 Сообщений: 6	Вот ссылка на архив со всем к сайту. http://depositfiles.com/files/0d0g7sktg Текст там от балды вставлен, что-бы наблюдать за изменением проволоки от количества текста.