Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Как сверстать input

Автор: BAR23 12.2.2009, 22:09

Добрый вечер. Подскажыте если кнопка input есть загрузка файла. Как сверстать текстовой блок и кнопку, которую невидно smile

Иль ета работа не верстальщика?
http://htcs.teoriyagvaltu.net/project/DRIVER_PORTAL/add_image.html
Спасибо. Очень надо Ваш совет, что говорить заказчику.

Вот код:

Код


        <ul class="file">
            <li><input type="text" value="C:\" /></li> // а ету нужно забрать, но кнопка обзора не будет
            <li><input type="file"/></li> //ету нужно оставить
            <li><div class="one"><input type="submit" value="обзор" /></div></li> // не нужно когда 2 строка будет
            <li><div class="two"><input type="submit" value="изменить" /></div></li>
        </ul>

Автор: bars80080 12.2.2009, 22:26

Цитата(BAR23 @ 12.2.2009, 21:09

)

Подскажыте если кнопка input есть загрузка файла. Как сверстать текстовой блок и кнопку, которую невидно

ни фига не понятно. можете хотя бы в пять строчек расписать?

Автор: Violator 12.2.2009, 22:47

BAR23,
я вас правильно понял?

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
  <title></title>
  <style type="text/css">
    body {margin:0;padding:0;background:gray}
    input {margin:0;padding:0;}
    .upload {width:250px;height:22px;position:relative;}
    .text_field {width:170px;height:18px;position:absolute;left:0;z-index:3;}
    .file_field {height:22px;position:absolute;right:0;z-index:2;opacity:0;filter:alpha(opacity="0");}
    .upload_button {width:75px;height:22px;position:absolute;right:0;z-index:1;}
  </style>
</head>

<body>
  <div class="upload">
    <input class="text_field" readonly="" />
    <input class="file_field" type="file" size="1" />
    <input class="upload_button" type="image" src="path_to_button_image.gif" />
  </div>
</body>
</html>

Автор: WebMast 13.2.2009, 09:53

А может он просто не может убрать с поля зрения этот блок? Может нужно сделать display:none;?