Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.73/41: Рейтинг темы: голосов - 41, средняя оценка - 4.73
1 / 1 / 0
Регистрация: 19.11.2012
Сообщений: 59

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

07.04.2014, 00:14. Показов 8215. Ответов 10
Метки нет (Все метки)

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

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; /* Отменяем подчеркивание у ссылки */
    }
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
07.04.2014, 00:14
Ответы с готовыми решениями:

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

Как разместить текст под картинкой?
как разместить текст под картинкой что бы бы не уходил припустим вот так (картинка) ну и так дальше только в этих рамках

Текст над картинкой
Как разместить текст над картинкой? Вот код: &lt;div class=&quot;section&quot; id=&quot;section1&quot;&gt; &lt;p class=&quot;image&quot;&gt; &lt;p...

10
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
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; /* Отменяем подчеркивание у ссылки */
    }
1
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
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, 17:26
Цитата Сообщение от Ирина6 Посмотреть сообщение
получилось фото, под фоном, а нужно наоборот
подробнее ... желательно скринами
0
1 / 1 / 0
Регистрация: 19.11.2012
Сообщений: 59
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;
    }

на скрине в левом верхнем углу видно немного фотку, которая разместилась под фоном
Миниатюры
Разместить кнопки над картинкой  
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
07.04.2014, 19:49
Ирина6, картина на какой позиции должна быть? после меню или заменит фон ...
0
1 / 1 / 0
Регистрация: 19.11.2012
Сообщений: 59
07.04.2014, 20:05  [ТС]
ниже кнопок, справа
0
SF
Boo
142 / 117 / 55
Регистрация: 02.12.2013
Сообщений: 396
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>
1
1 / 1 / 0
Регистрация: 19.11.2012
Сообщений: 59
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, потому что кнопки сместились вправо
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
07.04.2014, 21:09
Помогаю со студенческими работами здесь

Текст над картинкой
Вот есть сайт: http://shot.qip.ru/00d6lK-3jAMAwjSg/ вот есть текст все норм а когда пытаюсь вставить картинку :...

Текст над картинкой
Помогите поставить текст над или под картинкой! Как это сделать? Заранее спасибо!

Текст над картинкой HTML
В общем, начал учить хтмл, хочу сделать 4 фотографии в таблице (с невидимыми границами) и чтобы над ними были надпись будь-то IPhone, IPad,...

Ютьюб-вставка над всплывающей картинкой
Здравствуйте, когда изображение всплывает, вставка над окном, как сделать так, чтобы плеер ютьюбовский был под окном? Сам сайт

Чекбокс по левому краю над картинкой
Совсем видимо соображать перестал - не могу выровнять чекбокс с текстом под картинкой и все. (см. рисунок 1) Код страницы


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
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 на бесплатный. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru