Jump to content
  • 0

table 100% в блочной верстке

DiMas

Asked by DiMas,

 Share

Question

DiMas Explorer

DiMas

Posted
Posted

Здравствуйте, столкнулся с такой проблемой:

имеется верстка такого вида

—————————————————————--

| | |

| | |

| | |

| | |

float:left; | ширина не задана | float: right; |

ширина: | | ширина: |

фиксир. | | фиксир. |

| | |

| | |

—————————————————————--

При вставке в центральную часть

<table width="100%">
 <tr>
 .... some code....
 </tr>
</table>

Таблица уходит под левую часть.

как исправить?

CSS:

/* CSS Document */

*{margin:0px; padding:0px;}

img{border:none;}

img.png{behavior:url("png.htc");}

html{
height:100%;
}

body{
height:100%;
font-family:"Tahoma";
font-size:11px;
color:#000;
background:url(../images/texture.jpg);
}

body a{
color:#000;
text-decoration: none;
border-bottom:1px dashed #000;
}

body a:hover{
border-bottom:none;
}

p{
padding-bottom:7px;
}

h1{
font-size:26px;
font-weight:normal;
padding-bottom:10px;
font-weight:bold;
color:#0b2ee2;
}

h2{
font-size:18px;
padding-bottom:9px;
text-transform:uppercase;
font-weight:bold;
color:#5f2d05;
}

h3{
font-size:14px;
padding-bottom:8px;
text-transform:uppercase;
font-weight:bold;
}

ul, ol{
padding:0px 0px 10px 5px;
}

ol li{
padding-bottom:5px;
}

.cleaner{
clear:both;
width:1px;
height:1px;
}

.main{
min-height:326px;
background:url(../images/header.jpg) top left no-repeat;
}

.logo{
float:right;
width:189px;
height:136px;
margin:0px 30px;
behavior:url("png.htc");
}

.topmenu{
margin-top:100px;
min-height:10px;
}

.topmenu ul{
float:right;
list-style:none;
}

.topmenu ul li{
float:left;
width:115px;
height:33px;
background:url(../images/topmenu.png) no-repeat;
margin:0px 5px;
text-align:center;
padding-top:3px;
}

.topmenu ul li.active{
background:url(../images/topmenu_act.png) no-repeat;
padding-top:5px;
}

.topmenu ul li a{
font-size:14px;
font-weight:bold;
border:none;
color:#fff;
padding-right:5px;
}

.workarea{
}

.workarea .left{
float:left;
width:280px;
padding:0px 8px;
}

.workarea .left .leftmenu a{
border:none;
}

.workarea .left .leftmenu .spacer{
width:1px;
height:14px;
}

.workarea .left .direction{
}

.workarea .left .direction a{
border:none;
}

.workarea .left .direction .beach{
width:274px;
height:82px;
behavior:url("png.htc");
}

.workarea .left .direction .mountain{
width:274px;
height:63px;
behavior:url("png.htc");
}

.workarea .left .direction .excursion{
width:274px;
height:76px;
behavior:url("png.htc");
}

.workarea .left .direction .bottom{
width:274px;
height:73px;
behavior:url("png.htc");
}

.workarea .left .weather{
padding-left:20px;
}

.workarea .left .weather .title{
}

.workarea .left .weather .title .country{
}

.workarea .left .weather .title .country a.name{
color:#ff0600;
font-size:15px;
border:none;
font-weight:bold;
text-decoration:underline;
}

.workarea .left .weather .title .country a.name:hover{
text-decoration:none;
}

.workarea .left .weather .title .country a.city{
color:#0145a2;
font-size:13px;
border:none;
font-weight:bold;
text-decoration:underline;
}

.workarea .left .weather .title .country a.city:hover{
text-decoration:none;
}

.workarea .left .weather .title .flag{
float:right;
width:105px;
padding-top:10px;
}

.workarea .left .weather .date{
padding-top:10px;
font-weight:bold;
font-size:13px;
}

.workarea .left .weather .info{
padding-top:10px;
font-weight:bold;
font-size:13px;
}

.workarea .left .weather .info .when{
}

.workarea .left .weather .info .when div{
height:30px;
color:#614215;
}

.workarea .left .weather .info .status{
float:right;
width:100px;
padding-right:70px;
text-align:right;
}

.workarea .left .weather .info .status div.cold{
height:30px;
background:url(../images/ice.png) no-repeat;
margin-right:20px;
}

.workarea .left .weather .info .status div.rain{
height:30px;
background:url(../images/umbrella.png) no-repeat;
margin-right:20px;
}

.workarea .left .weather .info .status div.sun{
height:30px;
background:url(../images/sun.png) no-repeat;
margin-right:20px;
}

.workarea .left .weather .regions{
text-align:right;
padding-right:50px;
margin-top:10px;
}

