Jump to content

New1234567

Newbie
 View Profile  See their activity

  • Posts

    7

  • Joined

  • Last visited

New1234567's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. New1234567
    http://codepen.io/anon/pen/rVBLJZ Вот что происходит. Ничего не центризуется. http://codepen.io/anon/pen/rVBLJZ Вот что происходит. Ничего не центризуется. Это без содержания, т.е. по идее по середине между левыми блоками и правым должен был быть еще большой блок с информацией.
  2. New1234567
    Так чтоль? Ага, идея правильная, но у меня больше блоков, можно показать на примере моих блоков?
  3. New1234567
    Я не понимаю как показать, но на второй картинке не должно быть так, как хочется, надо сделать так, чтобы при масштабе второй картинки, все было вместе как на второй, но слева и справа просто осталось место лишнее, а весь сайт сгруппировался к середине, как будто от центра и шел.
  4. New1234567
    Все блоки разлетаются по сторонам это проблема А на примере можете показать?
  5. New1234567
    Объясню по порядку Есть сайт как у меня, у него есть потолок и четыре блока, два слева, один права, еще один посередине между левыми двумя и правыми. Если увеличить масштаб, ну или разрешение на другом компьютере будет небольшим, надо, чтобы все блоки не накладывались друг на друга, а если уменьшить разрешение экрана, сделать, как на больших экранах, то блоки не уйдут влево и вправо, пытаясь привязаться каждый к своей стороне, а останутся вместе со всеми блоками, т.е. место будет много свободного по левой и правой стороне, но все блоки останутся друг с другом, а не разлетятся.
  6. New1234567
    Нет, сейчас поясню, что хотел сказать. Взять к примеру тот же контакт, там когда размер уменьшаешь, все окна вместе друг с другом к середине стыкуются, а не каждое отдельно гуляет и идет влево и вправо, оставляя середину одну.
  7. New1234567
    Здравствуйте, решил попрактиковаться с css. У меня вопрос тут созрел. Как сделать так, чтобы при изменении масштабирования все блоки не были по левой и правой сторонам а вместе со средним блоком были не растянутыми? И еще просьба, опишите как можно сделать, чтобы к примеру средний блок был посередине и не надо было его чем-то фиксировать к примеру позиционированием. Например: у меня есть верхний блок, он растянут по ширине на 100%, далее есть два левых и один правый, а посередине еще один с содержанием, он у меня ниже всех ставится, и приходится его фиксировать посередине. Ниже приведу в пример код, помогите его исправить так, чтобы, если изменить масштаб, сайт просто бы сжимал блоки к середине все к среднему блоку. <!DOCTYPE html><html><head> <title>Site</title> <link rel="stylesheet" href="normalize.css" type="text/css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><style type="text/css">body { background: url(fon.png);}#main { width: 100%; height: 70px; padding: 10px 0px 0px 0px; background: #a4b357; background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -o-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -ms-linear-gradient(top, #a4b357 0%,#75890c 100%); background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); -webkit-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -moz-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); text-align: center; vertical-align: middle; display: block; float: left;}#n { display: block; margin: 7px;}#n a { color: white; font-size: 2.3em; font-family: 'Open Sans', sans-serif; text-shadow: 0px 3px 3px #0A2B0B; word-spacing: 20px; text-decoration: none; padding: 0px 30px 0px 0px;}#menu1 { width: 300px; white-space: nowrap; margin: 30px 0px 0px 10px;}#top-menu1 { width: 300px; height: 70px; background: #a4b357; background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -o-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -ms-linear-gradient(top, #a4b357 0%,#75890c 100%); background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); -webkit-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -moz-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}#content-menu1 { width: 300px; height: 330px; background: white; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; opacity: 0.3;}#menu2 { width: 300px; white-space: nowrap; margin: 30px 0px 0px 10px;}#top-menu2 { width: 300px; height: 70px; background: #a4b357; background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -o-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -ms-linear-gradient(top, #a4b357 0%,#75890c 100%); background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); -webkit-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -moz-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}#content-menu2 { width: 300px; height: 200px; background: white; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; opacity: 0.3;}#menu3 { width: 300px; white-space: nowrap; margin: 30px 0px 0px 0px; position: absolute; right: 10px; top: 70px;}#top-menu3 { width: 300px; height: 70px; background: #a4b357; background: -moz-linear-gradient(top, #a4b357 0%, #75890c 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a4b357), color-stop(100%,#75890c)); background: -webkit-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -o-linear-gradient(top, #a4b357 0%,#75890c 100%); background: -ms-linear-gradient(top, #a4b357 0%,#75890c 100%); background: linear-gradient(to bottom, #a4b357 0%,#75890c 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4b357', endColorstr='#75890c',GradientType=0 ); -webkit-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -moz-box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); box-shadow: 0px 5px 3px 0px rgba(44,46,37,1); -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; border-top-left-radius: 10px; border-top-right-radius: 10px;}#content-menu3 { width: 300px; height: 600px; background: white; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; opacity: 0.3;}#content { width: 500px; height: 500px; background: black; position: absolute; top: 100px; left: 500px;}</style></head><body><div id="main"> <div id="n"><a href="#">Company</a> <a href="#">Products</a> <a href="#">Brands</a></div> <div id="menu1"> <div id="top-menu1"></div> <div id="content-menu1"></div> </div> <div id="menu2"> <div id="top-menu2"></div> <div id="content-menu2"></div> </div> <div id="menu3"> <div id="top-menu3"></div> <div id="content-menu3"></div> </div> <div id="content">hi</div></div></body><html>
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept