Блок под блоком

montuk · November 2, 2011

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

пробовал float:left для обоих блоков... вроде начал выводить но только текст второго блока смещался всеравно под логотип.

main.tpl -

<a class="webmacter" href="/index.php" title="*********.ru"><img src="{THEME}/images/webmacter.png" alt="********.ru" /></a> 
<!--ТАБЫ-->	
<div class="tabsContent">
	   <!–- tabs -–>
	   <ul class="tabNavigation">
		<li><a href="#zero">Приветствие</a></li>
			   <li><a href="#first">Погода</a></li>
			   <li><a href="#second">ТВ программа</a></li>
			   <li><a href="#third">Поиск</a></li>
   </ul>


<!–- tab containers -–>
	   <div class="tabCont" id="zero"><div class="tabContainer">
<a href="http://*********.ru/index.php" style="color:white">Вы посетили новостной портал посвящённый городу Коркино и его соседям </a><BR>
<a href="http://*********.ru/board/" style="color:white">Просмотреть объявления на нашем сайте.</a><BR>
<a href="http://*********.ru/pogoda/" style="color:white">Просмотреть погоду на нашем сайте.</a><BR>
<a href="http://*********.ru/index.php" style="color:white">Просмотреть что нибудь еще</a>
	   </div></div>


   <!–- tab containers -–>
	   <div class="tabCont" id="first"><div class="tabContainer">
<a href="http://clck.yandex.ru/redir/dtype=stred/pid=7/cid=1228/*http://pogoda.yandex.ru/korkino"><img src="http://info.weather.yandex.net/korkino/2.png" border="0" alt="Яндекс.Погода"/><img width="1" height="1" src="http://clck.yandex.ru/click/dtype=stred/pid=7/cid=1227/*http://img.yandex.ru/i/pix.gif" alt="" border="0"/></a>
	   </div></div>


	   <div class="tabCont" id="second"><div class="tabContainer">
