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

Как правильно задать размер блока с картинкой ( CSS )

24.10.2012, 00:54. Показов 3929. Ответов 5
Метки нет (Все метки)

Author24 — интернет-сервис помощи студентам
HTML к первой картинке:

Кликните здесь для просмотра всего текста

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
  <body>
   <div id="logo">
   </div>
  
   <div id="content"><div><div><div><div>
   <div id="nav_k">
        <ul>
         <li><a href="index.html"></a></li>
        </ul>
   </div>
        <p class="main_content">Содержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержаниеблокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
         </p>
        </div></div></div></div></div>
 
  </body>
</html>


HTML ко второй картинке:

Кликните здесь для просмотра всего текста

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
</body>
</html>-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
  <body>
   <div id="logo">
   </div>
  
   <div id="content"><div><div><div><div>
   <div id="nav_k">
        <ul>
         <li><a href="index.html">[u][b]Главная[/b][/u]</a></li>
        </ul>
   </div>
        <p class="main_content">Содержание блокаСодержание блокаСодержаниеСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блокаСодержание блока
Содержание блокаСодержание блокаСодержание блока
         </p>
        </div></div></div></div></div>
 
  </body>
</html>


CSS:
Кликните здесь для просмотра всего текста

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
49
50
51
body {
background-image: url("bd3.gif");
}
#logo {
width: 400px;
height: 400px;
background-image: url("logo.gif");
background-repeat: no-repeat;
margin-left: 18%;
margin-bottom: -200px;
}
#content{
width: 70%;
margin-left: 15%;
margin-right: 15%;
background: #fff;
background-image: url("nav_fon.gif");
background-repeat: repeat-x;
}
#content div{
background: url("nav_right.gif");
background-position: top right;
background-repeat: no-repeat;
}
#content div div{
background: url("nav_left1.gif");
background-position: top left;
background-repeat: no-repeat;
}
#content div div div{
background: url("bottom_left.gif");
background-position: bottom left;
background-repeat: no-repeat;
}
#content div div div div{
background: url("bottom_right.gif");
background-position: bottom right;
background-repeat: no-repeat;
}
.main_content {
padding-top: 30px;
}
#nav_k {
}
#nav_k ul {
list-style: none;
text-align: center;
}
#nav_k a {
background-image: url("nav_k.gif");
}


1. Как видно из картинок, когда в навигации ( синия полоса ) ничего нету, то её правый угол отображается нормально, а как только там что-то появляется то из ниоткуда появляется картинка. Вся загвоздка в том что это правый нижний угол основной ( белой )таблицы.
Как это убрать?
Почему появляется картинка?

2. Как видно из второй картинки, когда я вставляю текст в навигация то вместе с ней вставляется картинка, но не полностью. Картинка обрезается по длине текста.
Как сделать чтобы не картинка подстраивалась под текст, а текст под картинку ( картинка отображалась полностью, а я в свою очередь задам стиль тексту)?

Прикрепил страницу.

border-radius для закругления углов использовать не хочу.
Миниатюры
Как правильно задать размер блока с картинкой ( CSS )   Как правильно задать размер блока с картинкой ( CSS )  
Вложения
Тип файла: rar sait.rar (81.9 Кб, 4 просмотров)
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
24.10.2012, 00:54
Ответы с готовыми решениями:

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

Как правильно задать размер фона?
Здравствуйте. На сайте http://pariki-ellen.ru/ решил установить &lt;meta name=&quot;viewport&quot;...

Как в мобильной версии сайта через css задать размер картинки
Добрый вечер. Помогите пожалуйста. сайт https://airkolors.com/10-clever-lighting-design-ideas как в...

Как задать правильно размер для сайта?
Как задать правильно размер для сайта? У меня стоит body {min-width:1100px;} но в мобильно...

5
html + css = камасутра
75 / 57 / 5
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6
25.10.2012, 08:47 2
Ответь плиз зачем столько </div></div></div></div></div>??????????
0
4 / 4 / 1
Регистрация: 30.11.2010
Сообщений: 69
25.10.2012, 16:22  [ТС] 3
Цитата Сообщение от Kantaria Посмотреть сообщение
Ответь плиз зачем столько </div></div></div></div></div>??????????
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#content div{
background: url("nav_right.gif");
background-position: top right;
background-repeat: no-repeat;
}
#content div div{
background: url("nav_left1.gif");
background-position: top left;
background-repeat: no-repeat;
}
#content div div div{
background: url("bottom_left.gif");
background-position: bottom left;
background-repeat: no-repeat;
}
#content div div div div{
background: url("bottom_right.gif");
background-position: bottom right;
background-repeat: no-repeat;
}
0
html + css = камасутра
75 / 57 / 5
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6
25.10.2012, 16:25 4
Возможно именно поэтому у тебя и все не получается.
Это не просто буквы которые при определенной комбинации выдает именно то что вы ранее указали.
вы
CSS
1
2
3
4
5
#content [B]div div div div[/B]{
background: url("bottom_right.gif");
background-position: bottom right;
background-repeat: no-repeat;
}[/QUOTE]
вот в этом разделе создали не раздел который отвечает за правый угол.
а создали 4 блока.
вот и дур дом получается...
1
4 / 4 / 1
Регистрация: 30.11.2010
Сообщений: 69
25.10.2012, 16:34  [ТС] 5
Покажите пожалуйста как надо сделать, чтобы всё было нормально.
0
html + css = камасутра
75 / 57 / 5
Регистрация: 31.01.2012
Сообщений: 536
Записей в блоге: 6
25.10.2012, 16:37 6
Цитата Сообщение от tro9an Посмотреть сообщение
Покажите пожалуйста как надо сделать, чтобы всё было нормально.

Не по теме:

Честно говоря я сам до конца и не понял что вы хотели

0
25.10.2012, 16:37
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
25.10.2012, 16:37
Помогаю со студенческими работами здесь

Не могу задать размер всплывающего блока
Всем привет Скачал всплывающий блок подсказок с сайта ТЫк Как задать размер окна, которое...

С помощью CSS жестко указать размещение и размер блока
Здравствуйте, как с помощью css жестко указать размещение и размер блока, чтобы он при изменении...

Как правильно задать размер JPanel чтобы JFrame при pack() сжимался до размеров JPanel
Подскажите как правильно задать размер JPanel чтобы JFrame при pack() сжимался до размеров JPanel,...

Как задать ширину блока относительно соседского блока?
В HTML что-то вроде этого: &lt;div class=&quot;article&quot;&gt; &lt;div class=&quot;title&quot;&gt; &lt;h2&gt;Something...


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

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru