Программирование
6 • Посмотреть все темы

Два DIV...

4875

ValdeZ @ValdeZ

07.09.2008

Есть вот такой блок с закругленными углами:

<style>

#block1 {

        width: 715px;  					/* Ширина блока */

	margin: 10px auto 15px;                         /* Отступ блока (10пх,авто, 15пх) */

}

.inblock {                                                   

	border: 1px solid #B0BCC2;                      /* Настройка содержимого блока (Рамка и её цвет) */

	border-width: 0 1px;                            /* Толщина рамки блока */

	padding: 5px 10px;                              /* Отступ содержимого от краёв блока */

}

.b1, .b2, .b3, .b4, .b5,

.b1 i, .b2 i, .b3 i, .b4 i, .b5 i,

.b1 b, .b2 b, .b3 b, .b4 b, .b5 b,

.b1 q, .b2 q, .b3 q, .b4 q, .b5 q {

	height: 1px;      				/* Ширина пикселя-закругления */

	font-size: 1px;                                 /* Размре грифта в пикселе-закруглении */

	overflow: hidden;				/* Условие содержания */

	border-style: solid;                            /* Стиль рамки */

	border-width: 0 1px;                            /* Ширина рамки */

	display: block;					/* Условие (элемент показуется как блочный) */

}

.b1 {

  	margin: 0 2px;                                  /* Отступ элемента (0пх, 2пх) */

	background: #EBEEF0;                            /* Цвет фона элемента */

	border: none;                                   /* Условие рамки (отсутствует) */

}

.b1 b {

 	margin: 0 1px;                                  /* Отступы элемента (0пх, 1пх) */

 	background: #B8C3C8;                            /* Цвет фона элемента */

 	border-color: #CBD3D7;                          /* Цвет рамки элемента */

}

.b2 {	margin: 0 1px;	                                /* Отступ элемента (0пх, 1пх) */

	border-color: #D6DCDF;}                         /* Цвет рамки элемента */

.b2 b {	border-color: #B8C3C8;}                         /* Цвет рамки элемента */

.b2 i {	border-color: #E4E8EA;}                         /* Цвет рамки элемента */

.b2 q {	border-color: #F7F8F9;}                         /* Цвет рамки элемента */

.b3 {	border-color: #EBEEEF;}                         /* Цвет рамки элемента */

.b3 b {	border-color: #BCC6CB;}                         /* Цвет рамки элемента */

.b3 i {	border-color: #F9FAFB;}                         /* Цвет рамки элемента */

.b4 {	border-color: #CAD2D6;}                         /* Цвет рамки элемента */

.b4 b {	border-color: #E5E9EB;}                         /* Цвет рамки элемента */

.b5 {	border-color: #B5C0C6;}                         /* Цвет рамки элемента */

.b5 b {	border-color: #FAFBFB;}                         /* Цвет рамки элемента */ 

</style>

</head>

<body>

<!-- Блок 1 --> 

<div align="center">

<div id="block1">

<div class="b1"><b></b></div><div class="b2"><b><i><q></q></i></b></div>

<div class="b3"><b><i></i></b></div><div class="b4"><b></b></div><div class="b5"><b></b></div>

<div align="left" class="inblock">

Сглаженное закругление углов с помощью CSS

Этот способ визуально абсолютно идентичен первому варианту.

<!-- Конец содержимого (блока 2) --> 

</div>  

<div class="b5"><b></b></div><div class="b4"><b></b></div><div class="b3"><b><i></i></b></div>

<div class="b2"><b><i><q></q></i></b></div><div class="b1"><b></b></div>

</div>

</div>

нужно внутрь этого блока вместить два дива...рядом(всмысле на одном уровне)
после погугльовки попробовал нашедший вариант....и этот вариант сломал мне боковую и нижнею рамку...вообщем получился ужос(((
помогите поместить в этот блок дивы,таким образом как написанно выше....
на самом деле дивов в этом блоке будет больше:

див,див
(по центру)(отступ)див(отступ)див(отступ)
(справа)див

вот так) заранее благодарен за помощь...
З.Ы. выложил бы ссылку...но я пока что работаю на локалке...)

Отредактировано ValdeZ - 07.09.2008

2536

удалён @crigon

08.09.2008

Относительно простым вариантом без заморочек будет прописать родителю position: relative; и расставлять детей абсолютным позиционированием. При условии, что всем блокам проставлены фиксированные размеры.

4875

ValdeZ @ValdeZ

08.09.2008

да побейте меня ногами гуру...но помоему я нагуглил действуйщее решение)

<div style="display:inline;"></div>

<div style="display:inline;"></div>

колитесь...что тут не так?)...я имею введу какие недостатки)

2536

удалён @crigon

09.09.2008

Это равнозначно

<font></font>

7094

--- @Render

09.09.2008

🤣 )))) ёлки неужели никто не разбираеться в DIVах .... вот смеху то ухахха ))
Валдез )) сорри знал бы их хорошо помог бы тебе с удовольствием !

4875

ValdeZ @ValdeZ

09.09.2008

это оказалсось ерундой (вариант выше) т.к. когда я начал прописывать им разные классы+указывать высоту и ширину...вообщем всё стало как обычно(
crigon,выложи,пожалуйста, как будет выглядить код при твоём варианте 😀

7094

--- @Render

09.09.2008

ValdeZ Блин тебе тут помоему кроме кригона и адмирала никто больш непоможет....так как в этот раздел ОЧЕНЬ И ОЧЕНЬ редко заходят ((

2536

удалён @crigon

09.09.2008

Ну, приложи картинку с квадратиками, как нужно расставить )

4875

ValdeZ @ValdeZ

09.09.2008

Вот 😀
Сразу говорю..эта конструкция будет не на весь экран...небольшая конструкция по центру экрана 😀
Вообщем есть два момента,где нужно два дива рядом)
ну там ещё надо один див в верху слева и внизу слева..но то я своими ручками)
З.Ы. при условии что в большом блоке (выделены цветным) эти дивы помещены в вышеуказанный блок с закруглениями,а дивы что ниже,просто сами по себе)

