Блочная верстка

@serg k · Регистрация: 12.10.2009

Студворк — интернет-сервис помощи студентам

У меня такой вопрос, делаю сайт блоками, скажем так по краям у меня два не больших блока, в центре картинка логотип, по высоте она больше тех блоков, идет следующий ряд картинок с права на лево лесенкой, как бы огибая логотип сайта, на последней картинке, блок не достает первый блок верхнего ряда, как бы получается что он стоит на уровне логотипа, а мне нужно чтоб он был выше логотипа, вроде понятно объяснил, помогите советами, как мне сделать

@vasvas7775 · 27.04.2011, 08:14

подними или опусти, через margin-top:;
А так, что бы подсказать что то конкретно. нужно увидеть код.

@serg k · 27.04.2011, 10:18 **[ТС]**

ну как бы вот коды...

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
<center>
<div id="top">
<div id="telefon">
</div>
<div id="logo"><img alt="" src="images/home/logo.jpg" height="150" width="256" /></div>
<div id="rigthtop">
<div id="2mini" align="right"><img alt="" src="images/home/mini.jpg" height="18" width="17" style="margin:0 40px 0 0"  /><img alt="" src="images/home/2mini.jpg" height="18" width="17" style="margin:0 40px 0 0" /></div>
<div id="atelefon"></div>
</div>
 
<div id="atop"><img alt="" src="images/home/tech.jpg" height="158" width="210" /></div>
<div id="btop"><img alt="" src="images/home/home.jpg" height="158" width="210" /></div>
<div id="ctop"><img alt="" src="images/home/auto.jpg" height="158" width="210" /></div>
<div id="dtop"><img alt="" src="images/home/uvel.jpg" height="158" width="210" /></div>
</div>
</center>
</body>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
BODY    {width:1024; min-height:800px;
}
#top    {width:1024px; height:360px;
}
#telefon    {width:384; margin:30px 15px 30px 130px; text-align:right; font:24px Verdana, Geneva, sans-serif bold; float:left;
}
#logo   {width:256px; height:150px; float:left;
}
#rigthtop   { width:384px; float:left; 
}
#2mini  {width:246px; height:30px; float:left; margin:0 138px 0 0;
}
#atelefon   {width:384; margin:5px 138px 30px 15px; text-align:right; font:24px Verdana, Geneva, sans-serif bold; float:left;
}
#atop   { width:210px; float:right; margin:15px 0px 30px 27px;
}
#btop   { width:210; float:right; margin:45px 27px 30px 35px;
}
#ctop   { width:210; float:right; margin:45px 35px 30px 27px;
}
#dtop   { width:210; float:left; margin:15px 27px 30px 0px;

@vasvas7775 · 27.04.2011, 10:27

Я так понимаю проблема, с правым верхнем блоком.
Ну и что с ним сделать. Чтобы он казался выше надо опустить остальные Ведь они все отпазированы.
Или что надо сделать?

@serg k · 27.04.2011, 10:36 **[ТС]**

проблема в левом блоке

HTML5
1
<div id="dtop"><img alt="" src="images/home/uvel.jpg" height="158" width="210" /></div>

он должен быть на уровне вот этого блока

HTML5
1
<div id="atop"><img alt="" src="images/home/tech.jpg" height="158" width="210" /></div>

но ему не дает выше быть логотип по центру или что то другое

@vasvas7775 · 27.04.2011, 10:43

Попробуй так:

извини вот поправил код

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
<style>
BODY    {width:1024; min-height:800px;
}
#top    {width:1024px; height:360px;
}
#telefon        {width:384; margin:30px 15px 30px 130px; text-align:right; font:24px Verdana, Geneva, sans-serif bold; float:left;
}
#logo   {width:256px; height:150px; float:left;
}
#rigthtop       { width:384px; float:left;
}
#2mini  {width:246px; height:30px; float:left; margin:0 138px 0 0;
}
#atelefon       {width:384; margin:5px 138px 30px 15px; text-align:right; font:24px Verdana, Geneva, sans-serif bold; float:left;
}
#atop   { width:210px; float:right; margin:15px 0px 30px 27px;
}
#btop   { width:210; float:right; margin:15px 27px 30px 35px;
}
#ctop   { width:210; float:right; margin:45px 35px 30px 27px;
}
#dtop   { width:210; float:left; margin:15px 27px 30px 0px;
}
 
</style>
 
<!--[if IE]>
<style>
#btop   { width:210; float:right; margin:-78px 27px 30px 35px;
}
</style>
<![endif]-->
 
<body>
<center>
<div id="top">
<div id="telefon">
</div>
<div id="logo"><img alt="" src="https://www.cyberforum.ru/images/home/logo.jpg" height="150" width="256" /></div>
<div id="rigthtop">
<div id="2mini" align="right"><img alt="" src="https://www.cyberforum.ru/images/home/mini.jpg" height="18" width="17" style="margin:0 40px 0 0"  /><img alt="" src="https://www.cyberforum.ru/images/home/2mini.jpg" height="18" width="17" style="margin:0 40px 0 0" /></div>
<div id="atelefon"></div>
</div>
 
<div id="atop"><img alt="" src="images/home/tech.jpg" height="158" width="210" /></div>
<div id="btop"><img alt="" src="images/home/uvel.jpg" height="158" width="210" /></div>
<div id="ctop"><img alt="" src="https://www.cyberforum.ru/images/home/auto.jpg" height="158" width="210" /></div>
<div id="dtop"><img alt="" src="https://www.cyberforum.ru/images/home/uvel.jpg" height="158" width="210" /></div>
</div>
</center>
</body>

@serg k · 27.04.2011, 10:50 **[ТС]**

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

@vasvas7775 · 27.04.2011, 10:51

Я там исправил, попробуй еще.

@serg k · 27.04.2011, 11:22 **[ТС]**

да не, я наверное не так обяснил, мне надо вот как файл безимени2, а у меня получается как безимени1

@vasvas7775 · 27.04.2011, 14:47

Можно попробовать так:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 
<head>
  <title></title>
<style>
body { margin:0px auto;}
#top { width:1024px; height:360px; margin:auto;}
 
#top1 {width:1024px; min-height:20px;}
 #top-left {width:389px; height:70px;background:#33FF99; float:left;}
 #top-center {width:246px; height:150px;background:#33FF33; float:left;}
 #top-right {width:389px; height:70px;background:#66FFFF; float:left;}
 
#left { position:relative; width:246px; height:150px; background:red; top:80px; left:20px;}
  #left1 { position:relative; width:210px; height:150px; background:#444444; float:left; left:290px;}
  #right1 { position:relative; width:210px; height:150px; background:#FFCCFF; float:left; left:310px;}
#right { position:relative; width:246px; height:150px; background:red; float:right; top:-70px; right:20px;}
</style>
<!--[if IE]>
<style>
#left { position:relative; width:246px; height:150px; background:red; top:-30px; left:20px; float:left;}
  #left1 { position:relative; width:210px; height:150px; background:#444444; float:left; top:20px; left:40px;}
  #right1 { position:relative; width:210px; height:150px; background:#FFCCFF; float:left; top:20px; left:70px;}
#right { position:relative; width:246px; height:150px; background:red; top:-30px; right:20px; float:right;}
</style>
<![endif]-->
 
</head>
 
<body>
 <div id="top">
 
<div id="top1">
<div id="top-left"></div>
<div id="top-center"></div>
<div id="top-right"></div>
</div>
<div id="left"></div>
 <div id="left1"></div>
 <div id="right1"></div>
<div id="right"></div>
 
 
 </div>
</body>
</html>

@serg k · 27.04.2011, 17:24 **[ТС]**

поставил твой код вроде все хорошо, спасибо, просто планы поменялись, сейчас не до него, потом все равно нужен будет, спасибо

Новые блоги и статьи Все статьи Все блоги /
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Programma_Boinc 01.01.2026 Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .

@serg k 1 / 1 / 0 Регистрация: 12.10.2009 Сообщений: 100

	Блочная верстка 27.04.2011, 03:10. Показов 1449. Ответов 10 Метки нет (Все метки) У меня такой вопрос, делаю сайт блоками, скажем так по краям у меня два не больших блока, в центре картинка логотип, по высоте она больше тех блоков, идет следующий ряд картинок с права на лево лесенкой, как бы огибая логотип сайта, на последней картинке, блок не достает первый блок верхнего ряда, как бы получается что он стоит на уровне логотипа, а мне нужно чтоб он был выше логотипа, вроде понятно объяснил, помогите советами, как мне сделать 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	27.04.2011, 08:14
	подними или опусти, через margin-top:; А так, что бы подсказать что то конкретно. нужно увидеть код. 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	27.04.2011, 10:27
	Я так понимаю проблема, с правым верхнем блоком. Ну и что с ним сделать. Чтобы он казался выше надо опустить остальные Ведь они все отпазированы. Или что надо сделать? 0

@serg k 1 / 1 / 0 Регистрация: 12.10.2009 Сообщений: 100
	27.04.2011, 10:50 [ТС]
	попробывал не получилось, тот блок который у тебя написано в минусе, эт конечно хорошо он залазит на логотип, пробывал с моим блоком сделать тоже в минус, не хочет не двигается вообще даже на милиметрик вверх 0

@vasvas7775 Обитатель 539 / 317 / 42 Регистрация: 24.12.2010 Сообщений: 795
	27.04.2011, 10:51
	Я там исправил, попробуй еще. 0

@serg k 1 / 1 / 0 Регистрация: 12.10.2009 Сообщений: 100
	27.04.2011, 11:22 [ТС]
	да не, я наверное не так обяснил, мне надо вот как файл безимени2, а у меня получается как безимени1 Миниатюры 0

@serg k 1 / 1 / 0 Регистрация: 12.10.2009 Сообщений: 100
	27.04.2011, 17:24 [ТС]
	поставил твой код вроде все хорошо, спасибо, просто планы поменялись, сейчас не до него, потом все равно нужен будет, спасибо 0