границы сдвига элементов при изменении размеров страницы (css)

Zhihar · December 24, 2015

Всем привет

У меня вопрос - можно ли только с помощью css и html тегов (без привлечения JS) реализовать следующую вещь:

есть 2 элемента -

один всегда находится слева сверху страницы



img.corner_lt {

width:  200px; 

border:  0px; 

display:  block; 

position:  absolute; 

left:  10px; 

top:  10px;

z-index: 1000;

}

второй - сверху по центру экрана (div в котором находится текст)



div.menu {

width:  100%;

height: 30px;

padding: 15px 0px 15px 0px;

border-style: none;

display:  block; 

position:  absolute;  

text-align:  center;

}

Когда окно браузера начинает уменьшаться (по ширине), то текст (из div.menu) рано или поздно начинает наползать на изображение (img.corner_lt).

А хотелось бы получить следующее поведение

1. пока текст не наползает на изображение, то он находится по центру страницы

2. как только он начинает наползать на изображение (ну или лучше не доползать до него 10px), то дальнейшее смещение текста прекращается, а у окна появляется горизонтальная прокрутка (как будто работает min-width)

Такое поведение можно реализовать?

Q4Dizzy · December 24, 2015

На фидл выложите ваш первый вариант.. Там будем думать.

Zhihar · December 24, 2015

http://rusfolder.com/44574976 - архив

вот по отдельности файлы - но картинки надо положить в img/ папку

http://rusfolder.com/44574973

http://rusfolder.com/44574974

http://rusfolder.com/44574975

Igor Schnaider · December 25, 2015

Хе-хе, а ответ вам тоже в виде архива с вводом капчи, просмотром рекламы и ожиданием в 30 секунд? :mellow:

Zhihar · December 25, 2015

Хе-хе, а ответ вам тоже в виде архива с вводом капчи, просмотром рекламы и ожиданием в 30 секунд?

Пипец, никогда больше ifolder пользоваться не буду.

Вот html код, изображения можно вставить любые.

Главное - надо достичь того, чтобы

1. меню было по центру страницы

2. при сворачивании страницы оно сдвигаясь не налезало на изображение, а останавливалось рядом с ним

<html lang="en"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> html, body {padding:  0px; margin:  0px;height: 100%;background-color: #ffffff;} /* Меню */div.menu {width:  100%;height: 30px;padding: 15px 0px 15px 0px;border-style: none;display:  block; position:  absolute;  text-align:  center;} div.menu a {padding:  0px 10px 0px 10px;color:  #000000;font-family:  Calibri;font-size:  24px;font-weight:  400;text-decoration:  none;} div.menu a.selected {text-decoration:  underline;} div.menu a.disabled {color:  #d0d0d0;} /* Границы страницы */img.corner_lt {width:  200px; border:  0px; display:  block; position:  absolute; left:  10px; top:  10px;z-index: 1000;} img.corner_rb {width:  200px; border:  0px; display:  block; position:  absolute; right:  10px; bottom:  10px;z-index: 1000;} </style> </head> <body> <img class = "corner_lt" src = "img/lt.png"><img class = "corner_rb" src = "img/rb.png"> <div class = "menu"><a href = "who.html" class = "selected">КТО</a><a href = "when.html">КОГДА</a><a href = "where.html">ГДЕ</a><a href = "wishlist.html">ВИШЛИСТ</a></div> </body> </html>

Igor Schnaider · December 25, 2015

Ну, как вариант :-)

Zhihar · December 25, 2015

Ну, как вариант :-)

Вроде то что нужно! Сейчас буду код думать

А 2 варианта - это просто 2 подхода (вроде в работе отличий не заметил)?

P.S.

А... понял - CSS3 в первом случае

P.P.S.

А такой вопрос - вместо жесткого указания границы слева 210px я могу как-нибудь задать это в относительном виде - типа lt_corder.width + 10px (только опять же силой CSS)

Edited December 25, 2015 by Zhihar

Zhihar · December 25, 2015

Ну, как вариант :-)

А нет - заметил ошибку - текст меню выравнен не по центру, а смещен на этот самый 210px

Sign In

границы сдвига элементов при изменении размеров страницы (css)

Question

Zhihar

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

Q4Dizzy

Link to comment

Share on other sites

Zhihar

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

Zhihar

Link to comment

Share on other sites

Igor Schnaider

Link to comment

Share on other sites

Zhihar

Link to comment

Share on other sites

Zhihar

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information