Mark26
-
Posts
5 -
Joined
-
Last visited
Mark26's Achievements
Explorer (1/14)
0
Reputation
-
Помощь с расположением блоков,и резиновой вёрсткой
Mark26 replied to Mark26's question in HTML Coding
Всё,понял как ты это всё реализовал,и про margin тоже спасибо,буду знать теперь,ну и спасибо огромное за помощь в целом,всё решилось -
Помощь с расположением блоков,и резиновой вёрсткой
Mark26 replied to Mark26's question in HTML Coding
нет, это тут не при чем. вы все блоки на абсолют повесили... так нельзя. у вас, кстати, задача не самая простая для новичка. тут можно использовать табличные свойства и все будет надежно работать без всяких скриптов. http://codepen.io/Z1gnet/pen/vEKvox можно использовать скрипты что бы они тянули блоки зеленые на необходимую высоту. (хотя я считаю что это вариант хуже). думаю есть еще способы. с радость поглядел бы Хм,пока разбирался назрел ещё один вопрос: в том коде который вы мне предоставили все элементы имели отступ от всех четырёх краёв экрана несмотря на то что уже был прописан margin: 0 в элементе body,исправил я это убрав сточку с "padding: 10px 15px;" в обёртке (wrapper),но в итоге к краю экрана вплотную прислоняются и меню и контент,мне надо чтобы и меню (с левого краю) и контент (с правого краю) имели отступ от края экрана как и везде (10px),пытался исправить это опять же через margin,но он почему-то не срабатывает,что подскажете делать?Вот здесь (см.скриншот: http://hkar.ru/xj82) хорошо видно что меню с левого краю и контент с правого краю заканчиваются раньше чем футер и хедер,благодаря тому самому отступу в 10px который и необходим ,заранее спасибо за ответ!Надеюсь не нагрузил вас. -
Помощь с расположением блоков,и резиновой вёрсткой
Mark26 replied to Mark26's question in HTML Coding
нет, это тут не при чем. вы все блоки на абсолют повесили... так нельзя. у вас, кстати, задача не самая простая для новичка. тут можно использовать табличные свойства и все будет надежно работать без всяких скриптов. http://codepen.io/Z1gnet/pen/vEKvox можно использовать скрипты что бы они тянули блоки зеленые на необходимую высоту. (хотя я считаю что это вариант хуже). думаю есть еще способы. с радость поглядел бы Спасибо огромное за помощь!Чуть позже гляну ещё ваш код,разберусь более детально,ну а так моя проблема решена -
Помощь с расположением блоков,и резиновой вёрсткой
Mark26 replied to Mark26's question in HTML Coding
Я так понимаю в HTML5 это всё более упрощено,и такие проблемы как у меня сейчас,не возникнут? -
Приветствую всех посетителей этой темы! Сейчас учу CSS и при создании шаблона для будущего сайта возникли некоторые проблемы,а далее: (см.скриншот: http://hkar.ru/xj7y) 1.Хотелось бы сделать блок контента и блок меню резиновыми,а не так чтобы их ширина и высота выравнивались только по тому,что находится внутри самих блоков,при этом эти блоки должны сохранить тот маленький отступ от краёв экрана и от других элементов. 2.Футер уже прижат к низу сайта,но проблема в том,что блок контента и блок меню игнорируют футер и продолжают идти дальше,хотелось бы чтобы эти два блока останавливались перед футером и не продолжали идти дальше,при этом имея маленький отступ как и с других сторон. Вот так примерно хотелось бы всё это видеть,при этом чтобы всё было резиновым (см.скриншот: http://hkar.ru/xj82) P.S Ну и скажу заранее: спасибо вам за любую помощь,даже за простые советы,я не заставляю вас прям писать для меня весь необходимый код,если вам конечно не лень то отдельное спасибо таким людям,прошу особо не придираться к моему ужасному коду,я и сам понимаю что у меня там миллион ошибок,но все мы когда-то начинали... Далее друг за другом идёт сам код (HTML и CSS): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>*название*</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"></div> <div id="menu"> <form> <p>Ваш Email адрес:<br> <input type="text" name="Login Email"> <br> <p>Пароль:<br> <input type="password" name="Login Password"> <br> <br> <input type="submit" value="Вход"> <a href="Registration.html">Регистрация</a> </form> </div> <div id="content"> <p align="center">Добро пожаловать!</p> <hr noshade> <p>Текст текст текст текст текст текст:</p> <ul> <li>Текст текст текст текст текст текст</li> <li>Текст текст текст</li> <li>Текст текст текст текст текст текст текст</li> <li>Текст текст текст текст текст текст текст текст текст</li> </ul> <hr noshade> <p>Текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст текст</p> </div> <div id="footer"></div> </body> </html> body { margin: 0; padding: 0; font-size: 75%; font-family: Arial; color: #000000; background: #fff; } #header { background: #FFD700; height: 40px; border-radius: 0px 0px 20px 20px; } #menu { background: #32CD32; float: left; position: absolute; margin: 10px; border: 1px solid blue; padding: 10px; height: 100%; border-radius: 20px; } #content { background: #32CD32; position: absolute; height: 100%; float: right; margin: 10px; margin-left: 16%; border: 1px solid blue; padding: 10px; padding-top: 4px; border-radius: 20px; } #footer { width: 100%; height: 40px; position: absolute; bottom: 0; background: #FFD700; border-radius: 20px 20px 0px 0px; }