Помогите разобраться с кодом!

Alexsays · April 8, 2010

<html>
<style>
.rtop, .rbottom{
display:block
border: 1px solid black;
}

.rtop *, .rbottom *{
display: block; 
height: 1px; 
overflow: hidden;
background:red;

}
.r1{
margin: 0 5px
}
.r2{
margin: 0 3px
}
.r3{
margin: 0 2px
}
.r4{
margin: 0 1px; height: 2px}
</style>
<div id="container">

<b class="rtop">
<b class="r1"></b> 
<b class="r2"></b> 
<b class="r3"></b> 
<b class="r4"></b>
</b>
<div style='background:red;'>yyyyy  </div>

<b class="rbottom">
<b class="r4"></b> 
<b class="r3"></b> 
<b class="r2"></b> 
<b class="r1"></b>
</b>

</div>

</html>

Помогите разобраться в коде, как менять размеры и положения блока? И ссори за то что тема не в том разделе форума опубликована)

Edited April 8, 2010 by Alexsays

Searcher · April 9, 2010

Используйте свойства position, float, left, top, right, width, height и т.п.

Вообще, что за глупые вопросы обо всем?! Обучение верстке не здесь. Вы почитайте для начала мануалы (например Шаг за шагом), попробуйте что-то конкретное сделать. Если не будет получаться, то уже с конкретными проблемамик нам.

В дальнейшем с такими вопросами буду нещадно удалять!

Alexsays · April 9, 2010

Используйте свойства position, float, left, top, right, width, height и т.п.
Вообще, что за глупые вопросы обо всем?! Обучение верстке не здесь. Вы почитайте для начала мануалы (например Шаг за шагом), попробуйте что-то конкретное сделать. Если не будет получаться, то уже с конкретными проблемамик нам.
В дальнейшем с такими вопросами буду нещадно удалять!

Я и делаю что то конкретное,вот в этом конкретном и появилась загвоздка связанная с этим кодом. Я уже кучу книжек и мануалов прочитал но ответ на именно тот вопрос который я здесь задал ни где не нашел. Как управлять положением объектов я знаю. Но именно с этим кодом у меня ничего не выходит. Вы вообще смотрели на код? Это же не картинка или таблица что бы ее так легко взять и передвинуть. И вообще для чего создан форум? Для поиска монуалов есть гугл.

Searcher · April 9, 2010

Помогите разобраться в коде, как менять размеры и положения блока?

Вот это ваш вопрос. И где тут конкретика?! Какого блока, как менять? Куда вы его хотите поместить? Как это должно выглядеть, и как меняться?

Картинка, таблица, блок - все одно. У всех элементов есть свойства, которые их позиционируют относительно других элементов. Я часть этих свойств перечислил и дал конкретную ссылку, а не отправлял в гугл. Вы по это ссылке что-нибудь прочли?

Еще раз спрашиваю, что и как вы хотите разместить? Нарисуйте хоть картинку.

stars · April 9, 2010

<html>
<style>
.rtop, .rbottom{
display:block
border: 1px solid black;
}

.rtop *, .rbottom *{
display: block; 
height: 1px; 
overflow: hidden;
background:red;

}
.r1{
margin: 0 5px
}
.r2{
margin: 0 3px
}
.r3{
margin: 0 2px
}
.r4{
margin: 0 1px; height: 2px}
</style>
<div id="container">

<b class="rtop">
<b class="r1"></b> 
<b class="r2"></b> 
<b class="r3"></b> 
<b class="r4"></b>
</b>
<div style='background:red;'>yyyyy  </div>

<b class="rbottom">
<b class="r4"></b> 
<b class="r3"></b> 
<b class="r2"></b> 
<b class="r1"></b>
</b>

</div>

</html>
Помогите разобраться в коде, как менять размеры и положения блока? И ссори за то что тема не в том разделе форума опубликована)

Ну ответить более полноценно чем Searcher на ваш вопрос нельзя. Однако интересно тот код что вы предоставили в первом посте это так не удачно вырезанный код откуда-то или это вы сами такое написали?

Searcher · April 9, 2010

да, кстати, можно дополнить банальным вопросом: а где доктайп, собственно? ))

Alexsays · April 9, 2010

По поводу доктайма, из вашего мануала кстати-Замечание

Часто можно встретить код HTML вообще без использования <!DOCTYPE>, веб-страница в подобном случае все равно будет показана.

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

Alexsays · April 10, 2010

В общем я уже почти разобрался как работает этот код и могу теперь управлять цветом, размером и положением этого блока. Теперь меня интересует как вставить в этот блок второй такой же что бы получилось то что на картинке, я думаю надо использовать z-index но у меня почему то не получается. Надеюсь на вашу помощь!

Edited April 10, 2010 by Alexsays

stars · April 10, 2010

А зачем так все усложнять? для чего это???

Почему нельзя вырезать 4 уголка и собрать эту конструкцию? http://s52.radikal.ru/i138/1004/75/25cbd642d433.jpg

Alexsays · April 10, 2010

Потому что цвет блока должен меняться в зависимости от содержимого, в этом фишка. Но я уже во всем разобрался и у меня получилось то что я хотел. Единственное что мне не понятно в этом коде это вот что:

.rtop, .rbottom{
display:block
border: 1px solid black;
}

.rtop *, .rbottom *{
display: block; 
height: 1px; 
overflow: hidden;
background:#6ace00;

Почему два раза и зачем *, Разъясните если не трудно.

Edited April 10, 2010 by Alexsays

stars · April 10, 2010

К сожалению не могу утверждать, но по идеи .rtop * задает свойство всем элементам которые находятся внутри элемента .rtop

Searcher · April 12, 2010

К сожалению не могу утверждать, но по идеи .rtop * задает свойство всем элементам которые находятся внутри элемента .rtop

так и есть

А вот доктайп обязателен и нечего смотреть на сайты, где его нет. У нас в стране большинство сайтов делают далеко не профи. Если доктайпа нет, то ваша верстка в разных браузерах будет выглядеть по-разному. Доктайп указывает на стандарт в котором браузер будет рендерить вашу страницу. Эти стандарты появились еще в прошлом веке!

А если у кого-то нет доктайпа, то это значит, что человек остался в прошлом веке. Читал книжки старые или преподаватели старье преподавали...

Sign In

Помогите разобраться с кодом!

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information