Форум программистов
 
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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


Донат для форума - использовать для поднятия настроения себе и модераторам

А ещё здесь можно купить рекламу за 25 тыс руб в месяц! ) пишите сюда - alarforum@yandex.ru

Ответ
 
Опции темы
Старый 28.01.2011, 16:46   #1
XYLIGANXYL
Пользователь
 
Регистрация: 24.01.2011
Сообщений: 19
Репутация: 10
По умолчанию Как правильно разместить текст на сайте...

Очень долго сидел разбирался так и не смог понять как разместить текст (на картинке он по середине) а то при перемещение по странице он превращается в один столбик.Такая же проблема с текстом справа...
[HTML]<HTML>
<HEAD>
<TITLE>MTC</TITLE>
<link rel="stylesheet" type="text/css" href="1.css"/>
<img src="1.jpg"
</HEAD>
<BODY>
<p1><a href=".html"><span>Абонентам</span></a>
<p2><a href="2.html"><span>Vip-Клиентам</span></a>
<p3><a href="3.html"><span>Корпоративным клиентам</span></a>
<p4> Новости
<pre>Оборудование

Роуминг и зона обслуживания

Услуги и тарифы

Скидки и рекламные акции

МТС в регионах
</pre>
<pre><B>
28.04.2006</B>
Вниманию абонентов тарифного плана "Универсальный"
Информируем Вас о следующих изменениях в структуре исходящих вызовов Вашего
тарифного плана

25.04.2006 0912 - изменение тарифа
изменяеться стоимость звонков на короткий номер 0912

25.04.2006 Отменяется плата за любые входящие звонки!
С 25 апреля на тарифном плане "Униеврсальный" абсолютно ВСЕ входящие звонки!
стали бесплатными

