VPF::верстка блоками, 3 колонки - Форум программистов

nenastiy

Дата 4.11.2009, 21:51 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 25.10.2009

Репутация: нет
Всего: нет

Всем доброго времени суток smile

У меня такая проблема - макет трехколоночный и надо нарезать с помощью блоков smile

...никак не получается привести в порядок центральную колонку...

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head> 
  <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> 
  <meta name="description" content="Лингвистический сайт" /> 
  <meta name="keywords" content="перевод, обучение, английский." /> 
  <link rel="stylesheet" href="style.css" type="text/css" />
  <title>Лингво-центр ВАРИАНТ СЛиП | Главная</title>
</head>
<body>

<div id="colontitul">
    <div id="header"> 
    </div>
</div>
<div id="colontitul">
    <div id="nav"> 
      <ul> 
        <li><a href="#">ГЛАВНАЯ</a></li> 
        <li><a href="#">О КОМПАНИИ</a></li> 
        <li><a href="#">ЦЕНЫ</a></li> 
        <li><a href="#">КОНТАКТЫ</a></li>  
      </ul> 
    </div>
    <div id="intro">
      <p style="font-weight: bolder;" class="one">Организован в качестве центра по обучению иностранным языкам для взрослых в 1990 г.</p>
      <p style="font-weight: lighter;">Мы не являемся закрытым учебным заведением государственного типа и не считаем целесообразным предлагать жёсткую программу для всех групп населения. Программа обучения составляется в каждом отдельном случае, исходя из ресурсов и потребностей нашего клиента.</p>
    </div>
</div>
<div width=335px id="col1">
      <a href="#">переводы/переводчики</a> 
          <p>арабский, турецкий, фарси, китайский;</p>
          <p>английский, немецкий, французский;</p>
          <p>испанский, итальянский, скандинавские языки, полский;</p>
          <p>украинский,белорусский,аварский, азербайджанский, армянский, казахский;</p>
          <p>другие языки Ближнего и Дальнего Зарубежья</p>
          <p>Оперативность. Качество. Конфиденциальность.</p>
          <p>Приглашаются для работы лица с в/о и навыками</p>
</div>

<div width=335px id="col3">
        <a href="#"><p>лингвистическая</p><p>поддержка бизнеса</p></a> 
        <a href="#">Руководителям фирм и предприятий с внешнеэкономической деятельностью</a>
</div>

<div width=333px id="col2">
        <a href="#">обучение</a> 
        <p>АНГЛИЙСКИЙ ЯЗЫК:</p>
        <p>- <a href="#">Базовый разговорный:</a> этикетное и деловое общение. Интенсив - 2 месяца.</p>
        <p>- Курс для начинающих</p>
        <p>- Подготовка к экзаменам типа и  TOFL, IELTS и др.</p>
        <p>- Индивидульные программы.</p>
        <p>ДЕЛОВОЙ АНГЛИЙСКИЙ:</p>
        <p>- Для менеджеров</p>
        <p>- <a href="#">Для секретарей-референтов</a></p>
        <p>- Английский по профессиям (для туроператоров, предпринимателей, моряков; гостиничное, банковское дело)</p>
</div>

<div id="colontitul">
      <div id="podval">
        <a href="#">Разработка сайта - компания MATODOR</a>
      </div>
</div>
</body>
</html>

и CSS...

Код


* { 
margin: 0; 
padding: 0; 
border: 0; 
} 

body { 
padding: 2% 0 0; 
background-image: url(fon.png); 
color: #fff; 
font-family: Arial, Georgia; 
}

#header { 
background-image: url(logo.png); 
width: 1004px; 
height: 354px; 
}

#nav { 
background-image: url(nav_bg.png);
width: 1004px; 
height: 49px;
color: #fff; 
font-size: 12pt; 
font-weight: bold; 
text-align: center;
font-family: Georgia; 
} 

#nav ul { 
list-style-type: none;
padding-top: 15px; 
} 

#nav li { 
display: inline; 
margin: 0 50px; 
} 

#nav li a { 
color: #fff; 
} 

#nav li a:hover { 
color: #f00; 
}

a { 
text-decoration: none; 
} 

#intro { 
background-image: url(intro.png); 
width: 1004px; 
height: 182px; 
}

#intro p { 
font-size: 14pt;
text-align: justify;
font-family: Arial;
padding-left: 260px;
padding-right: 47px; 
}

