Разместить кнопки над картинкой

@Ирина6 · Регистрация: 19.11.2012

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

кнопки заработали, но они не на картинке, а под картинкой, что мне сделать?
вот код;

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
  <head>
    <title>Harchilove</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
               <div class="hh">
         <img src="harchilove.jpg" id="hh" alt=""> </div>
 
 
              <div class="menu">
    <ul>
        <li><a href="#">My Page</a></li>
        <li><a href="#">My Hobbies</a></li>
        <li><a href="#">My Photo</a></li>
        <li><a href="#">My Soft</a></li>
        <li><a href="#">My Record</a></li>
    </ul>
</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
img.hh {
        min-height: 100%;
        min-width: 900px;
 
        width: 100%;
        height: auto;
 
        position: fixed;
        top: 0;
        left: 0;
}
 
@media screen and (max-width: 900px) { 
        img.hh {
                left: 100%;
                margin-left: 0px;   
        }
}
 
div.menu li {
        background-color:#5901a8; /* Фон */
        float:left; /* Обтекание по правому краю */
        list-style:none; /* Убираем маркеры */
        padding:10px 40px; /* Отступ вокруг поля*/
        margin-right:80px; /* Отступ справа */
    }
    
    div.menu li a {
        color:#d13ae5; /* Цвет ссылки */
        text-decoration:none; /* Отменяем подчеркивание у ссылки */
    }

@SF · 07.04.2014, 00:42

Ирина6,

HTML5
1
2
3
4
5
6
7
8
9
<div class="menu">
    <ul>
        <li><a href="#">My Page</a></li>
        <li><a href="#">My Hobbies</a></li>
        <li><a href="#">My Photo</a></li>
        <li><a href="#">My Soft</a></li>
        <li><a href="#">My Record</a></li>
    </ul>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* new start */
    div.menu { 
        background:url(harchilove.jpg); /* Фон меню */
        width:900px; /* Ширина фона */
        height:60px; /* Высота */
    }
    /* new end */
    div.menu li {
        margin-top:10px; /* new - отступ сверху */
        background:#5901a8;  /* Фон */
        float:left; /* Обтекание по правому краю */
        list-style:none; /* Убираем маркеры */
        padding:10px 20px; /* Отступ вокруг поля */
        margin-right:50px; /* Отступ справа */
    }
    
    div.menu li a {
        color:#d13ae5; /* Цвет ссылки */
        text-decoration:none; /* Отменяем подчеркивание у ссылки */
    }

@Ирина6 · 07.04.2014, 02:52 **[ТС]**

Все получилось,большое спасибо,еще вопросик, а по какому принципу теперь можно сюда же разместить еще одну картинку?

@SF · 07.04.2014, 06:05

Ирина6, http://htmlbook.ru/css/background-position посмотрите Пример 2

@Ирина6 · 07.04.2014, 09:20 **[ТС]**

получилось фото, под фоном, а нужно наоборот

@SF · 07.04.2014, 17:26

Сообщение от Ирина6

получилось фото, под фоном, а нужно наоборот

подробнее ... желательно скринами

@Ирина6 · 07.04.2014, 18:57 **[ТС]**

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
<html>
  <head>
    <title>Harchilove</title>
    <link rel="stylesheet" type="text/css" href="style.css">
<style>
   body {
    background-image: url(ya.jpg);
    background-repeat: repeat-y, repeat-y;
    background-position: left, right;
   }
  </style>
  </head>
  <body>
  <div style="height:900px">
             <div class="menu">
    <ul>
        <li><a href="#">My Page</a></li>
        <li><a href="#">My Hobbies</a></li>
        <li><a href="#">My Photo</a></li>
        <li><a href="#">My Soft</a></li>
        <li><a href="#">My Record</a></li>
    </ul>
