Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: input text 100%

santaros

4.03.2011 - 20:40

Добрый день. Имеется страница, на которой есть два элемента.... расположены ровно друг на против друга. leftMenu слева, rightMenu справа.

Хочу вставить между ними элемент input text. Который бы располагался от конца левого элемента, к началу правого, тобишь на 100%.

Помогите пожалуйста это реализовать....
Пробовал следующий метод....
Указывал у div input элемента WIDTH: 100%; Но ничего не получилось... nput элеемент уехал сместив правый div элемент вниз...

.leftMenu {
	float:left;
}

.rightMenu {
	float:right;
}
.inputMenu {
	float:left;
	WIDTH: 100%;
}
.inputMenu  input{
	WIDTH: 100%;
}

<div class="leftMenu"> Что то слева</div>

<div class="inputMenu"><input name="desname" type="text" value=""></div>

<div class="rightMenu">Что то с права</div>

Спустя 8 минут, 51 секунда (4.03.2011 - 19:49) alex12060 написал(а):

Не, не получится.
Делаешь просто, прописываешь, например по 10% на левый и правый блок, а остальные 80% на центральный.

Спустя 5 минут, 58 секунд (4.03.2011 - 19:55) santaros написал(а):

плохо ((
по ~10% вообще не вариант... в моём случае.

А может быть как ни будь с помощью явы?
Ведь видел же где то, точно так же было реализовано...

Спустя 30 минут, 36 секунд (4.03.2011 - 20:25) alex12060 написал(а):

Ну ка давай, в панте нарисуй, как должно быть.
Может, я тебя не понимаю.

Все, въехал. Ща, попробую.

Спустя 6 минут, 58 секунд (4.03.2011 - 20:32) AntonMMF написал(а):

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

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Документ без названия</title>
</head>

<body>

<div class="content">

   <div class="leftMenu"> Что то слева</div>

   <div class="inputMenu"><input name="desname" type="text" value="" /></div>

   <div class="rightMenu">Что то с права</div>

</div>
</body>
</html>

style.css

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

div {
    border: none;
    top: 0px;
}

.leftMenu {
    position: absolute;
    width: 200px;
    left: 0px;
}

.rightMenu {
    position: absolute;
    right: 0px;
    width: 200px;
}

.inputMenu {
    position: relative;
    margin: 0 200px;
}

.inputMenu  input{
    width: 100%;
}

.content {
    width: 100%;
}

И ради бога, не юзайте табуляцию.

Спустя 7 минут, 20 секунд (4.03.2011 - 20:39) alex12060 написал(а):

Не, у меня чет не получается)

Спустя 38 минут, 28 секунд (4.03.2011 - 21:18) santaros написал(а):

AntonMMF
Что то не совсем получается (((

leftMenu и Input встали хорошо, а вот rightMenu либо выше либо ниже input.

Я правда top: 0px; не использовал. Для всех div в моём css его ну никак нельзя использовать.

Спустя 49 минут, 9 секунд (4.03.2011 - 22:07) AntonMMF написал(а):

Цитата (santaros @ 5.03.2011 - 00:18)

Я правда top: 0px; не использовал. Для всех div в моём css его ну никак нельзя использовать.

Что вам мешает использовать top: 0px; для конкретного элемента? Я его включил потому что у меня rigthMenu был ниже из-за того, что между контейнерами непонятно откуда появлялись несколько пикселей, а так как я приводил вам просто пример, то сделал top: 0px; для всех div.

style.css

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

div {
    border: none;
}

.leftMenu {
    position: absolute;
    width: 200px;
    left: 0px;
}

.rightMenu {
    position: absolute;
    right: 0px;
    width: 200px;
    top: 0px;
}

.inputMenu {
    position: relative;
    margin: 0 200px;
}

.inputMenu  input{
    width: 100%;
}

.content {
    width: 100%;
}

Быстрый ответ:

Здесь расположена полная версия этой страницы.