#intro p.one { 
padding-top: 10px; 
padding-bottom: 20px; 
}

#container { 
width: 100%;
margin: 0 auto;
}

#content {
width: 100%;
float: left;
}

#col1 { 
width: 335px;
height: 313px;
background-image: url(col1.png); 
font-family: Arial; 
float:left;
} 

#col1 a { 
color: #396; 
} 

#col1 a:hover { 
color: #f36; 
}

#col2 { 
width: 333px;
height: 313px;
background-image: url(col2.png);
font-family: Arial;  
margin:0 335px;
}

#col3 { 
width: 335px;
height: 313px;
background-image: url(col3.png);
font-family: Arial;
float:right;
margin:0 260px;
}

#podval { 
background-image: url(podval.png); 
width: 1004px; 
height: 75px;
}

#podval a { 
font-size: 8pt;
font-family: Arial;
padding-left: 770px;
padding-right: 17px;
padding-top: 20px;
text-decoration: underline;
}

#colontitul {
clear:both;
width:100%;
margin:0px 0px;
}

и тут еще рисунки, если нуно

не бейте, пожалуйста, за то что все страшно и коряво...это же еще не доделано + первый раз блоками верстаю smile

и там еще проблема - нижняя ссылка не хочет отступать от верха...в чем там ошибка? smile

Заранее всем спасибо за ответы...и еще хотела спросить как это сделать кроссбраузерно...вот smile

Добавлено через 2 минуты
Забыла сказать что не так с центральной колонкой - ее текст едет вниз..весь smile

Pitbul

Дата 4.11.2009, 22:17 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

Кхе кхе, я жутко извиняюсь! Сам недавно начал верстать блоками, но лучше когда КОД с которым ты просишь кого-то разобратся максимально освобожден от хлама.

Я сейчас попробую вывесить небольшой пример который иллюстрирует БЛОЧНУЮ верстку в 3 колонки:

Код


<html>
<head>
    <title>пример</title>
    <style>
* { margin: 0px; padding: 0px; }
body {margin: 0; 
      padding: 0;
      text-align: center;}    
div.conteiner {
        margin: 0 auto;
        width: 900px; 
        text-align: left;}
div.left {
        width: 300px;
        float: right;
        background-color: yellow;}
div.center {
        width: 300px;
        float: right;
        background-color: #99958c;}
div.right {
        width: 300px;
        float: right;
        background-color: red;}        
    </style>
</head>

<body>

<div class="conteiner">

<div class="left">
dsgdfgsdfgsdfg dsg asdg asdg asdg asdg as asd dfh sdfh sdf gadfg asdasd gaf
</div>
  
<div class="center">  
dsfgsdfgsdfgsdf asdfa sd sad fasdg  sda fasdfasdf 
</div>

<div class="right">
sdgfgsdfgsdfg asd gasdg asdg asdg asdgas d
</div>
 
</div>
</body>
</html>

--------------------

### JAVA ###### programming ###

nenastiy

Дата 5.11.2009, 09:29 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 25.10.2009

Репутация: нет
Всего: нет

Pitbul, спасибо Вам огромное....все получилось smile

...только вот ссылка в подвале никак не хочет ехать вниз... smile

...
помогите пожалуйста smile

Pitbul

Дата 5.11.2009, 12:21 (ссылка)

(нет голосов)

Загрузка ...

Fruzenshtein

Профиль
Группа: Участник
Сообщений: 231
Регистрация: 30.4.2008
Где: Киев

Репутация: нет
Всего: нет

Цитата

...только вот ссылка в подвале никак не хочет ехать вниз...

Я бы запустил этот код у себя в браузере, да он жутко не красивый.

По этому попрошу объяснить соль задачи и мы ее решим на локальном примерчике, что бы потом ввести нужные изменения в твой код smile

--------------------

### JAVA ###### programming ###

nenastiy

Дата 5.11.2009, 20:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 25.10.2009

Репутация: нет
Всего: нет

А можно Вас попросить подробно расписать почему код жутко некрасивый... smile

nenastiy

Дата 6.11.2009, 11:51 (ссылка)

(голосов:1)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 21
Регистрация: 25.10.2009

Репутация: нет
Всего: нет

ПРОБЛЕМА РЕШЕНА. ВСЕМ СПАСИБО smile

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »