У меня есть основная проблема с пониманием позиционирования CSS - PullRequest
1 голос
/ 06 июля 2010

Редактировать: Хорошо, это то, что работает.Возможно, он не «правильный», но 1) он отображается правильно и 2) он проверяется на W3C.Кажется, что я должен сделать все позиционирование абсолютным и добавить позиционирование ко всем элементам div, кроме тех, у которых есть набор полей, где я должен добавить позицию в набор полей.Не стесняйтесь исправить это, если вы думаете, что я неправ, но «это работает для меня»!Ура!Yipee!Наконец!Много +1 со всех сторон и спасибо всем, кто помог.


Редактировать: щедрость достается тому, кто сможет опубликовать отредактированный HTML, который отображается как скриншот Delphi.


Я использую Borland Delphi для создания генератора HTML-форм.Пользователь может перетаскивать компоненты для создания файла, и когда он счастлив, он может генерировать HTML (я нажимаю кнопку «Отправить» в конце своей формы).

Поскольку у меня есть абсолютная позиция каждого элемента управлениякогда я генерирую, я хочу указать абсолютные позиции в CSS.Я думал, что это означает, что я должен использовать position: fixed, но это не выглядит правильно, и при этом не абсолютно.

Что я делаю неправильно?(HTML проверяется в W3C)

Вот очень простой базовый пример, который можно увидеть при разработке формы в программе Delphi
alt text

И вот он в MSIE 8 (с фиксированной позицией) alt text

И снова с абсолютной позицией alt text

И, наконец, вот HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Input data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
<div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:40px; left:40px; width: 857px; height: 441px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:64px; left:56px; width: 753px; height: 369px;">
<legend></legend>
<div class="TLabel" id="Label1" style="position: absolute; top:88px; left: 80px; width: 32px; height: 13px;">Label1</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:80px; left: 72px; width: 121px; height: 21px;"><input type="text" name="Edit1" value="an edit bx"></div>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:88px; left: 80px; width: 97px; height: 17px;">CheckBox1<input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:145px; left: 137px; width: 145px; height: 21px;">
  <select size ="1" name="ComboBox1">
    <option value="one" selected="selected">one    </option>
    <option value="two">two    </option>
    <option value="three">three    </option>
</select>
</div>
<div class="TRadioGroup" id="RadioGroup1">
<fieldset style="position: absolute; top:144px; left: 136px; width: 185px; height: 105px;"><legend>RadioGroup1</legend>
      red: <input type="radio" name="RadioGroup1" value=""><br>
      white: <input type="radio" name="RadioGroup1" value="" checked><br>
      blue: <input type="radio" name="RadioGroup1" value=""><br>
</fieldset>
</div>
</fieldset>
</div>
</fieldset>
</div>
<div><input type="submit" name="submitButton" value="Submit" style="position:relative; top:25px; left: 50%;"></div>
</form>
</body>
</html>

Редактировать:Баунти получает тот, кто может опубликовать отредактированный HTML, который отображается как скриншот Delphi.


Редактировать: Хорошо, это то, что работает.Возможно, он не «правильный», но 1) он отображается правильно и 2) он проверяется на W3C.Кажется, что я должен сделать все позиционирование абсолютным и добавить позиционирование ко всем элементам div, кроме тех, у которых есть набор полей, где я должен добавить позицию в набор полей.Не стесняйтесь исправить это, если вы думаете, что я неправ, но «это работает для меня»!Ура!Yipee!Наконец!Много +1 со всех сторон и спасибо всем, кто помог.

Ответы [ 8 ]

8 голосов
/ 10 июля 2010

position: fixed означает top:, right:, bottom: и left: относительно окна браузера, и элемент не прокручивается вместе со страницей.

position: relative означает top:, right:, bottom: и left: относительно того, где верхняя, правая, нижняя и левая стороны элемента были бы , если бы не было никакого позиционирования. также означает, что любые абсолютно позиционированные дочерние элементы размещаются относительно этого элемента.

position: absolute означает top:, right:, bottom: и left: относительно сторон ближайшего относительно позиционированного элемента, который его содержит. Если он не находится внутри относительно позиционированного элемента, position: absolute работает так, как большинство людей ожидают вначале: top:, right:, bottom: и left: относительно краев страницы.


То, что вы пытаетесь сделать, я думаю, вы должны расположить каждый элемент следующим образом

<div style="position: absolute; left: {X}px; top: {Y}px">

где {X} и {Y} заменяются координатами верхнего левого угла элемента, как это отображается в конструкторе форм.

3 голосов
/ 10 июля 2010

Ваша проблема в том, что абсолютное позиционирование относительно родительского с абсолютным позиционированием. Если родитель не находится в абсолютном положении, он будет искать дерево, пока не найдет абсолютно позиционированный элемент или тело. Просто: убедитесь, что все абсолютно позиционировано, включая форму и элементы div.

1 голос
/ 12 июля 2010

Недостаточно просто установить position в абсолютное значение, в основном, чтобы зафиксировать позицию, которую вы просто должны играть со стилями элементов left и top.