.workarea .left .weather .regions a{
font-weight:bold;
font-size:11px;
color:#0145a2;
border:none;
text-decoration:underline;
}

.workarea .left .weather .regions a:hover{
text-decoration:none;
}

.workarea .left .currency{
font-size:13px;
padding-left:20px;
margin-top:10px;
}

.workarea .left .currency .other{
text-align:right;
padding-right:50px;
margin-top:10px;
}

.workarea .left .currency .other a{
font-weight:bold;
font-size:11px;
color:#0145a2;
border:none;
text-decoration:underline;
}

.workarea .left .currency .other a:hover{
text-decoration:none;
}

.workarea .right{
}

.workarea .right .countries{
float:right;
width:180px;
}

.workarea .right .countries a.countrylink{
color:#366ebb;
border:none;
text-decoration:underline;
font-size:14px;
font-weight:bold;
}

.workarea .right .countries a.countrylink:hover{
text-decoration:none;
}

.workarea .right .countries ul{
list-style:none;
margin-left:30px;
}

.workarea .right .countries ul li{
padding-left:30px;
padding-bottom:15px;
}

.workarea .right .countries ul li.at{
background:url(../images/flag_at.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.ad{
background:url(../images/flag_ad.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.bg{
background:url(../images/flag_bg.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.vn{
background:url(../images/flag_vn.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.gr{
background:url(../images/flag_gr.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.go{
background:url(../images/flag_go.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.do{
background:url(../images/flag_do.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.id{
background:url(../images/flag_id.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.it{
background:url(../images/flag_it.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.cy{
background:url(../images/flag_cy.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.cu{
background:url(../images/flag_cu.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.mt{
background:url(../images/flag_mt.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.ae{
background:url(../images/flag_ae.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.sc{
background:url(../images/flag_sc.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.th{
background:url(../images/flag_th.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.tn{
background:url(../images/flag_tn.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.fr{
background:url(../images/flag_fr.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.hr{
background:url(../images/flag_hr.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.cg{
background:url(../images/flag_cg.jpg) 0px 3px no-repeat;
}

.workarea .right .countries ul li.cz{
background:url(../images/flag_cz.jpg) 0px 3px no-repeat;
}

.workarea .right .content{
}

table.special tr{
vertical-align:top;
}

span.tourcountry{
font-size:18px;
color:#ff1800;

}

CSS для IE6

/* CSS Document */

.main{
height:1%;
width:expression((document.documentElement.clientWidth || document.body.clientWidth) < 1000? "1000px": "auto");
}

.topmenu{
height:1%;
}

.topmenu ul li{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/topmenu.png, sizingMethod=crop);
}

.topmenu ul li.active{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/topmenu_act.png, sizingMethod=crop);
}

.workarea .left .weather .info .status div.cold{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/ice.png, sizingMethod=crop);
}

.workarea .left .weather .info .status div.rain{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/umbrella.png, sizingMethod=crop);
}

.workarea .left .weather .info .status div.sun{
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/sun.png, sizingMethod=crop);
}



/********************/

Код:

 <!-- workarea -->
 <div class="workarea">
 <!-- left -->
 <div class="left">
 <!-- leftmenu -->
 <div class="leftmenu">
 <a href="#"><img src="images/search_tour.gif" class="leftmenu" alt="Поиск тура" title="Поиск тура" /></a>
 <div class="spacer"></div>
 <a href="#"><img src="images/interactive_map_of_world.gif" alt="Интерактивная карта мира" title="Интерактивная карта мира" /></a>
 <div class="spacer"></div>
 <a href="#"><img src="images/airport_online.gif" alt="Аэропорт онлайн" title="Аэропорт онлайн" /></a>
 <div class="spacer"></div>
 </div>
 <!-- end of .leftmenu -->
 <!-- direction -->
 <div class="direction">
 <a href="#"><img src="images/direction_beach.png" alt="Пляжный" title="Пляжный" class="beach" /></a><a href="#"><img src="images/direction_mountain.png" alt="Горнолыжный" title="Горнолыжный" class="mountain" /></a><a href="#"><img src="images/direction_excursion.png" alt="Экскурсионный" title="Экскурсионный" class="excursion" /></a><img src="images/direction_bottom.png" class="bottom" />
 </div>
 <!-- end of. direction -->
 <!-- weather -->
 <div class="weather">
 <div class="title">
 <div class="flag">
 <img src="images/flag_russia.jpg" alt="Россия" title="Россия" />
 </div>
 <div class="country">
 <a href="#" class="name">Россия</a>
<a href="#" class="city">Москва</a>
 </div>
 </div>
 <div class="date">Погода: 21 декабря, четверг</div>
 <div class="info">
 <div class="status">
 <div class="cold">-10</div>
 <div class="rain">-14</div>
 <div class="sun">5</div>
 </div>
 <div class="when">
 <div>Днем</div>
 <div>Ночью</div>
 <div>Завтра</div>
 </div>
 </div>
 <div class="regions"><a href="#">Другие регионы</a></div>
 </div>
 <!-- end of .weather -->
 <!-- currency -->
 <div class="currency">
 <div><strong>Котировки:</strong></div>
 <div><b>USD ЦБ</b>   21.02   <b>24,5223</b>   -0,0326</div>
 <div><b>EUR ЦБ</b>   21.02   <b>32,6527</b>   +0,0523</div>
 <div class="other"><a href="#">Другая валюта</a></div>
 </div>
 <!-- end of .currency -->
 <!-- leftmenu -->
 <div class="leftmenu">
 <div class="spacer"></div><div class="spacer"></div><div class="spacer"></div>
 <a href="#"><img src="images/our_partners.gif" alt="Наши партнеры" title="Наши партнеры" /></a>
 </div>
 <!-- end of .leftmenu -->
 </div>
 <!-- end of .left -->
 <!-- right -->
 <div class="right">
 <!-- countries -->
 <div class="countries">
 <ul>
 <li class="at"><a href="#" class="countrylink">Австрия</a></li>
 <li class="ad"><a href="#" class="countrylink">Андорра</a></li>
 <li class="bg"><a href="#" class="countrylink">Болгария</a></li>
 <li class="vn"><a href="#" class="countrylink">Вьетнам</a></li>
 <li class="gr"><a href="#" class="countrylink">Греция</a></li>
 <li class="go"><a href="#" class="countrylink">Гоа</a></li>
 <li class="do"><a href="#" class="countrylink">Доминикана</a></li>
 <li class="id"><a href="#" class="countrylink">Индонезия</a></li>
 <li class="it"><a href="#" class="countrylink">Италия</a></li>
 <li class="cy"><a href="#" class="countrylink">Кипр</a></li>
 <li class="cu"><a href="#" class="countrylink">Куба</a></li>
 <li class="mt"><a href="#" class="countrylink">Мальта</a></li>
 <li class="ae"><a href="#" class="countrylink">ОАЭ</a></li>
 <li class="sc"><a href="#" class="countrylink">Сейшелы</a></li>
 <li class="th"><a href="#" class="countrylink">Тайланд</a></li>
 <li class="tn"><a href="#" class="countrylink">Тунис</a></li>
 <li class="fr"><a href="#" class="countrylink">Франция</a></li>
 <li class="hr"><a href="#" class="countrylink">Хорватия</a></li>
 <li class="cg"><a href="#" class="countrylink">Черногория</a></li>
 <li class="cz"><a href="#" class="countrylink">Чехия</a></li>
 <li ><a href="#" class="countrylink">Все страны</a></li>
 <ul> 
 </div>
 <!-- end of .countries -->
 <!-- content -->
 <div class="content">
 <h1 align="center">Туристское агентство ?Путевка?</h1> 
 <h2 align="center">Спецпредложения</h2> 
 <table class="special" align="center" width="100%">
 <tr>
 <td colspan="2"><span class="tourcountry">Доминикана</span></td>
 <td> </td>
 <td colspan="2"><span class="tourcountry">Куба</span></td>
 <tr>
 </table>
 </div>
 <!-- end of .content -->
 <div class="cleaner"></div>
 </div>
 <!-- end of .right -->
 </div>
 <!-- end of .workarea -->

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
Вадим Explorer

Вадим

Posted
Posted

Столько сложностей с css.

Давайте рассуждать трезво. Если мы хотим построить сайт из 3х колонок, то можем использовать или div, или таблицу (чего я не рекомендую).

Для таблицы все просто - 1 строка, 3 столбца: 1 и 3 задается width, а задавать width для 2 не надо.

Для div чуть сложнее. Если делать через div, то всем трем столбцам (div) нужно задавать размер (px, %). Если делать через DIV, то надо создать сначала 2 div. Допустим так:

<style>
#left {
float: left;
width: 80%;
}
#subleft {
width: 20%;
}
#right {
float: right;
width: 19%;
}
</style>
<body>
<div id="left">
 <div id="subleft">левая колонка</div>
 а здесь сам текст по центру
</div>
<div id="right"></div>
</body>

Имея опыт в 10 лет написании сайтов скажу так - не используйте 3 колонки, если у вас не портал. Остановитесь на 2х - этого более чем достаточно. 3 колонки - это уже визуальный шум, который только мешает посетителям вашего сайта. Ведь согласитесь, что обычно в 3ей колонке размещается реклама. И так же не используйте div для создания табличной верстки, это против самого принципа доступности сайтов, тем более такой сайт не так просто реализовать. Многие люди не понимают, как работаю их сайты и верстают их методом тыка.

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
Go to question listing
×
×
  • 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

  I accept