2536

удалён @crigon

09.09.2008

Тебе и другим на будущее.
Комментариев не даю, кому надо - разберётся.)
**********

Отредактировано crigon - 09.09.2008

4875

ValdeZ @ValdeZ

14.09.2008

Вообщем снова проблемма с двумя дивами...(

HTML-

<div id="block1">

<div id="left">текст</div>

<div id="right">текст</div>

</div>

CSS-

#block1 { width: 412px; }

#left { float: left; width: 50%;}

#right { float: left; width: 50%; }

получается, что в Мозиле ФФ и Опере два дива расположены на одном уровне а в ИЕ(7) один див по центру а другой слева на новом рядке(((
как это исправить?)

526

Kreg-Heg @Kreg-Heg

16.09.2008

Попробуй использовать таблицы

4036

DelFast @DelFast

16.09.2008

Kreg-Heg пишет:

Попробуй использовать таблицы

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

4875

ValdeZ @ValdeZ

29.10.2008

Вообщем есть такой документик...всё вроде бы прекрасно, дивы стали как надо (спасибо кригону) ..всё хорошо,НО..теперь закапризничала Mozilla а не IE 🙁 ((

Мне нужно задать бордер шапке (елемент "h") и всему вместимому (елемент "с")..задаю бордер для "с", бордером обрамляется только шапка ("h") - в Мозилле, а в ИЕ все три дива... одна большая прямоугольная рамка вокруг трёх дивов.... задаю шапке ( "h") всё нормально...
как сделать, чтобы и в мозиле бордер для "с" был как в ИЕ? 🙁 ((

З.Ы. если в мозиле задать бордеры левому или правому диву (который ниже шапки) (который "L" , "R" ) то елемент "R" останется на том же месте по горизонтали, но соскочит на уровень ниже...ровно на высоту елемента "L"
помогите исправить и этот баг...я уже не знаю что с ними делать...(((
**********

Отредактировано ValdeZ - 29.10.2008

4875

ValdeZ @ValdeZ

29.10.2008

оффтоп..нужно было приписать position: absolute;