Jump to content
  • 0

Резиновый макет!


Flanidub
 Share

Question

Здравствуйте! Посидев на сайте htmlbook.ru в разделе макеты, попробывал сделать получилось,но у меня есть проблема,заключается она в том,что я хочу сделать резиновый макет с тремя колонками,там он есть но он не резиновый и поэтому хотел узнать как мне такой сделать,я новичок если кто сможет объяснить или просто совет дать буду рад выслушать).И ещё кое что,там в макетах есть 1 резиновый макет с двумя колонками вот вопрос, сделав макет и сделав два блока меню слева использую float у меня получилось,сделал 3ий блок хотел сделать меню справа,но блок почему то оказался на уровне нижнего блока слева пытался поднять его на верх не получилось!Если кто может помогите мне с этими 2умя вопросами(понимаю они далеко не корректные,но я в этих делах пока не силён,надеюсь на вашу помощь) заранее огромное спасибо)!

Link to comment
Share on other sites

Recommended Posts

  • 0

))) проблема как раз таки в том что здесь где то писал мол выкладывать html код тут нельзя а на http://cssdeck.com/ я когда делал забыл сохранить звучит конечно дибильно...! Без макета не получить

ся помочь?

И ещё так как я новичок не сильно понимаю,расщитываю на вашу помощь) если сможете ем то помогите)

Link to comment
Share on other sites

  • 0

Вам лучше бы почитать тогда сперва про адаптивную верстку

И тут например

Хотя я уже смутно понимаю, что вы подрузамеваете под резиновость.

Медиа запросы http://htmlbook.ru/css/value/media

Link to comment
Share on other sites

  • 0

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

если я не ошибаюсь конешно))

Link to comment
Share on other sites

  • 0

nrofopr, http://cssdeck.com/labs/full/6s7wy9tj/undefined если знаете подскажите пожалуйста !

В этом макете , как зделать так что бы не зависимо от контента (хоть мало его хоть много) ,футер следовал за ним а то я зафиксировал подвал он остаётся в низу даже когда мало контента. и ещё 1 вопрос как в этот макет можно добавлять новые блоки а то не одни колонки не нужны?спасибо за ответ)

http://cssdeck.com/labs/6s7wy9tj

первая ссылка не та извините)

Link to comment
Share on other sites

  • 0

Футер и так следует за контентом. Если хотите чтобы он был всегда за контентом, даже когда мало текста, дак и прибивать не надо было) У #maket min-height: 100% уберите и футер отлипнет.

Что значит добавлять новые блоки? Берете и добавляете новые дивы

Link to comment
Share on other sites

  • 0

ну это я понимаю но располагать их как относительно уже стоящих? как мне под ними их сделать и слева и с права?

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

имеено ответ на этот вопрос мне нужен как новые блоки с помощью css распологать под уже стоящими)

я знаю что на многих форумах флудить нельзя если я много задаю вопросов(так как я новичок) вы говорите) ну или я могу с вами в личке пообщаться что бы тут не мешать)

Link to comment
Share on other sites

  • 0

Например у вас есть #left, это и есть ваша основная колонка.

Внутрее нее уже создавайте новые, например, div.menu, div.logo и т.п.

Получится что то типа такого:

#left

.logo

.menu

.others

и так во всех блоках.

Лучше тут пишите, чтобы может еще кто ответил

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

  • 0

и у меня почему то , все блоки все равно лепятся в одну колонку ,как между ними сделать нужный отступ с помощью margin или padding?

Теперь и я вас не понимаю) я знаю в чём проблема , я не корректно просто задаю вопросы не силён я пока тут,так что(

Link to comment
Share on other sites

  • 0

я уже что только не читал мне всего лишь на всего надо сделать блоки меню находящиеся друг по другом и всё я сам не могу просто и отступы между ними они лепятся в одну кучу все...

А всё получилось вроде бы))) спасибо огромное за помощь и потраченное время)

http://cssdeck.com/labs/6s7wy9tj вот посмотрите сделал меню справа примерно правильно или нет?

ой слева)))

Link to comment
Share on other sites

  • 0

