Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 13.07.2011, 22:27   #1
NiCola999
Не
Участник клуба
 
Регистрация: 29.10.2009
Сообщений: 1,456
По умолчанию оформление текста

нужно таким образом оформить текст. Буквицу я сделал, а вот как выровнять текст по краю буквы? и с последней буквой тоже не понял. Пока только идея использовать тег pre
Изображения
Тип файла: png preview.png (53.4 Кб, 80 просмотров)
NiCola999 вне форума Ответить с цитированием
Старый 14.07.2011, 10:42   #2
NiCola999
Не
Участник клуба
 
Регистрация: 29.10.2009
Сообщений: 1,456
По умолчанию

up.......................
NiCola999 вне форума Ответить с цитированием
Старый 14.07.2011, 18:24   #3
MrJenika
Форумчанин
 
Аватар для MrJenika
 
Регистрация: 07.09.2009
Сообщений: 361
По умолчанию

можно первую и последнюю букву нарисовать и использовать как фон, но это когда известно точное количество текста внутри.
Ну а текст внутри выравнивать с помощью margin-left для каждой строки.
Ничего другого пока в голову не приходит.
MrJenika вне форума Ответить с цитированием
Старый 14.07.2011, 21:18   #4
NiCola999
Не
Участник клуба
 
Регистрация: 29.10.2009
Сообщений: 1,456
По умолчанию

картинки использовать нельзя
NiCola999 вне форума Ответить с цитированием
Старый 14.07.2011, 23:03   #5
NiCola999
Не
Участник клуба
 
Регистрация: 29.10.2009
Сообщений: 1,456
По умолчанию

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

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;			
}
вроде всё хорошо, но при уменьшении браузером наблюдается сдвиг

в чем может быть дело ?
Изображения
Тип файла: png 1.PNG (13.4 Кб, 77 просмотров)
Тип файла: png 2.PNG (4.6 Кб, 70 просмотров)

Последний раз редактировалось NiCola999; 14.07.2011 в 23:13.
NiCola999 вне форума Ответить с цитированием
Старый 15.07.2011, 15:56   #6
mynameisharry
Новичок
Джуниор
 
Регистрация: 15.07.2011
Сообщений: 1
По умолчанию

Цитата:
Сообщение от NiCola999 Посмотреть сообщение
решил задачу сл. образом:

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

в чем может быть дело ?
под тремя браузерами затестил уменьшение/увеличение - никаких признаков сдвига не обнаружено. в каком браузере такая беда?
mynameisharry вне форума Ответить с цитированием
Старый 15.07.2011, 17:22   #7
NiCola999
Не
Участник клуба
 
Регистрация: 29.10.2009
Сообщений: 1,456
По умолчанию

Google Chrome 12.0.742.122
NiCola999 вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Оформление текста Максим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