25.04.2006 Безлимитные выходные для "ПРОФИ"- абонентов. Говори сколько хочешь!
Говорите с кем угодно,сколько угодно и о чем угодно- по выходным всё местные
и мобильнык звонки ничего не стоят!
</pre>
</<body>
</HTML>
Код:
p1 {padding: 5pt 500pt 10pt 5pt; background-color:#c0c0c0;align="center";position:absolute;top: 10px;left: 300px;}
p1 :hover {background: #ffa500;background-position: right top;color: #fff;}
p2 {color:black;background-color:#c0c0c0;position:absolute;top: 7px;left: 300px;}
p2 :hover {background: #ffa500;background-position: right top;color: #fff;}
p3 {color:black;position:absolute;top: -7px;left: 300px;}
p3 :hover {background: #ffa500;background-position: right top;color: #fff;}
p4 {padding: 5pt 10pt 40pt 5pt; background-color:#e6e6fa;color: #ff9900; position:absolute;top:130px;left: -895px;FONT-SIZE: 25pt}
pre {font-style:italic;color:#2a52be;text-decoration:underline;font-size:17px}
B {font-size:17px;background-color:#e6e6fa;float:left;}
Картинка как должно быть приложена.Кто сможет отпишите пожалуйста...
Изображения
Тип файла: jpg VAR2 (2).JPG (180.1 Кб, 66 просмотров)

Последний раз редактировалось XYLIGANXYL; 28.01.2011 в 21:56.
XYLIGANXYL вне форума   Ответить с цитированием
Старый 28.01.2011, 19:15   #2
JinglsOrg
Пользователь
 
Аватар для JinglsOrg
 
Регистрация: 27.01.2011
Адрес: Магнитогорск
Сообщений: 48
Репутация: 29
По умолчанию

для начала, если даты-события должны быть по середине, то ширина этой таблицы должна быть такой что бы влезли другие элементы.
Да вообще, не знаю как остальным, но я предпочитаю всегда и всё (в разумных конечно пределах) засовывать в div-элементы и их потом редактировать.
как бы пропишите float:left; в pre что бы элементы могли слева распологаться.
p.s.:незабудьте закрыть body )

Последний раз редактировалось JinglsOrg; 28.01.2011 в 19:34.
JinglsOrg вне форума   Ответить с цитированием
Старый 28.01.2011, 21:53   #3
XYLIGANXYL
Пользователь
 
Регистрация: 24.01.2011
Сообщений: 19
Репутация: 10
По умолчанию

Ни фига не получается разместить текст если можно то код или хотя бы теги какие прописать...
XYLIGANXYL вне форума   Ответить с цитированием
Старый 29.01.2011, 00:38   #4
JinglsOrg
Пользователь
 
Аватар для JinglsOrg
 
Регистрация: 27.01.2011
Адрес: Магнитогорск
Сообщений: 48
Репутация: 29
По умолчанию

Вот вы что-то поменяли и вообще непонятно стало)
Вы специально не закрываете <p1..4>?
float:left надо пременять к объекту <pre> и их у вас стало два - не есть хорошо, т.к. еcли менять стиль одного из них будет меняться и другой- учите !class=""!

вот по предыдущему варианту:
Код:
...
<style>
*{border:1px solid black;}
p1 {padding: 5pt 500pt 10pt 5pt; background-color:#c0c0c0;align="center";position:absolute;top: 10px;left: 300px;}
p1 :hover {background: #ffa500;background-position: right top;color: #fff;}
p2 {color:black;background-color:#c0c0c0;position:absolute;top: 7px;left: 300px;}
p2 :hover {background: #ffa500;background-position: right top;color: #fff;}
p3 {color:black;position:absolute;top: -7px;left: 300px;}
p3 :hover {background: #ffa500;background-position: right top;color: #fff;}
p4 {padding: 5pt 10pt 40pt 5pt; background-color:#e6e6fa;color: #ff9900; position:absolute;top:130px;left: -895px;FONT-SIZE: 25pt}
pre {font-style:italic;color:#2a52be;text-decoration:underline;font-size:17px;float:left;}
B {font-size:17px;background-color:#e6e6fa;}
.abrakadabra{width:500px;font-size:17px;}
</style>




<p1><a href=".html"><span>Абонентам</span></a>
<p2><a href="2.html"><span>Vip-Клиентам</span></a>
<p3><a href="3.html"><span>Корпоративным клиентам</span></a>
<p4> Новости
<pre>Оборудование

Роуминг и зона обслуживания

Услуги и тарифы

Скидки и рекламные акции

МТС в регионах
</pre>
<div class="abrakadabra"><B>
28.04.2006</B>
Вниманию абонентов тарифного плана "Универсальный"
Информируем Вас о следующих изменениях в структуре исходящих вызовов Вашего
тарифного плана

25.04.2006 0912 - изменение тарифа
изменяеться стоимость звонков на короткий номер 0912

25.04.2006 Отменяется плата за любые входящие звонки!
С 25 апреля на тарифном плане "Униеврсальный" абсолютно ВСЕ входящие звонки! 
стали бесплатными

25.04.2006 Безлимитные выходные для "ПРОФИ"- абонентов. Говори сколько хочешь!
Говорите с кем угодно,сколько угодно и о чем угодно- по выходным всё местные
и мобильнык звонки ничего не стоят!
</div>
..
дата-событие теперь стоит возле новостей, осталось немного сместить в низ, возможно расширить.


Но мой вам совет:
берёте карандаш/ручку и листок, рисуете на нём сначала прямоугольниками и квадратами области в которых будет какое-то содержимое. Потом создаёте их с помощью <div></div> задаёте параметры каждому из них размеры,цвет, положение(top bottom left right), а потом в них уже делаете что хотите. Или же можно делать через таблицу, путём объеденения некоторых яйчеек - устаревший вариант), но иногда через него гораздо проще.
Вот например я создам по вашей картинке с МТС'а блоки: тут встаёт выбор либо таблицу с тремя колонками - что проще или три блока div, я выберу всё же таблицу т.к. сайт скорей всего резиновы, т.е. его центральная часть будет растягиваться при растягивании окна браузера.

Код:
<HTML>
<HEAD>
<TITLE>MTC</TITLE>
<link rel="stylesheet" type="text/css" href="1.css"/>
</HEAD>
<BODY>
<style>
html, body{background:#faafaa;} /*цвет для фона всего что не заполнено объектами*/
div{position:absolute;    /*что-бы не мучаться сделаю блоки независимыми друг от друга*/
    background:#1ff2ae;}  /*цвет фона для всех объектов div*/

.logo{width:150px;  /*ширина логотипа*/
      height:70px;  /*высота логотипа*/
      top:5px;   /*отступ сверху*/
      left:25px;   /*отступ слева*/
      }

.title{width:400px;
       height:30px;
       top:5px;
       left:200px;
       }

.super_table{background:#1ff2ae;position:relative; top:90px; width:100%; border:0; border-collapse:collapse;}   /*таблица будет растягиваться на всю ширину окна, а точней будую растягиваться только те яйчейки которым не зададим ширину*/

.news{width:200px; background:red;}

.right_block{width:200px;}

</style>


<div class="logo"> logo
</div>


<div class="title"> title title title title title title title title title title title title title title title title
</div>


<table class="super_table">
<tr>

<td class="news">
<li>Оборудование</li>

<li>Роуминг и зона обслуживания</li>

<li>Услуги и тарифы</li>

<li>Скидки и рекламные акции</li>

<li>МТС в регионах</li>
</td>

<td class="center_block">
28.04.2006 Вниманию абонентов <br />
Информируем  Вашего тарифного плана
<br />
25.04.2006 0912 - изменение<br />
изменяеться стоимость номер 0912
<br />
25.04.2006 Отменяется звонки!<br />
С 25 апреля входящие звонки! 
стали бесплатными<br />

25.04.2006 Безлимитные Говори сколько хочешь!<br />
Говорите с кем  местные и мобильнык звонки ничего не стоят!<br />
</td>

<td class="right_block">
<li>Одна шляпа</li>

<li>Черыте сапога</li>

<li>Фиолетовый пояс</li>

<li>Желтоватый арбуз</li>

<li>Национальные трусы</li>
</td>

</tr>

</table>


</<body>
</HTML>
JinglsOrg вне форума   Ответить с цитированием
Старый 29.01.2011, 03:28   #5
XYLIGANXYL
Пользователь
 
Регистрация: 24.01.2011
Сообщений: 19
Репутация: 10
Радость

Ну я в Html человек далекий но пока ждал ответ уже разобрался но по своему ваш метод меня заинтересовал Вот мой код если интересно
Код HTML:
<HTML>
    <HEAD>
    <TITLE>MTC</TITLE>
 <link rel="stylesheet" type="text/css" href="1.css"/>
<I><img src="1.jpg"width="160" height="90"></I>
    </HEAD>
<BODY>
<p1><a href=".html"><span>Абонентам</span></a>
<p2><a href="2.html"><span>Vip-Клиентам</span></a>
<p3><a href="3.html"><span>Корпоративным клиентам</span></a>
<p4> Новости </p4>
<pre><C>Оборудование

Роуминг и зона обслуживания

Услуги и тарифы

Скидки и рекламные акции

МТС в регионах
</C>
</pre>
<pre><b>
<A>28.04.2006</A>  <A2>Вниманию абонентов тарифного плана "Универсальный"</A2>
          <A3>Информируем Вас о следующих изменениях в структуре исходящих
           вызовов Вашего тарифного плана</A3>

<A>25.04.2006</A>  <A2>0912 - изменение тарифа</A2>
         <A3> Изменяеться стоимость звонков на короткий номер 0912</A3>

<A>25.04.2006</A>  <A2>Отменяется плата за любые входящие звонки!</A2>
         <A3> С 25 апреля на тарифном плане "Униеврсальный" абсолютно
           ВСЕ входящие звонки стали бесплатными</A3>

<A>25.04.2006</A>  <A2>Безлимитные выходные для "ПРОФИ"-абонентов.Говори сколько хочешь!</A2>
         <A3> Говорите с кем угодно,сколько угодно и о чем угодно-по выходным
            всё местные и мобильнык звонки ничего не стоят!</A3>
</B>
</pre>
<form> <F>
<input type="text" size="20"> </F>
<F2><input type="button" size="50" value="Найти"></F2>
<F3><input type="checkbox" value=""></F3>
<pre><d>
Искать только в блоге
"Абонентам"
</d></pre>
</form>

<pre>
<R>Что сделать</R>
<E>
Платить банковской картой
MTS.CARD и получать
бонусные минуты в МТС!

Воспользоваться любыми
справочно-сераисными
услугами

Поболтать в голосовом чате</E>
<T>Все возможности</T></pre>

</<body>
</HTML>
Сss
Код HTML:
I  {position:absolute;left:120px;top:20px}
p1 {padding: 5pt 500pt 10pt 5pt; background-color:#c0c0c0;align="center";position:absolute;top: 10px;left: 300px;}
p1 :hover {background: #ffa500;background-position: right top;color: #fff;}
p2 {color:black;background-color:#c0c0c0;position:absolute;top: 7px;left: 300px;}
p2 :hover {background: #ffa500;background-position: right top;color: #fff;}
p3 {color:black;position:absolute;top: -7px;left: 300px;}
p3 :hover {background: #ffa500;background-position: right top;color: #fff;}
p4 {padding: 5pt 70pt 150pt 5pt; background-color:#fedac5;color: #ff9900; position:absolute;top:130px;left: -820px;FONT-SIZE:25pt}
C  {color:#2a52be;text-decoration:underline;font-size:11pt;position:absolute;top: 150pt;left:-820px;font-family: Arial;}
B  {color:black;position:absolute;top: 125px;left: -550px;}
A  {color:black;font-family: Arial;font-weight:300;font-size:10pt}
A2 {color:#4169e1;text-decoration:underline;font-size:10pt;font-family: Arial;font-weight:300;}
A3 {color:#bbbbbb;font-size:9pt;}
F  {position:absolute;top: 300pt;left:-470px;}
F2 {position:absolute;top: 300pt;left:-300px;}
F3 {position:absolute;top: 320pt;left:-470px;}
D  {position:absolute;top: 310pt;left:-450px;font-family: Arial;font-size:9pt;color:#bbbbbb}
E  {padding: 5pt 10pt 50pt 5pt; background-color:#e6e6fa;position:absolute;top: 125pt;text-decoration:underline;font-family: Arial;font-size:10pt;}
R  {padding: 5pt 27pt 10pt 18pt;background-color:#ffa500;position:absolute;top: 98pt;right: -93px;font-family: Arial;font-size:16pt;font-weight:bold;color:white}
T  {color:red;text-decoration:underline;font-family: Arial;font-weight:300;font-size:10pt;position:absolute;top: 270pt;right: -15px}
Наверно в плане грамматики написания кода это туфта полная...
XYLIGANXYL вне форума   Ответить с цитированием
Старый 30.01.2011, 05:20   #6
KPEATuBHO
Форумчанин
 
Аватар для KPEATuBHO
 
Регистрация: 03.09.2010
Сообщений: 197
Репутация: 28
По умолчанию

Цитата:
Сообщение от JinglsOrg Посмотреть сообщение
p.s.:незабудьте закрыть body )
бомбо-бо-бо-бо)

Последний раз редактировалось KPEATuBHO; 30.01.2011 в 11:57.
KPEATuBHO вне форума   Ответить с цитированием
Ответ

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Правильно разместить div-ы Skalka HTML и CSS 0 23.12.2010 09:32
как в делфи вставить текст из edit в input на сайте infstudio Работа с сетью в Delphi 4 27.04.2010 14:34
Если длинна строки больше объявленной, разместить избыточный текст в новой строке!!! bingooo Паскаль 1 10.04.2010 19:41
Помогите правильно расположить текст в блоге! V_for_Veronica HTML и CSS 2 19.08.2008 17:00


05:22.


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2019, Jelsoft Enterprises Ltd.