muchachosll 0 Posted June 7, 2017 Report Share Posted June 7, 2017 Помогите разобраться с тегом div. Нужно сверстать вот такой тип шаблона: https://www.cy-pr.com/bitrix/components/bitrix/forum.interface/show_file.php?fid=88431&width=500&height=500 Пока только вот так https://www.cy-pr.com/bitrix/components/bitrix/forum.interface/show_file.php?fid=88432&width=500&height=500 Код <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <link href="css/style.css" type="text/css" rel="stylesheet"> <title>Тестируем блочные верстки</title> </head> <body> <div id="header"></div> <div id="left-1"></div> <div id="left-2"></div> <div id="right"> </div> <div id="center"></div> <div class="clear"></div> <div id="space"></div><!-- распорка --> <div id="footer" align="center"></div> </body> </html> html, body {border: 5px solid #000000;} body {margin: 0 10%; height:auto !importand; height: 100%;} #header {height:100px; border: 2px solid #0000FF; margin: 5px 5px 0px 5px;} #center {margin:5px auto; width:65%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify;} #left-1 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin-top: 5px; height:auto;} #left-2 {float:left; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin: 5px; height:auto;} #right {float:right; width:15%; border: 2px solid #4B0082; padding: 10px 10px; text-align: justify; margin-top: 5px;} #footer {height:30px; margin-top:-100px; border: 2px solid #0000FF; margin-top: 0 0; text-align: center; background-color: #ADD8E6;} /* добавляем отступ */ #footer p {margin: 3px auto 0 auto;} #space {height: 100px;} .clear {clear: both;} Quote Link to post Share on other sites
qpPeW 191 Posted June 7, 2017 Report Share Posted June 7, 2017 Разбейте блоки на шапку, контент и футер, а потом в контенте снова разбейте на левый блок, центральный блок и правый блок. Только в таком случаи у Вас не будет подобной проблемы. Quote Link to post Share on other sites
xmka 14 Posted June 7, 2017 Report Share Posted June 7, 2017 Должно быть что-то вроде этого: <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header></header> <main> <div id="left"> <div class="left"></div> <div class="left"></div> <div class="left"></div> </div> <div id="center"></div> <div id="right"> <div class="right"></div> <div class="right"></div> <div class="right"></div> </div> </main> <footer></footer> </body> </html> Дальше думаю поймешь, что делать Quote Link to post Share on other sites
qpPeW 191 Posted June 7, 2017 Report Share Posted June 7, 2017 <div class="left"></div> <div class="left"></div> <div class="left"></div> <div class="right"></div> <div class="right"></div> <div class="right"></div> В этих блоках классы left и right лишние, если в них прописывать позиционирование. Если же это просто общий класс для блока, тогда все норм. Quote Link to post Share on other sites
xmka 14 Posted June 7, 2017 Report Share Posted June 7, 2017 3 минуты назад, qpPeW сказал: <div class="left"></div> <div class="left"></div> <div class="left"></div> <div class="right"></div> <div class="right"></div> <div class="right"></div> В этих блоках классы left и right лишние, если в них прописывать позиционирование. Если же это просто общий класс для блока, тогда все норм. Да я имел ввиду общий класс для блока Quote Link to post Share on other sites
qpPeW 191 Posted June 7, 2017 Report Share Posted June 7, 2017 3 минуты назад, xmka сказал: Да я имел ввиду общий класс для блока Тогда норм, но я бы лучше сделал так. <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <header></header> <main> <section id="left"> <article class="left"></article> <article class="left"></article> <article class="left"></article> </section> <section id="center"></section> <section id="right"> <article class="right"></article> <article class="right"></article> <article class="right"></article> </section> </main> <footer></footer> </body> </html> Если уж делать все по феншую html5... Quote Link to post Share on other sites
xmka 14 Posted June 7, 2017 Report Share Posted June 7, 2017 А да точно по html5 так абсолютно правильно! Будем надеяться, что автор поймет, что к чему и не будет создавать, но 2 темы Quote Link to post Share on other sites
muchachosll 0 Posted June 8, 2017 Author Report Share Posted June 8, 2017 Спасибо большое. Попробую! и кто может напишите ссылку на умную книгу, где про эти теги почитать можно!!! Quote Link to post Share on other sites
Administrators DevilStar 1166 Posted June 8, 2017 Administrators Report Share Posted June 8, 2017 2 часа назад, muchachosll сказал: и кто может напишите ссылку на умную книгу, где про эти теги почитать можно!!! Всё есть онлайн и очень подробно - https://www.w3schools.com/html/default.asp Quote Link to post Share on other sites
muchachosll 0 Posted June 8, 2017 Author Report Share Posted June 8, 2017 6 минут назад, DevilStar сказал: Всё есть онлайн и очень подробно - https://www.w3schools.com/html/default.asp было бы на русском)) нашел Quote Link to post Share on other sites
Administrators DevilStar 1166 Posted June 8, 2017 Administrators Report Share Posted June 8, 2017 Только что, muchachosll сказал: было бы на русском)) Лезть в веб разработку без знания английского... ну так себе решение, если честно Вот на русском - http://htmlbook.ru/ Quote Link to post Share on other sites
muchachosll 0 Posted June 8, 2017 Author Report Share Posted June 8, 2017 у меня уже давно, при загрузке сайта http://htmlbook.ru/, вылазит вот это https://yadi.sk/i/LpKA3Uo-3JwDER Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.