Да вроде правильно, только пользуйтесь классами, а не id.

В случае классов вам бы не пришлось плодить #menu1, #menu2... можно было бы задать всем класс .menu, если конечно у всех блоков одинаковые свойства

Link to comment
Share on other sites

  • 0

ясно я так и сделал вот уже и справа)) http://cssdeck.com/labs/6s7wy9tj но вот ещё кое что как мне в контенте сделать разделения там тоже одна колонка вот знаете, как делают блоками контент по одной новости идёт как блок меню если вы поняли) по моим тупым объяснениям

Link to comment
Share on other sites

  • 0

а во вторых у меян почему то когда создаю блоки в контенте они не вниз спускаются а друг на друга лезут как исправить?)

http://cssdeck.com/labs/6s7wy9tj вот так сейчас как вниз спускать? извините за то что много вопросов (

Link to comment
Share on other sites

  • 0

странно это как то всё( спасибо что хоть помогаете)) плюнули бы уже давно)) я пока пытаюсь сделать но что то как то....

не очень дела

всё остальное сделал ещё с этим разобраться и отлично будет)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Vetal6666
      Как в верстке создать этот объект?🤔 (Углы по 60 градусов - то есть треугольник равносторонний)
    • By _dev_
      Всем привет, коллеги. Я - начинающий в этом деле, поэтому сильно не разносите) Если кому не сложно - оцените пожалуйста мою работу, укажите ошибки. Жду Вашу критику. Вот свёрстанный макет - https://cleaning-company-001.000webhostapp.com/
    • By tohastar
      Здравствуйте! Помогите разобраться. Для детского садика требуется создать карту сайта по новым требованиям. Карту создали с помощью генератора, внесли небольшие изменения в код, но теперь хочется упорядочить блоки по модулям на 4 столбика, как добавить новые столики понятно, главное их упорядочить. Т.е. для примера модуль подменю "важная информация" находится с верху и относящиеся к нему страницы вниз и так далее. Но к сожаление не понятно, как это можно реализовать, все добавленные вновь страницы идут последовательно вниз. Пришлось отделять тегами < p>, но вверх поднять их не получается.  http://vasilyek78.ucoz.ru/Dokument/SiteMap.html адрес расположения карты сайта.
    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By cozy_eternity
      Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..

       
      <label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
  • Обсуждения

    • Как здесь (https://skr.sh/sEfRBjoTUH1) правильно задать позиционирование? <ul class="list bottom-header-container-list"> <li class="bottom-header-container-list-item"> <div> <img src="./images/mail-svg.svg" alt="иконка эл.почты" width="28" height="22"> </div> <p>Mail Us</p> <a href="mailto:Info@bluecollar.com">Info@bluecollar.com</a> </li> <li class="bottom-header-container-list-item"> <div> <img src="./images/phone-svg.svg" alt="иконка телефона" width="26" height="26"> </div> <p>Call Us</p> <a href="tel:+01569896654">+01 569 896 654</a> </li> </ul>  
    • Сам сделал этот эффект? Ну или вообще сам писал этот код? 
    • Доброго времени суток. Есть сайт, онлайн магазин на WP, есть код- кнопка (на скрине) <div class="woocommerce-product-details__short-description"> <h5 class="wd-entities-title green sg-popup-id-12581">Нашли дешевле? Снизим цену!</h5> <?php echo $short_description; // WPCS: XSS ok. ?> </div> нужно как-то ограничить данный код от 2 категорий товаров на сайте, ранее работал с opencard там было все просто, а тут информации найти не могу, либо просто не так ищу. Прошу помощи либо статьей, либо направить в нужное русло поисков, может я просто формулирую неправильно данный вопрос. Заранее благодарю.
    • Я не вижу указаных Вами проблем заданном сайте   PS: устное предупреждение за мультипостинг. Используйте одну тему для одного вопроса.
    • Мой сайт - https://vasyldubno.github.io/project1/#directions На нем установлен скрипт MixItUp 3 для фильтрации постов. На ноутбуке все отлично работает. Но на смартфоне не работает, и в консоле выдает ошибку - [MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.
×
×
  • 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