Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
#1

Подскажите, пожалуйста - HTML, CSS

24.02.2014, 18:38. Просмотров 299. Ответов 7
Метки нет (Все метки)

Здравствуйте!
Подскажите, пожалуйста, у меня, есть 4 блока 500х1000px, как сделать что бы на странице в нормально состоянии они были обрезаны 500х500 а полностью ”открывалась” только при наведении мыши?
Как то так:
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
24.02.2014, 18:38
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Подскажите, пожалуйста (HTML, CSS):

Подскажите пожалуйста - HTML, CSS
Подскажите пожалуйста как набраться опыта в верстке PSD макетов и просто в работе цсс и хтмл вместе?

Подскажите,пожалуйста - HTML, CSS
Здравствуйте! У меня проблема ,(блок увеличивается от команды padding) только содержимое этого блока(картанка),однозначно меньше размера...

Подскажите пожалуйста - HTML, CSS
Всем доброго дня. Сейчас тренируюсь в создании сайтов. Ориентируюсь на адаптивную верстку. На первый взгляд сделал все верно, но сайт...

Подскажите пожалуйста - HTML, CSS
Делаю разметку для интернет магазина,первый день в css. Как передвинуть нижний блок в верх,прям под block-header #block-body{ ...

Подскажите пожалуйста с прокруткой на сайт - HTML, CSS
Здравствуйте, подскажите как мне сделать прокрутку ( скроллинг ) на сайт, который сделан из фреймов?

Мастера, подскажите новичку пожалуйста - HTML, CSS
Приветствую форумчане. Буквально месяц назад начал изучать html и css абсолютно с нуля, до этого даже не представлял, что такое теги. ...

7
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
24.02.2014, 20:56 #2
Ссылка на картинку битая. Предварительно нати вам:
CSS
1
2
.block{width: 500px; height: 500px;}
.block:hover{width: 500px; height: 1000px;}
0
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
24.02.2014, 21:07  [ТС] #3
35cm,
спасибо, а как сделать что б наведенный блок был поверх вех других блоков (position:absolute; не помогает)
З.Ы. вот правильная ссылка на картинку
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
24.02.2014, 21:09 #4
Загрузите на форум скриншот и код css/html.
0
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
24.02.2014, 21:30  [ТС] #5
Вот код:

HTML5
1
2
3
4
5
6
<div class="wrap">  
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
        <div class="block"></div>
    </div>
CSS
1
2
3
.wrap{width:1100px;}
.block{width: 500px; height: 500px; position:absolute; display:inline-block;}
.block:hover{width: 500px; height: 1000px;}
0
БогданVB
3 / 3 / 0
Регистрация: 25.10.2013
Сообщений: 41
24.02.2014, 21:45 #6
z-index + position:relative
0
stan07
2 / 2 / 0
Регистрация: 01.09.2011
Сообщений: 137
24.02.2014, 22:07  [ТС] #7
БогданVB,
Не получается - http://jsfiddle.net/KUgVD/

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
<div class="wrap">  
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
                                                                                    
        </div>
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
 
        </div>
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
 
        </div>
        <div class="block">
            CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects.
 
No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
 
        </div>
    </div>
CSS
1
2
3
.wrap{width:700px; background:#f6f6f6;}
.block{width: 300px; height: 300px; position:relative; z-index:99; border:1px solid #0FF; display:inline-block;}
.block:hover{width: 300px; height: 1000px;}
 Комментарий администратора 
Правила форума пункт 5.19

Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
0
Mr Coder
365 / 365 / 82
Регистрация: 04.04.2013
Сообщений: 1,564
25.02.2014, 00:44 #8
stan07, как вариант можно так сделать:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="wrap">  
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="col">
        <div class="block">
 CSS3Gen allows you to easily generate useful snippets of CSS3 and copy them straight into your projects. No more trying to remember what the syntax is for the border-radius rule in a webkit browser. These tools take care of all the vendor prefixes.
        </div>
    </div>
    <div class="clr"></div>
</div>
CSS
1
2
3
4
5
.wrap{width:640px;}
.col{position: relative; top: 0; width: 280px; float: left; margin: 10px;}
.block{border:1px solid #000; width: 280px;}
.block:hover{position: absolute; top: 0; left: 0; width: 280px; height: 370px; background: #dfdfdf; z-index: 10;}
.clr{clear: both;}
http://jsfiddle.net/KUgVD/3/
0
25.02.2014, 00:44
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
25.02.2014, 00:44
Привет! Вот еще темы с ответами:

HTML CSS TEXTBOX подскажите пожалуйста - HTML, CSS
ПОдскжите пожалуйста, как реализовать вот такие текстбоксы

Пожалуйста подскажите есть ли серьезные ошибки - HTML, CSS
Доброго времени. Студент-айтишник, вэб у меня непрофильное. Знакомый попросил сделать небольшой сайт статику. Я согласился, прочитал...

Верхнее горизонтальное меню подскажите пожалуйста - HTML, CSS
Верхнее горизонтальное меню подскажите пожалуйста как можно сделать его rip , а то очень уж оно подходит на мой сайт. ...

Подскажите пожалуйста. Уже мозги кипят - HTML, CSS
Ребят, помогите. Вот cfqn приложил ниже. Суть в чем, как сделать вот такую форму как на сайте? Чтобы человек зашел, оставил имя и номер...


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

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

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.