| |
|
|
| |
<body>
<p>Первая строка</p>
<p>Вторая строка</p>
<p><a href="/"><img src="logo.gif" width="228" height="228" alt="Альттекст" /></a></p>
</body>
|
В третьей строке код вывода логотипа, который появляется на странице после вывода двух первых строк.
Можно ли сделать так, чтобы логотип на странице был с самого верха, тогда как код его вывода оставался внизу (путем какого-либо видоизменения этого кода)? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(09.03.2012 в 22:25)
| | | Только скриптом, который можно навесить на событие onload тега <IMG>.
Владимир55, лично вам я уже раз -цать здесь писал: НЕ НАДО использовать атрибуты, если есть правила стиля.
<img src="logo.gif" width="228" height="228" alt="Альттекст" /> --- неправильно
<img src="logo.gif" style="width: 228px; height: 228px" alt="Альттекст" /> --- верно
|
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: ЯСА
(09.03.2012 в 23:43)
| | | я уже раз -цать здесь писал
Я Вас -цать первый раз благодарю!
(Пока не получается сразу всё учесть, не сердитесь. Использую редактор, который формирует код как хочет. Когда фукциональность отлажена, вылизываю код под валидатор.
За тюканье спасибо - в конце концов дойдет). | |
| |
|
|
| |
|
|
| |
для: Владимир55
(10.03.2012 в 00:03)
| | | и выкиньте, наконец, Фронтпейдж или чем вы там редактируете... | |
| |
|
|
| |
|
|
| |
для: ЯСА
(09.03.2012 в 23:43)
| | | Для этого есть какие-либо еще причины?
[поправлено модератором] | |
| |
|
|
| |
|
|
| |
для: The Electronic Cat
(10.03.2012 в 20:20)
| | | [поправлено модератором] | |
| |
|
|
| |
 24.3 Кб |
|
| |
для: ЯСА
(10.03.2012 в 21:48)
| | | Только скриптом, который можно навесить на событие onload тега <IMG>.
Скриптовые решения тут применять бы не хотелось.
Попробовал решить проблему так:
<style type="text/css">
p:last-child {
position: absolute;
top: 0;
}
p:first-child {
margin-top:240px;
}
</style>
|
Работает нормально, но только в Хроме, Опера и в Сафари. В ИЕ и в ФФ исполняется неверно - просто отступает сверху.
Есть ещё одно решение, и оно нормально исполняется во всех браузерах - я его код приведу ниже. Но там встает другая проблема - если далее по тексту есть таблица, то она повиспет посередине логотипа (скриншот).
Можно ли сделать так, чтобы все строки кода, кроме вывода логотипа, выполнялись в естественном порядке? В том числе и таблицы?
<title>Вывод логотипа</title>
<style type="text/css">
p {position:relative;top:228px;}
</style>
</head>
<body>
<p>Первая строка</p>
<p>Вторая строка</p>
<div align="center">
<table style="text-align: center; background-color: #FCEBC7; border: 5px solid #FF00FF; width: 980px">
<tr>
<td>Текст в таблице</td>
</tr>
</table>
</div>
<div style="position:absolute; top:0px; left:0px; width:228px; height:228px"><a href="/"><img src="logo.gif"></a></div>
|
Попутно: как отцентрировать логотип? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(10.03.2012 в 23:21)
| | | Отцентрировать можно так:
<div style="position:absolute; top:0px; left:0px; width:100%;text-align:center;"><a href="/"><img src="ava.png" width="228px" height="228px"></a></div>
А вот добиться того, чтобы другие элементы не приходилось смещать, каждый по отдельности, без скрипта вряд ли возможно | |
| |
|
|
| |
|
|
| |
для: The Electronic Cat
(11.03.2012 в 11:44)
| | | Большое спасибо! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(09.03.2012 в 22:25)
| | |
<body>
<p style="padding-top:228px;">Первая строка</p>
<p>Вторая строка</p>
<p style="position:absolute;top:0;left:0"><a href="/"><img src="logo.gif" width="228" height="228" alt="Альттекст" /></a></p>
</body>
|
| |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.03.2012 в 08:56)
| | | Кстати, да, мне тоже это сразу пришло в голову. Не написал, потому что подумал - абсолютное позиционирование приведет к наложению элементов друг на друга.
На мысль, что можно и верхний элемент сместить, меня не хватило) | |
| |
|
|
| |
|
|
| |
для: AlexSol
(11.03.2012 в 08:56)
| | | Просто замечательно получилось!
Большое спасибо! | |
| |
|
|
| |
|
|
| |
для: Владимир55
(11.03.2012 в 12:26)
| | | Однако есть некая странность, с которой хотелось бы разобраться: если изменить нулевое значение top на любое другое, даже на top:1, и при этом существенно увеличить отступ первой строки, чтобы было достаточно места, то логотип всё равно проваливается вниз и воспроизводится не первым, а последним:
<body>
<p style="padding-top:300px;">Первая строка</p>
<p>Вторая строка</p>
<p style="position:absolute; top:1; left:0"><a href="/"><img src="logo.gif" style="width: 228px; height: 228px" alt="Альттекст" /> </a></p>
</body>
|
Странно, да? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(11.03.2012 в 13:10)
| | | ну.... 0 - это ноль. а 1 - это что? грамм? проццент? дюйм? в CSS около десятка единиц измерения. И если это не ноль, то их нужно указывать. | |
| |
|
|
| |
|
|
| |
для: Sfinks
(11.03.2012 в 14:31)
| | | Спасибо, именно в этом нюансе и было дело!
Как полагаете, не будет ли большой ошибкой указать px рядом с нулевым значением (0рх)? | |
| |
|
|
| |
|
|
| |
для: Владимир55
(11.03.2012 в 14:32)
| | | не будет. | |
| |
|
|
