divы как сложно с ними (проблема с размерами)

serjico · February 13, 2009

создал контейнер div определенной ширины содержащий другие divы

divы описаны в css и распологаются так div c borderом только с низу и float к правому краю

потом div c полным borderом с float к правому краю

несколко раз повторяется

и div c borderом только с низу на оставшийся длине

——————————

вот здесь и проблема как это зделать

последний div растягивается на весь родительский div

——————————

помогите пожалуйста

s0rr0w · February 13, 2009

последний div растягивается на весь родительский div

Убери у него float

serjico · February 13, 2009

вот стили

		div#kb {height:20px; width:100%;}
		div#pk {height:19px; border-bottom:1px solid #0066FF;  width:5px; float:right;}
		div#sk {height:18px; font:14px bold "Verdana, Arial, Helvetica, sans-serif"; border-top: 1px solid #0066FF; border-left:1px solid #0066FF; border-right:1px solid #0066FF; border-bottom:#00FFFF; background-color:#00ffff; float:right;}
		div#lk {height:18px; font:14px Verdana, Arial, Helvetica, sans-serif; border: 1px solid #0066FF; background-color:#00FFFF; float:right;}
		div#lk:hover {background-color:#0066ff;}
		div#zk {height:19px; border-bottom:1px solid #0066FF; width:auto; }

вот страница

		<div id="kb" align="right">
			   <div id="pk"> </div>
			   	<div id="lk"> слон </div>
			   <div id="pk"> </div>
				<div id="lk"> кот </div>
			   <div id="pk"> </div>
				<div id="sk"> пёс </div>
			   <div id="pk"> </div>
				<div id="lk"> мышь </div>
			   <div id="pk"> </div>
				<div id="lk"> глист </div>
			   <div id="zk"> </div>
		</div>

задумывалось что вроде меню (набросок)

div id="zk" - во весь родителя "kb"

serjico · February 13, 2009

c ним и без всеравно всё подчеркивает

NuShiKo · February 15, 2009

меню проще сделать списком

вот такое как у тебя:

стили

#menu {float:right;}
ul {border: 0; margin:0; padding:0;}
ul li {display:inline; list-style:none; border: 0; margin:0; padding:0;}
li a:link, a:visited {font: 14px Verdana, sans-serif; text-decoration: none; color: black; background: #00FFFF; border: 1px solid #0066FF; margin:0; padding: 0 3px;}
li a:hover, a:active {background: #0066ff;}

html

<div id="menu">
<ul>
<li><a href="#">слон</a></li>
<li><a href="#">кот</a></li>
<li><a href="#">пёс</a></li>
<li><a href="#">мышь</a></li>
<li><a href="#">глист</a></li>
</ul>
</div>

И вообще необязательно все дивы отдельно позиционировать. Просто кладешь их все в один большой див и его уже float:right; а маленьким внутри него уже назначаешь бордеры и все прочее.

serjico · February 16, 2009

меню проще сделать списком
...
И вообще необязательно все дивы отдельно позиционировать. Просто кладешь их все в один большой див и его уже float:right; а маленьким внутри него уже назначаешь бордеры и все прочее.

мне хотелось сделать закладки как в винде

dber · February 16, 2009

мне хотелось сделать закладки как в винде

о каких закладках na говоришь? приведи пример)

serjico · February 16, 2009

как у своиства компьютера

dber · February 16, 2009

подключишь библиотечку jquery будут еще и вкладочки меняться))

<html>
<head><title>Панель администрирования сайта Мэйпл</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>
<script language="javascript" src="java/jquery.js"></script>
<!-- С окнами подтверждения все! -->
<script type="text/javascript" language="JavaScript">
page='catalogs_1cexchange';
modules='catalogs_1cexchange';
pref='catalogs_1cexchange_';



$("document").ready(function(){
	$("#"+pref+"p_our").click(function(){
		$("#"+pref+"s_all_profiles_sq").hide(0);
		$("div[id^='"+pref+"p']").css({backgroundColor:"white",color:"#000"});
		$("#"+pref+"p_our").css({backgroundColor:"gray",color:"white"});
		$("#"+pref+"s_our_sq").show(0);
	});
	$("div[id^='"+pref+"p']").hover(function(){
		$(this).css({borderBottom:"1px solid red"});
	},function(){
		$(this).css({borderBottom:"1px solid gray"});
	});
	$("#"+pref+"p_all_profiles").click(function(){
		$("#"+pref+"s_our_sq").hide(0);
		$("div[id^='"+pref+"p']").css({backgroundColor:"white",color:"#000"});
		$("#"+pref+"p_all_profiles").css({backgroundColor:"gray",color:"white"});
		$("#"+pref+"s_all_profiles_sq").show(0);
	});
});

