Что такое надежный способ делать побочные эффекты в HTML?

Я публикую много текста в Интернете и даже написал system для форматирования HTML для меня. Теперь у меня есть проблема: я хочу делать ссылки в HTML-страницах так же, как книги. Просто для объяснения, боковые стороны - это те заметки на полях рядом с основным текстом.Что такое надежный способ делать побочные эффекты в HTML?

Кто-нибудь знает о хорошем, надежном способе их выполнения - желательно с использованием обычного CSS, а не JavaScript. Благодаря!

источник

2009-04-04 Dmitri Nesteruk

Хорошо, сделал это много более браузера дружественного (FF3, IE7/8, Chrome):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html> 
<head> 
    <title>Layout</title> 
    <style type="text/css"> 
    html, body, #wrapper { height: 100%; margin: 0; padding: 0; } 
    body { background-color: #666; width: 100%; text-align: center; font-family: Arial, sans-serif; } 
    #wrapper { width: 960px; margin: 0 auto; background: white; padding: 20px 0; } 
    #page { width: 660px; margin: 0 auto; text-align: justify; } 
    div.sidenote-left { float: left; margin-left: -150px; } 
    div.sidenote-right { float: right; margin-right: -150px; } 
    div.sidenote-left, div.sidenote-right { width: 150px; text-align: left; } 
    div.sidenote-left div, div.sidenote-right div { margin: 0 10px; border: 1px solid #666; padding: 4px; } 
    </style> 
</head> 
<body> 
<div id="wrapper"> 
<div id="page"> 
<p>In the 90s we saw the rise of GUIs (yes I know Macs were around in the 80s but GUIs became the standard for everyone once Windows took hold). This transition had many casualties like Lotus 1-2-3 (which was basically killed by Excel on Windows) and Wordperfect (MS Word killed it). Now you can argue that MS had the inside track since they also produced Windows and you'd be right but beyond that I think MS adjusted to the change quicker than anyone else.</p> 
<p>Borland was still an agile little company back then. It adjusted and took its highly successful Turbo Pascal and created Delphi.</p> 
<div class="sidenote-left"><div>See Chapter 7 for further explanation</div></div> 
<p>Now truly compiled languages ruled the roost in the 1990s with the exception of one little upstart: Java, which was something basically new. It was sorta compiled, sorta interpreted (being compiled into machine-independent bytecode that ran on a virtual machine). I personally think that the rise of both Java and Netscape scared the absolute bejesus out of Microsoft in the late 90s.</p> 
<div class="sidenote-right"><div>See Chapter 9 for further explanation</div></div> 
<p>Borland adjusted reasonably well producing what was really the first really successful Java IDE in JBuilder.</p> 
<p>They were fending off a resurgent Microsoft who also produced successive versions of Visual Studio that (imho) were years ahead of their time in the late 90s. I can remember coding Visual C++ with MTS (microsoft Transaction Server) DCOM objects over 10 years ago and that was a precursor to the modern application server platform we have today. Remote debugging and the like were things that were (or at least seemed) light years ahead on Visual Studio.</p> 
</div> 
</div> 
</body> 
</html>

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

div.sidenote-left { position: absolute; margin-left: -150px; } 
div.sidenote-right { position: absolute; margin-left: 660px; }

но он по-прежнему выбирает текст.

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

источник

2009-04-04 14:03:16 cletus

Единственная проблема заключается в том, что, когда вы выбираете между абзацами с боковым звеном в середине, вы также получаете боковой снимок. Однако я не знаю, как это можно вылечить, кроме как с помощью javascript. (В готовом доме вы можете вытащить его в абсолютно позиционированный объект.) –

Замечательно! Как адаптировать это к гибкой ширине веб-страницы? –

-1

Если вы ленивы, используйте рамки CSS! Одним из самых простых фреймворков, которые вы можете использовать, является 960.gs. Это поможет вам выполнить именно то, что вы пытаетесь сделать за считанные минуты.

источник

2009-04-04 21:46:37 fivetwentysix

Что такое надежный способ делать побочные эффекты в HTML?

ответ

Смежные вопросы