Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Правила Карта форума Темы раздела Блоги Социальные группы Поиск Сообщения за день  
 
Рейтинг 4.57/7: Рейтинг темы: голосов - 7, средняя оценка - 4.57
0 / 1 / 0
Регистрация: 09.02.2014
Сообщений: 270
1

Как сделать так чтобы был и фон и блочная вёрстка

18.12.2016, 16:15. Показов 1365. Ответов 2
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Пример блочной верстки</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
<body>
 
<div id="container">
    <div id="header">   
    <div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/SHAPKA.jpg" width="900px" height="115px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2><br><br><span style="font-family:Gabriola;font-size:34px;"><font color="#F0FFFF">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspСайт-Рюзюме noname</font></span><br></h2>
    </div> 
    </div>
         
    <div id="navigation">
    <div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/POLOSA.jpg" width="900px" height="20px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp   
    <a href="resume.html"><span style="font-family:Segoe Print;font-size:14px;">Р Е З Ю М Е</span></a>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp
    <a href="kontakt.html"><span style="font-family:Gabriola;font-size:14px;">К О Н Т А К Т Ы</span></a>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp
    <a href="foto.html"><span style="font-family:Gabriola;font-size:16px;">Ф О Т О</span></a>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp•&nbsp&nbsp
    <a href="rabot.html"><span style="font-family:Gabriola;font-size:16px;">Р А Б О Т Ы</span></a>
    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
    </h2> 
    </div> 
    </div>
         
    <div id="menu">
    <div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/MENU.jpg" width="200px" height="415px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2><br><br><span style="font-family:Gabriola;font-size:34px;"><font color="#F0FFFF">
    <p><a href="resume.html"><span style="font-family:Gabriola;font-size:24px;">• Р Е З Ю М Е</span></a></p>
    <p><a href="kontakt.html"><span style="font-family:Gabriola;font-size:24px;">• Контакты</span></a></p>
    <p><a href="foto.html"><span style="font-family:Gabriola;font-size:24px;">• Фото</span></a></p>
    <p><a href="rabot.html"><span style="font-family:Gabriola;font-size:24px;">• Работы</span></a></p>
    </font></span><br></h2>
    </div>
    </div>
         
    <div id="content">
     <span style="font-family:Gabriola;font-size:28px;">
     <p>***РЕЗЮМЕ : 222222<p/>
     <p>**333333<p/>
    </div>
         
    <div id="clear">
         
    </div>
                               
    <div id="footer">
    <div style="position: absolute; top; height="100%"; width="100%"">
        <img src="images/C.jpg" width="900px" height="80px";"/> 
    </div> 
    <div style="position: relative; height="100%"; width="100%";"> 
    <h2><span style="font-family:Courier New;font-size:24px;"><font color="#F0FFFF"><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspСOPY RIGHT!</font></span><br></h2>
    </div>
    </div>
    
</div>
         
</body>
</html>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

body {
            
            color: #000000;
            font-family: Trebuchet MS, Arial, Times New Roman;
            font-size: 12px;
}
 
#container {
            
            margin: 30px auto;
            width: 900px;
            height: 600px;
}
 
#header {
            
            height: 100px;
            width: 900px;
}
 
#navigation {
            
            width: 900px;
            height: 20px;
}
 
#menu {
            
            float: left;
            width: 200px;
            height: 400px;
}
 
#content {
            float: right;
 
            width: 700px;
            height: 400px;
}
 
#clear {
            clear:both;
}
 
#footer {
            height: 80px;
            width: 900px;
}
Это то что сейчас, а надо то что на рисунке, так как препод сменил задание...
В блоке контент должна остаться запись на фоне который и в меню и в котейнере в общем у этих блоков общий фон...
Миниатюры
Как сделать так чтобы был и фон и блочная вёрстка  
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 18.12.2016, 16:15
Ответы с готовыми решениями:

Поставить фон так, чтобы Navbar (меню) на нем был
Здравствуйте. Есть небольшая проблема. Допустим Navbar из bootstrap, изменяю прозрачность - просто...

Как сделать так, чтобы ::before не уходил вниз, а был такой же высоты как и таблица
Подскажите, как сделать так, чтобы ::before не уходил вниз, а был такой же высоты как и таблица?...

Как залить фон меню цветом и сделать так, чтобы изображения отображались (вн)
Первое изображение - как должно быть, второе - что у меня. Фрагменты css, в которых что-то не...

Как сделать так чтобы фон оставался на месте, а прокручивались блоки сайта
Пытаюсь сделать так чтобы фон оставался на месте и не повторялся, а двигались только (как бы это...

2
Эксперт JSЭксперт HTML/CSS
3824 / 2674 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
18.12.2016, 19:48 2

Не по теме:

Цитата Сообщение от Kiber-Net Посмотреть сообщение
препод сменил задание
Это препода надо сменить, если он вас такому коду научил.


Kiber-Net, прикрепите архив с картинками, так интересней будет.
0
0 / 1 / 0
Регистрация: 09.02.2014
Сообщений: 270
19.12.2016, 04:38  [ТС] 3
Цитата Сообщение от mrtoxas Посмотреть сообщение
Это препода надо сменить
Все мы склонны ошибаться... )) И даже я когда то на его счёт...

Про архив не понял ))

И он тут не причём..

Сам сайт строится сначала по такому вот принципу...

Как сделать так чтобы был и фон и блочная вёрстка


И до сего у меня было там по другому на каждый блок своя картинка, хотя блок контента был без текста...
Там я типо схитрил... И другу и себе...

А вот тут он мне прислал что ему сказали вот так вот сделать...
По новому как там выше и вот уже не помню как это делается чтобы текст писался поверх фона, а не фон поверх текста стоял...

Вот шаблон моего сайта
del
Он там расписан всяким фиг пойми какими фонами, то не важно!

Мне надо сделать 1 фон мужду меню сайта и основным контентом если смотреть на шаблон...

Меню сайта поверх фона должны отображаться пункты, а в основном контенте своя инфа которая тоже поверх этого фона...

То есть блоки должны иметься в наличии как таковые!
НО! они эти два блока и не являютс одним блоком и должны быть поверх одного и того же фона любой тупо любой картинки...
0
19.12.2016, 04:38
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 19.12.2016, 04:38
Помогаю со студенческими работами здесь

Как сделать так чтобы при уменьшении окна браузера сайт был читабельным
Как сделать так чтобы при уменьшении окна браузера сайт был читабельным

Как сделать так, чтобы фоновый рисунок на сайте всегда был по ширине монитора?
... чтобы независимо от разрешения экрана, на любом мониторе картинка не обрезалась, не...

как мне сделать так, чтобы LOGO и навигатор меню был расположен по левую сторону
.logo {position: absolute;top:0px;left:0px;text-indent:-9999px;} .logo-wrap...

Как сделать так, чтобы на одной строке были 2 div, один был с левой стороны экрана, второй с правой?
Мне нужно, чтобы заголовок окна был прикреплён к левой части экрана, кнопка к правой. При...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
3
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2023, CyberForum.ru