</script>

<noscript>У вас выключена Java</noscript>

<form id="catalogs_1cexchange_form" action="" method="POST">
<h1>Траляля</h1>
<div style="width:100%;height:30px;clear:both;">
	<div id="catalogs_1cexchange_p_our" style="cursor:pointer;color:white;padding:0 20px;background-color:gray; height:100%; float:left; border:1px solid gray;text-align:center;">Задействованные профили</div>
	<div id="catalogs_1cexchange_p_all_profiles" style="cursor:pointer;padding:0 20px; height:100%; float:left; border:1px solid gray;text-align:center;">Все профили</div>
</div>


<div id="catalogs_1cexchange_s_all_profiles_sq" style="clear:both;display:none;border:1px solid gray;">
<h2 style="text-align:center;">Все профили</h2>
		содержимое
</div>

<div id="catalogs_1cexchange_s_our_sq" style="clear:both; border:1px solid gray;">
<h2 style="text-align:center;">Задействованные профили</h2>
		содержимое
</div>
</form>
</body>
</html>0.102368831635

NuShiKo · February 16, 2009

Можно еще сделать с помощью ssi или php.

Вот пример на ssi:

body { margin: 0; padding: 0; border: 0;}
#menu {float:right; margin: 5px 0 0 0; padding: 0; border: 0;}
ul {border: 0; margin:0; padding:0;}
ul li {display:inline; list-style:none; border: 0; margin:0; padding:0;}
li a:link, a:visited {font: 14px Verdana, sans-serif; text-decoration: none; color: black; background: #00FFFF; border: 1px solid #0066FF; margin:0; padding: 0 3px;}
li a:hover, a:active {background: #ffffff; }
li a.here {font: 14px Verdana, sans-serif; text-decoration: none; color: black; background: #00FFFF; border: 1px solid #0066FF; background: #0066ff; border-bottom: #0066ff;margin:0; padding: 0 3px;}
#content {position: absolute; top: 22px; width:100%; background-color: #0066ff;}

<div id="menu">
<ul>
<li><!--#if expr="$DOCUMENT_URI!=/\/2.html/" --><a href="/2.html">слон</a>
	<!--#else --><a class="here">слон</a><!--#endif --></li>
<li><!--#if expr="$DOCUMENT_URI!=/\/3.html/" --><a href="/3.html">кот</a>
	<!--#else --><a class="here">кот</a><!--#endif --></li>
<li><!--#if expr="$DOCUMENT_URI!=/\/4.html/" --><a href="/4.html">пёс</a>
	<!--#else --><a class="here">пёс</a><!--#endif --></li>
<li><!--#if expr="$DOCUMENT_URI!=/\/5.html/" --><a href="/5.html">мышь</a>
	<!--#else --><a class="here">мышь</a><!--#endif --></li>
<li><!--#if expr="$DOCUMENT_URI!=/\/6.html/" --><a href="/6.html">глист</a>
	<!--#else --><a class="here">глист</a><!--#endif --></li>
</ul>
</div>
<div id="content">
<p>парам пам пам</p>
</div>

Естественно, при данном конкретном коде, файл должен называться 2 или 3 или 4 или 5 или 6.html, лежать в корневой директории, и html файлы должны обрабатываться как использующие ssi, то есть надо либо переименовать их в .shtml (и в коде тоже), либо прописать в файле .htaccess директивы:

AddType text/html .html

AddHandler server-parsed .html

и тогда файлы .html будут проверяться на наличие ssi

Edited February 16, 2009 by NuShiKo

Sign In

divы как сложно с ними (проблема с размерами)

Question

serjico

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

s0rr0w

Link to comment

Share on other sites

serjico

Link to comment

Share on other sites

serjico

Link to comment

Share on other sites

NuShiKo

Link to comment

Share on other sites

serjico

Link to comment

Share on other sites

dber

Link to comment

Share on other sites

serjico

Link to comment

Share on other sites

dber

Link to comment

Share on other sites

NuShiKo

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information