Jump to content
  • 0

Помогите убрать пробел между divами


Perezzloy
 Share

Question

Делаю сайт. Шаблон у меня частично на дивах, частично в таблицах. Возникла такая проблема: не могу убрать пробел между горизонтальным меню и блоком "контент". Как сделать floatОМ так и не понял, пустой див с нулевыми размером шрифта и высотой вроде бы помогает, но тогда половина горизонтального меню не отображается.

Вот код шаблона html:


<div id="main">
<header>
?<div id="header"><table align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td width="30%"><div id='logo'><img src="logo.png" alt="" height=100px weight=200px></div></td>
<td valign="bottom" width="50%" id="name"><div class='site_name'><h1>Название сайта</h1></div><br /><div class='slogan'><p>Слоган сайта</p></div></td>
<td width="20%"><div class='date'>тут дата</div></td>
</tr>
</tbody></table></div></header>
<nav>
?<div class='cssmenu'>
<ul>
<li class=''><a href='№'><span>ххх</span></a></li>
<li class=''><a href='#'><span>ххх</span></a></li>
<li class='has-sub '><a href='#'><span>ххх</span></a>
<ul>
<li class=''><a href='#'><span>ххх</span></a></li>
<li class=''><a href='#'><span>ххх</span></a></li>
</ul>
</li>
<li class=''><a href='#'><span>Контакты</span></a></li>
</ul>
</div>
</nav>
<section>
?<div id="content"><table cellpadding="0" cellspacing="0" width="100%" valign="top">
<tbody><tr valign="top">
?<td id="left_block"></div></td>
?<td id="center_block"></td>?
<td id="right_block">?</td></tr>
</tbody></table></div>
<div style="font-size: 0px; height: 0px;">
</section>

А вот его css:


html, body{ margin:0; padding:1; width:99,9%; height:100%; font-family: Arial; font-size: 12px; color: #444; background: #888;}
p:first-letter {color: red; font-weight: bold;}
h1:first-letter {color: red; font-weight: bold;}
/* Основной раздел */
#main { width: 100%; background – color : #ECECEC; margin-left: auto; margin-right: auto; position:relative; min-height:99%; height:auto !important; height:99%; color: #646464; border: 2px;}
#main .empty {height:41px; }
/* Хеадер */
#header { overflow: hidden; background – color : #F7F5F5; background – repeat : repeat – x; background – position : bottom; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 0px; padding: 0px 8px 0px 8px; font-size: 8px;}
.site_name { font-family: Arial; text–align: center; font-size: 18px;}
.slogan { font-size: 14px; font-family: Arial; text–align: center;}
.date {font-size: 12px; font-family: Arial; text–align: center; font-weight: top;}
/* менюшка */
#name { padding–top: 4px; padding–bottom: 4px; padding–left: 4px; padding–right: 2px; color: #555; text–align: center; overflow: hidden;}
.cssmenu ul {margin: 0; padding: 7px 6px 0; background: #7d7d7d url(http://ххх) repeat-x 0 -110px; line-height: 100%; border-radius: 2em; font: normal .8em/1.5em Arial, Helvetica, sans-serif; font-size: 12px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0px 0px rgba(0,0,0, .4); -moz-box-shadow: 0 0px 0px rgba(0,0,0, .4);}
.cssmenu li {margin: 0 0px; padding: 0 0 8px; float: left; position: relative; list-style: none; }
.cssmenu a,
.cssmenu a:link {font-weight: bold; color: #e7e5e5; text-decoration: none; display: block; padding: 8px 20px; margin: 0; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; text-shadow: 0 1px 2px rgba(0,0,0, .3); }
.cssmenu a:hover {background: #000; color: #fff;}
.cssmenu .active a,
.cssmenu li:hover > a {background: #666 url(http://ххх) repeat-x 0 -40px; color: #444; border-top: solid 1px #f8f8f8; -webkit-box-shadow: 0 1px 1px rgba(0,0,0, .2); -moz-box-shadow: 0 0px 0px rgba(0,0,0, .2); box-shadow: 0 0px 0px rgba(0,0,0, .2); text-shadow: 0 1px 0 rgba(255,255,255, 1); }
.cssmenu ul ul li:hover a,
.cssmenu li:hover li a {background: none; border: none; color: #666; -webkit-box-shadow: none; -moz-box-shadow: none;}
.cssmenu ul ul a:hover {background: #8f8f8f url(http://ххх) repeat-x 0 -100px !important; color: #fff !important; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; text-shadow: 0 1px 1px rgba(0,0,0, .1);}
.cssmenu li:hover > ul {display: block;}
.cssmenu ul ul {display: none; margin: 0; padding: 0; width: 185px; position: absolute; top: 40px; left: 0; background: #ddd url(http://ххх) repeat-x 0 0; border: solid 1px #b4b4b4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 0px 0px rgba(0,0,0, .3); -moz-box-shadow: 0 0px 0px rgba(0,0,0, .3); box-shadow: 0 0px 0px rgba(0,0,0, .3);}
.cssmenu ul ul li {float: none; margin: 0; padding: 3px; }
.cssmenu ul ul a {font-weight: normal; text-shadow: 0 1px 0 #fff; }
.cssmenu ul:after {content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
* html .cssmenu ul {height: 1%;}
/* ————————————————————————————-- */
/* колонки */
#content {font-weight: top;}
#left_block { width: 19%; background: #888; padding: 0px 3px 2px 6px; margin: 0 auto 0 auto; font-size: 12px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 0px;}
#left_block p { text-align: justify;}
#center_block { width: 58%; background: #888; padding: 0px 3px 2px 3px; margin: 0 auto 0 auto; font-size: 12px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 0px;}
#center_block p { text-align: justify;}
#center_block h2 { text-align: center;}
#right_block { width: 19%; background: #888; padding: 0px 6px 2px 3px; margin: 0 auto 0 auto; font-size: 12px; text–align: center; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 0px;}

Помогите разобраться, мучаюсь с этим уже 2й день.

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

  • 0

Они и так в ней. Но проблему уже решил. Можете глянуть на сайте (выше в сообщениях). А на счет спецсимволов, да есть некоторые. Просто на CSS3 делаю, с применением скругленных углов, прозрачности, градиентов и т.д. А еще там есть хаки для разных браузеров.

Link to comment
Share on other sites

  • 0

Они и так в ней. Но проблему уже решил. Можете глянуть на сайте (выше в сообщениях). А на счет спецсимволов, да есть некоторые. Просто на CSS3 делаю, с применением скругленных углов, прозрачности, градиентов и т.д. А еще там есть хаки для разных браузеров.

Я почему то так сразу и подумал... А вы не боитесь на него в explorere заходить?)) я не критикую, у самого в explorere вид немного теряется. Под exp отдельно хакать придется

Link to comment
Share on other sites

  • 0

Они и так в ней. Но проблему уже решил. Можете глянуть на сайте (выше в сообщениях). А на счет спецсимволов, да есть некоторые. Просто на CSS3 делаю, с применением скругленных углов, прозрачности, градиентов и т.д. А еще там есть хаки для разных браузеров.

Я почему то так сразу и подумал... А вы не боитесь на него в explorere заходить?)) я не критикую, у самого в explorere вид немного теряется. Под exp отдельно хакать придется

Да, Вы правы, в эксплорере вид не очень, но я все же подгоняю где могу. Кроме того, люди, пользующиеся эксплорером, мало меня интересуют :lol:

Ну и на примере того сайта я учусь css и php.

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