</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
div.menu { 
        background:url(harchilove.jpg); /* Фон меню */
        width:1253px; /* Ширина фона */
        height:940px; /* Высота */
       
    }
    
    div.menu li {
        margin-top:150px; /* new - отступ сверху */
        background:#5901a8;  /* Фон */
        float:left; /* Обтекание по правому краю */
        list-style:none; /* Убираем маркеры */
        padding:10px 40px; /* Отступ вокруг поля */
        margin-right:70px; /* Отступ справа */
        margin-left:15px;
    }
    
    div.menu li a {
        color:#d13ae5; /* Цвет ссылки */
        text-decoration:none; /* Отменяем подчеркивание у ссылки */
        font:16px Century;
    }

на скрине в левом верхнем углу видно немного фотку, которая разместилась под фоном

@SF · 07.04.2014, 19:49

Ирина6, картина на какой позиции должна быть? после меню или заменит фон ...

@Ирина6 · 07.04.2014, 20:05 **[ТС]**

ниже кнопок, справа

@SF · 07.04.2014, 20:23

HTML5
1
<div class="foto"><img src="ya.jpg" alt="" /></div>

CSS
1
div.foto {float:right;padding:200px;}

HTML - images

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
<html>
  <head>
    <title>Harchilove</title>
    <link rel="stylesheet" type="text/css" href="style.css">
<style>
   body {
    background-image: url(ya.jpg);
    background-repeat: repeat-y, repeat-y;
    background-position: left, right;
   }
  </style>
  </head>
  <body>
  <div id="wrapper">
  <div style="height:900px">
             <div class="menu">
    <ul>
        <li><a href="#">My Page</a></li>
        <li><a href="#">My Hobbies</a></li>
        <li><a href="#">My Photo</a></li>
        <li><a href="#">My Soft</a></li>
        <li><a href="#">My Record</a></li>
    </ul>
</div>
<div class="foto"><img src="ya.jpg" alt="" /></div> <!-- images -->
</div>
  </body>
</html>

@Ирина6 · 07.04.2014, 21:09 **[ТС]**

сделала вот так

СSS:

CSS
1
2
3
4
5
6
7
8
9
    }
 
    div.foto {
    float:left;
    padding:140px 1px; 
    margin-top:110px;
    margin-left:20px;
    position:absolute;
    }

HTML:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<html>
  <head>
    <title>Harchilove</title>
    <link rel="stylesheet" type="text/css" href="style.css">
 
   <div class="foto"><img src="ya.jpg" alt="" /></div>
  
  </head>
  <body>
  
             <div class="menu">
    <ul>
        <li><a href="#">My Page</a></li>
        <li><a href="#">My Hobbies</a></li>
        <li><a href="#">My Photo</a></li>
        <li><a href="#">My Soft</a></li>
        <li><a href="#">My Record</a></li>
    </ul>
</div>
  </body>
</html>

Все получилось, единственное что, добавила position, потому что кнопки сместились вправо

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .

@Ирина6 1 / 1 / 0 Регистрация: 19.11.2012 Сообщений: 59
	07.04.2014, 02:52 [ТС]
	Все получилось,большое спасибо,еще вопросик, а по какому принципу теперь можно сюда же разместить еще одну картинку? 0

@SF Boo 142 / 117 / 55 Регистрация: 02.12.2013 Сообщений: 396
	07.04.2014, 06:05
	Ирина6, http://htmlbook.ru/css/background-position посмотрите Пример 2 0

@Ирина6 1 / 1 / 0 Регистрация: 19.11.2012 Сообщений: 59
	07.04.2014, 09:20 [ТС]
	получилось фото, под фоном, а нужно наоборот 0

@SF Boo 142 / 117 / 55 Регистрация: 02.12.2013 Сообщений: 396
	07.04.2014, 19:49
	Ирина6, картина на какой позиции должна быть? после меню или заменит фон ... 0

@Ирина6 1 / 1 / 0 Регистрация: 19.11.2012 Сообщений: 59
	07.04.2014, 20:05 [ТС]
	ниже кнопок, справа 0