верстка таблица отступы

musulman · June 12, 2007

Салемствую Хотел сделать таблицу должна выгледить вот так.

А у меня , что то вообше не полуаеться вставляю верхние рис. Устанавливаю минус маргину и на ИЕ вообше рис пропадают на ФФ они вроде как стаят , но после обновления страницы они как и в ИЕ исчезают. Нижние рамки не могу не как сделать. И еще мне кажется что я ее через чурь намудрил например знаю что можно сделать без минусовоого маргина , но не знаю как без него , кто сможет показать как сделать ее более удобной ? Выслушаю все предложения...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title></title>
<style type="text/css">
#content {
 display: block;
 width: 780px;
 height: 400px;
 text-align: center;
 border: 8px solid #abacab;
 margin: 5px 5px 5px 15px;
 background: white;
 }
#content .tl_c { background: url(images/tl_c.gif) no-repeat;
 float: left;
 width: 28px;
 height: 176px;
 margin-left: -35px;
 margin-top: -8px;
 }
#content .tr_c { background: url(images/tr_c.gif);
 float: right;
 width: 37px;
 height: 222px;
 margin-top: -8px;
 margin-right: -40px;
 }
</style>
</head>
<body>
<div id="content">
<div class="tl_c"></div>
<div class="tr_c"></div>
<div class="c_c">AAA</div>
</div>
</body>
</html>

yopopt · June 12, 2007

Хм, а рисунки точно gif? Такое может быть если рисунки в другом формате, просто переименованные в gif.

Код работает в Firefox 2.0.0.4, Opera 9.21 и Ie7.

musulman · June 12, 2007

а как утсановить нижние боковины ? что бы вы могли посоветовать ?

yopopt · June 12, 2007

Как вариант:

<div id="content">
<div class="правый верхний угол"></div>
<div class="левый верхний угол"></div>
<div class="контент">AAA</div>
<div class="правый верхний угол"></div>
<div class="левый верхний угол"></div>
</div>

И играться с position.

Emm · June 12, 2007

Как вариант:

геморно это дело....

yopopt · June 12, 2007

Полностью согласен. Проще таблицами

В принципе имея такую структуру при фиксированном ширине(как здесь):

<div id="container"> // Левая и правая граница.
 <div id="main"> // Шапка
 <div id="top_left"></div> // Левый верхний угол
 <div id="top_right"></div> // правый верхний угол
 <div id="content"></div> // Контент
 </div>
 <div id="footer"> // Линия подвала
 <div id="bottom_left"></div> // Левый нижний угол
 <div id="bottom_right"></div> // Правый нижний угол
 </div>
</div>

можно спокойно сделать и углы и боковинки и подвал....

Emm · June 12, 2007

при фиксированном ширине...
..можно спокойно сделать и углы и боковинки и подвал....

подтверждаю - можно

musulman · June 12, 2007

Сейчас попробую

musulman · June 14, 2007

Пробывал делать , но вообше не как не получаеться. Можно было бы увидеть ксс код может быть тогда стало бы более понятно.

yopopt · June 14, 2007

Вот, набросал по быстрому

<html>
<head>
<style type="text/css">
* {
 margin:0;
 padding:0;
}
#container {
 background: #fff url(images/bg.gif) repeat-y top left;
 width:500px;
 margin:20px auto;
}
#main {
 background: url(images/point.gif) repeat-x top left;
 width:100%;
 height:300px;
}
#top_left {
 background: url(images/lt.gif) no-repeat top left;
 float:left;
 width:10px;
 height:10px;
}
#top_right {
 background: url(images/rt.gif) no-repeat top left;
 float:right;
 width:10px;
 height:10px;
}
#footer {
 background: url(images/point.gif) repeat-x bottom left;
 height:10px;
}
#bottom_left {
 background: url(images/lb.gif) no-repeat bottom left;
 float:left;
 width:10px;
 height:10px;
}
#bottom_right {
 background: url(images/rb.gif) no-repeat bottom left;
 float:right;
 width:10px;
 height:10px;
}
#content {
 padding:10px;
 text-align:center;
}
</style>
</head>

<body>
<div id="container"> <!-- Левая и правая граница. -->
 <div id="main"> <!-- Шапка -->
 <div id="top_left"></div> <!-- Левый верхний угол -->
 <div id="top_right"></div> <!-- правый верхний угол -->
 <div id="content">бла-бла-бла</div> <!-- Контент -->
 </div>
 <div id="footer"> <!-- Линия подвала -->
 <div id="bottom_left"></div> <!-- Левый нижний угол -->
 <div id="bottom_right"></div> <!-- Правый нижний угол -->
 </div>
</div>
</body>

Архив с рисунками тут: http://slil.ru/24514736

Sign In

верстка таблица отступы

Question

musulman

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

musulman

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Emm

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Emm

Link to comment

Share on other sites

musulman

Link to comment

Share on other sites

musulman

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information