Вот фиксированный HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Input data</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
<div class="TGroupBox" id="GroupBox1">
<fieldset style="position: absolute; top:40px; left:40px; width: 857px; height: 441px;">
<legend>GroupBox1</legend>
<div class="TPanel" id="Panel1">
<fieldset style="position: absolute; top:10px; left:10px; width: 753px; height: 369px;">
<div class="TLabel" id="Label1" style="position: absolute; top:35px; left: 80px; width: 32px; height: 13px;">Label1</div>
<div class="TEdit" id="Edit1" style="position: absolute; top:35px; left: 200px; width: 121px; height: 21px;"><input type="text" name="Edit1" value="an edit bx"></div>
<div class="TCheckBox" id="CheckBox1" style="position: absolute; top:35px; left: 420px; width: 97px; height: 17px;"><input type="checkbox" name="CheckBox1" value="CheckBox1Checked"> CheckBox1</div>
<div class="TComboBox" id="ComboBox1" style="position: absolute; top:145px; left: 80px; width: 145px; height: 21px;">
<select size ="1" name="ComboBox1">
<option value="one" selected="selected">one    </option>
<option value="two">two    </option>
<option value="three">three    </option>
</select>
</div>
<div class="TRadioGroup" id="RadioGroup1">
<fieldset style="position: absolute; top:145px; left: 250px; width: 185px; height: 105px;"><legend>RadioGroup1</legend>
red: <input type="radio" name="RadioGroup1" value=""><br>
white: <input type="radio" name="RadioGroup1" value="" checked><br>
blue: <input type="radio" name="RadioGroup1" value=""><br>
</fieldset>
</div>
</fieldset>
</div>
</fieldset>
</div>
<div><input type="submit" name="submitButton" value="Submit" style="position:relative; top:28px; left: 50%;"></div>
</form>
</body>
</html>
1 голос
/ 11 июля 2010

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Input data</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<body>
<form action="http://localhost/a_submitted.php" method="post">
    <div class="TGroupBox" id="GroupBox1">
        <fieldset style="">
            <legend>GroupBox1</legend>
            <div class="TPanel" id="Panel1">
                <fieldset style="width: 600px; height: 250px; margin: 20px 50px 50px 20px; padding: 20px; padding-left: 50px">
                    <div class="TLabel" id="Label1" style="position: absolute; left: 100px; top: 100px;">Label1</div>
                    <div class="TEdit" id="Edit1" style="position: absolute; left: 200px; top: 100px;"><input type="text" name="Edit1" value="an edit bx"></div>
                    <div class="TCheckBox" id="CheckBox1" style="position: absolute; left: 400px; top: 100px;">CheckBox1 <input type="checkbox" name="CheckBox1" value="CheckBox1Checked"></div>
                    <div class="TComboBox" id="ComboBox1" style="position: absolute; left: 100px; top: 150px;">
                        <select size ="1" name="ComboBox1" style="width: 200px;">
                            <option value="one" selected="selected">one</option>
                            <option value="two">two</option>
                            <option value="three">three</option>
                        </select>
                    </div>
                    <div class="TRadioGroup" id="RadioGroup1" style="position: absolute; left: 380px; top: 150px;">
                        <fieldset style="">
                            <legend>RadioGroup1</legend>
                                <input type="radio" name="RadioGroup1" value=""> red<br>
                                <input type="radio" name="RadioGroup1" value="" checked> white<br>
                                <input type="radio" name="RadioGroup1" value=""> blue<br>
                        </fieldset>
                    </div>
                </fieldset>
            </div>
        </fieldset>
    </div>
    <div><input type="submit" name="submitButton" value="Submit" style=""></div>
</form>
</body>
</html>
1 голос
/ 10 июля 2010

Я бы сказал, что проблема в значениях top и left, которые вы даете вложенным абсолютно позиционированным элементам.

Для абсолютно позиционированного родителя и потомка координаты потомка относительно родителя. Вы можете проверить этот факт здесь . Поиграйте со значениями и убедитесь сами.

Другая проблема с вашим кодом заключается в том, что для элементов формы не следует устанавливать ширину / высоту для содержащихся элементов. Вы должны установить его на самом элементе формы.

Редактировать: Я пытался вычислить правильные значения. Это не идеально, поскольку у меня нет значений из программы delphi, а используемые вами значения не являются значениями, данными программой delphi, как видно из вашего кода и скриншоты. Смотрите результат здесь .

1 голос
/ 10 июля 2010

Я на самом деле только что столкнулся с этой проблемой.Если div абсолютно позиционирован и вложен в другой div, который не является абсолютно позиционированным, он будет позиционирован относительно родительского div.

В вашем коде, например, Label1 абсолютно позиционировано, но этовнутри Panel1, который не является абсолютно позиционированным.

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

1 голос
/ 06 июля 2010

Чтобы помочь вам понять позиционирование CSS: http://www.w3schools.com/css/css_positioning.asp

0 голосов
/ 10 июля 2010

Ваша проблема в том, что IE - нелепый и нестабильный браузер.Он редко отображает страницы правильно и обычно имеет проблемы со страницами, которые работают в любом другом браузере.Попробуйте использовать chrome, safari, opera или firefox.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...