<center>
<!--Информер сайта телепередач tv.cmlt.tv-->
<link rel="stylesheet" href="http://tv.cmlt.tv/css/informer.css">
<style type="text/css">
.i_border {width: 350px;border: 1px solid #110033;background-color:#faf8ec}
.i_mheader {background-color:#5ca3c8}
.i_header {color:#000000}
.i_select {background-color:#FFFFFF;color:#9E9E9E}
.i_time {color:#000000}
.i_text {color:#000000}
.i_channel {color:#9E9E9E}
</style>
<div class="i_border"><script type="text/javascript" charset="windows-1251" src="http://tv.cmlt.tv/js/informer/2078/2078.js"></script><script type="text/javascript">i_link_blank = false; i_id = new Array(1,2,3,9,12,14,21,32,140); i_townId="2078";</script><script type="text/javascript" charset="windows-1251" src="http://tv.cmlt.tv/js/informer/informerSelTimeChan.js?encoding=windows-1251"></script><div id="i_footer" class="i_footer"><a href="http://tv.cmlt.tv/">Полная программа передач</a></div></div><script type="text/javascript">document.onload = i_show_tv4("windows-1251");</script>
<!--Информер сайта телепередач tv.cmlt.tv-->
</center>

</div></div>


	   <div class="tabCont" id="third"><div class="tabContainer">

<a style="color:white">Введите слово или фразу для поиска на нашем сайте</a><BR>
						<form action="/index.php?name=search" name="seatchform" method="post">
							<input type="hidden" name="do" value="search" />
							<input type="hidden" name="subaction" value="search" />
							<input name="story" id="story" value="Что ищем?" onblur="if(this.value=='') this.value='Что ищем?';" onfocus="if(this.value=='Что ищем?') this.value='';" type="text" size="38" maxlength="100" />
							<a href="java script:document.seatchform.submit();" title="Поиск" class="btn"><img src="{THEME}/images/spacer.gif" alt="Поиск" /></a>
						</form>
</div></div>

<!--КОНЕЦ ТАБОВ-->

main.css -

.wrapper {
	margin: 0 auto;
	min-width: 200px;
	text-align: left;

}

* HTML .wrapper { width: expression(document.body.clientWidth > 990 ? "90%" : "990px") }

/*dleft, dright*/
.dleft, .dright { background-position: left; background-repeat: repeat-y; background-color: transparent; }
.dright { background-position: right; }

.topheader, .topheader .wrapper, .topheader .dleft, .topheader .dright {height: 60px;}
.topheader { background: #efefe7 url("../images/topheader.pn") repeat-x left top; }
.topheader .dleft { background: transparent url("../images/topheader_left.pn") no-repeat 152px top;;}
.topheader .dright { padding-right: 22px; background: transparent url("../images/topheader_right.pn") no-repeat right top; }

.headerblue, .headerblue .dright {height: 120px; display: inline;}		
.headerblue { background: #5ca3c8 url("../images/headerblue.pn") repeat-x left top; }
.headerblue .hblueleft { background: transparent url("../images/hblueleft.jp") no-repeat left top; }
.headerblue .wrapper { background: #5ca3c8 url("../images/headerblue.pn") repeat-x left top; }
.headerblue .dleft { background: transparent url("../images/headerblue_left.jp") no-repeat left top; }
.headerblue .dright { background: transparent url("../images/headerblue_line.pn") no-repeat 90% top; }

.tabsc {
overflow: hidden;
float:left;

}

.tabsContent  {
	   width: 420px;
	   margin-top: 0px 0 5 0;

}

ul.tabNavigation {
	   list-style: none;
	   margin: 11px 0 5px 0;
	   padding: 0;

}

ul.tabNavigation li {
	   display: inline;
}

ul.tabNavigation li a {
	   padding: 1px;
	   background-color: #eae7d5;
	   font:2px verdana;
	   font-weight:bold;
	   border:1px solid #fefefd;
	   color: #2e5765;
	   text-decoration: none;

}

ul.tabNavigation li a.selected,

ul.tabNavigationli a:hover {
	   background-color: #5b98be;
	   border:1px solid #fefefd;
	   color: #fff;
	   padding-top: 1px;

}

ul.tabNavigation li a:focus {
	   outline: 0;
}

.tabCont {
	   border: 1px solid #5ca3c8;

}

.tabContainer {
	   background-color: #5ca3c8;
	   min-height: 90px;
	   color: #5ca3c8;
	   padding: 1px;
	   border: 1px solid #5ca3c8;

}

Justnewone · November 2, 2011

Вот бы еще ссылку, оченно не хочется копипастить код.

UPD

у .webmacter почему-то не вижу флоата.

Текст может не помещаться, потому что .tabsContent {width: 420px;} в сумме с шириной логотипа может не помещаться.

montuk · November 2, 2011

Вот бы еще ссылку, оченно не хочется копипастить код.
UPD
у .webmacter почему-то не вижу флоата.
Текст может не помещаться, потому что .tabsContent {width: 420px;} в сумме с шириной логотипа может не помещаться.

какую ссылку и что такое копипастить код? я просто новчек еще в этом, непонимаю некоторых терминов

ктстати класс .webmacter вообще нигде не описан :unsure: может быть в этом проблема? по поводу размеров я уже все перепробовал нивкакую нехочет

и поповоду ".tabsContent {width: 420px;}" я непрально выразился, когда всетаки получается с права поставить то половина текста в низ под логотип уходит а первая остаётся справа но + все кнопки навигации "ul.tabNavigation" вкучу все собираются но находятся справа <_<

ceil100 · November 2, 2011

ссылку на страничку

montuk · November 2, 2011

ссылку на страничку

http://korkinocity.ru/

Justnewone · November 2, 2011

.webmacter{float:left;}
.tabsContent {float: left;}
.topmenu {clear: both;}

ceil100 · November 2, 2011

так что-ли?


.headerblue .wrapper {
    background: url("../images/headerblue.pn") repeat-x scroll left top #5CA3C8;
    overflow: hidden;
}
.tabsContent {
    float: left;
    width: 420px;
}
a.webmacter {
    color: #5794BA;
    float: left;
    text-decoration: none;
    width: 300px;
}

Cubka · November 2, 2011

Добавь свойства классу webmacter:

.webmacter{ float: left; margin: 10px;}

и у класса .tabsContent поставь ширину больше, например 620рх.

ceil100 · November 2, 2011

целых два решения вам

montuk · November 2, 2011

все работает ураа :yahoo: попробовал вариант Justnewone, и сразуже получилось) сенк всем

Nanto · November 2, 2011

Ничего не понял!

У Вас там:

1 картинка обёрнутая в строчную ссылку

1 список

1 блок вложенный в другой

Чего выравнивать-то?

Кстати, float работает как надо

montuk · November 2, 2011

.webmacter{float:left;}
.tabsContent {float: left;}
.topmenu {clear: both;}

а как теперь сделать чтобы баннер в самом верху по середине стоял?

все разобрался нужно было удалить class="webmacter" у баннера.

Sign In

Блок под блоком

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information