оформление текста - HTML и CSS

NiCola999 · 13.07.2011, 22:27

нужно таким образом оформить текст. Буквицу я сделал, а вот как выровнять текст по краю буквы? и с последней буквой тоже не понял. Пока только идея использовать тег pre

NiCola999 · 14.07.2011, 10:42

up.......................

MrJenika · 14.07.2011, 18:24

можно первую и последнюю букву нарисовать и использовать как фон, но это когда известно точное количество текста внутри.
Ну а текст внутри выравнивать с помощью margin-left для каждой строки.
Ничего другого пока в голову не приходит.

NiCola999 · 14.07.2011, 21:18

картинки использовать нельзя

NiCola999 · 14.07.2011, 23:03

решил задачу сл. образом:

html

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html14/strict.dtd">
<html>
 <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <link rel = "stylesheet" type = "text/css" title = "Style" href = "css/style.css" media = "screen">
  <title>Task</title>  
 </head>
 <body>	
	<div id = "block">
	<div class = "first-letter">A</div>
	<div class = "text">
<pre>The Developer Program offers a range of technical
   resources and support for developers and IT
    professionals innovating. Power your 
     development from concept to market with
      technical guidance and information from 
       engineers and experts. Access pre-release 
        versions of the latest software.</pre></div>
	<div class = "last-letter">]</div>
	</div>
	</body>
</html>

CSS:

Код:

*{
	margin: 0;
}

pre {		
	font-family: Verdana;
	font-size: 14px;		
}

div#block{	
	width: 500px;	
	height: 200px;
	margin: 50px 200px;
	padding: auto;
}

div.first-letter{	
	font-size: 162px;
	padding-top: 18px;
	font-family: Arial, serif;
	width: 80px;
	float: left;		
}

div.text{
	padding-top: 45px;
	width: 360px;	
	float: left;		
}

div.last-letter{	
	font-size: 162px;	
	font-family: Arial, serif;
	width: 60px;	
	float: left;			
}

вроде всё хорошо, но при уменьшении браузером наблюдается сдвиг

в чем может быть дело ?

mynameisharry · 15.07.2011, 15:56

Цитата:

Сообщение от NiCola999

решил задачу сл. образом:

вроде всё хорошо, но при уменьшении браузером наблюдается сдвиг

в чем может быть дело ?

под тремя браузерами затестил уменьшение/увеличение - никаких признаков сдвига не обнаружено.

в каком браузере такая беда?

NiCola999 · 15.07.2011, 17:22

Google Chrome 12.0.742.122

14.07.2011, 18:24	#3
MrJenika Форумчанин Регистрация: 07.09.2009 Сообщений: 361	можно первую и последнюю букву нарисовать и использовать как фон, но это когда известно точное количество текста внутри. Ну а текст внутри выравнивать с помощью margin-left для каждой строки. Ничего другого пока в голову не приходит. webinmd.com

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Оформление текста	Максим139	Помощь студентам	1	19.03.2011 19:22
оформление приложения	Za4em	Помощь студентам	0	26.04.2010 23:46
оформление	FIIR	Помощь студентам	1	16.06.2008 20:40
оформление текста	eks-s	Общие вопросы Delphi	4	25.04.2008 13:52

14.07.2011, 10:42	#2
NiCola999 Не Участник клуба Регистрация: 29.10.2009 Сообщений: 1,456	up.......................

14.07.2011, 21:18	#4
NiCola999 Не Участник клуба Регистрация: 29.10.2009 Сообщений: 1,456	картинки использовать нельзя

15.07.2011, 17:22	#7
NiCola999 Не Участник клуба Регистрация: 29.10.2009 Сообщений: 1,456	Google Chrome 12.0.742.122