Jump to content
  • 0

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


Alexsays
 Share

Question

<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 by Alexsays
Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

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

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

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

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

Link to comment
Share on other sites

  • 0
<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 на ваш вопрос нельзя. Однако интересно тот код что вы предоставили в первом посте это так не удачно вырезанный код откуда-то или это вы сами такое написали?

Link to comment
Share on other sites

  • 0

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

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

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

Link to comment
Share on other sites

  • 0

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

Edited by Alexsays
Link to comment
Share on other sites

  • 0

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

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

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

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

Edited by Alexsays
Link to comment
Share on other sites

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

так и есть

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy