Проблема, связанная с горизонтальным расширением DIV - PullRequest
Новая
       21

Проблема, связанная с горизонтальным расширением DIV

1 голос
/ 03 апреля 2011

У меня проблема с созданием базового прямоугольного окна с использованием divs.Я почти уверен, что упускаю что-то маленькое, но я потратил почти весь день на работу и устал.Я надеялся, что кто-нибудь может обнаружить мою проблему и помочь мне.

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

http://img805.imageshack.us/i/divs.png/

Вот код для divs .. 

<div>
<div style="">
    <div style="height:44px; width:20px; background-image:url(images/boxes/tl.png); background-repeat:no-repeat; float:left;"></div>
    <div style="min-height:34px; min-width:100px; background-image:url(images/boxes/tc.png); background-repeat:repeat-x; float:left; color:#FFFFFF; padding-top:10px;">Search</div>
    <div style="height:44px; width:27px; background-image:url(images/boxes/tr.png); background-repeat:no-repeat; float:left;"></div>
    <div style="clear:both;"></div>
</div>

<div style="">
    <div style="background-image:url(images/boxes/ml.png); min-height:20px; width:20px; background-repeat:repeat-y; float:left;"></div>
    <div style="background-color:#3F8FD2; min-width:100px; min-height:20px; float:left;" class="regularText2">Testing Content Expand Here --></div>
    <div style="background-image:url(images/boxes/mr.png); min-height:20px; width:27px; background-repeat:repeat-y; float:left;"></div>
    <div style="clear:both;"></div>
</div>

<div style="">
    <div style="width:20px; height:31px; background-image:url(images/boxes/bl.png); background-repeat:no-repeat; float:left;"></div>
    <div style="height:31px; min-width:100px; background-image:url(images/boxes/bc.png); background-repeat:repeat-x; float:left;"></div>
    <div style="width:27px; height:31px; background-image:url(images/boxes/br.png); background-repeat:no-repeat; float:left;"></div>
    <div style="clear:both;"></div>
</div>

Любая / все помощь очень ценится!Заранее спасибо.

Дима

Ответы [ 3 ]

3 голосов
/ 03 апреля 2011

Самый простой способ сделать круглые углы - это использовать -moz-border-radius и webkit-border-radius, однако эти свойства поддерживаются только в браузерах Mozilla и Webkit.

Однако я бы сделал основной div с относительной позицией, а затем установил абсолютные углы, например: 

 <div style="position:relative">
      <div style="position:absolute;top:0;left:0;"></div>
      <div style="position:absolute;top:0;right:0;"></div>
      <div style="position:absolute;bottom:0;left:0;"></div>
      <div style="position:absolute;bottom:0;right:0;"></div>
 Div content here
 </div>

Вы можете настроить высоту и добавить фоновые изображения, используя background-position.

Также я бы поместил CSS в отдельный файл, просто поместил его в качестве примера.

1 голос
/ 03 апреля 2011

Я недавно ответил на аналогичный вопрос, и ответ может помочь, если вы хотите использовать чистый метод CSS, ответом может быть размещение, а не плавание.

См. Этот ответ для возможного решения

0 голосов
/ 03 апреля 2011

Используйте плагин jQuery за круглым углом.

http://jquery.malsup.com/corner/

Поддерживается во всех браузерах, включая IE. Он рисует углы в IE, используя вложенные элементы div (без изображений). Он также имеет встроенное округление радиуса границы в браузерах, которые его поддерживают (Opera 10.5+, Firefox, Safari и Chrome). Поэтому в этих браузерах плагин просто устанавливает вместо этого свойство css.

Вот как это сделать

Вам необходимо включить jQuery и js-скрипт Corner до </body>. Затем напишите свой jQuery как $ ('div, p'). Corner ('10px'); и поставить перед ''. Таким образом, ваш HTML будет выглядеть как приведенный ниже код. Здесь я делаю круглые углы для всех тегов div и p. Если вы хотите сделать это для определенного идентификатора или класса, то вы можете сделать что-то вроде $('#myid').corner();

<body>
    <div class="x"></div>
    <p class="y"></p>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://github.com/malsup/corner/raw/master/jquery.corner.js?v2.11"></script>
    <script>$('div, p').corner();</script>
</body>

Проверьте рабочий пример на http://jsfiddle.net/VLPpk/1

...