Jump to content

Rombs

Newbie
  • Posts

    3
  • Joined

  • Last visited

Everything posted by Rombs

  1. Ептишь - моптишь... первая ссылка просто офигенная. Прчтиал весь цикл статей про CSS. Думал, что лучше чем на этом сайте инфы не надыбаю, а вот на те... Спасибо, все понял. Причем даже больше, чем расчитывал ) многие вопросы в голове улеглись - хорошо так
  2. Добрый день! Спасибо за ответ - padding использовать можно, но я хочу понять почему так странно себя ведет margin? Я вычистил страницу от "мусора" и привожу конечный вариант: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ITP</title> <style> html { height: 100%; } body{ margin: 0px; padding: 0px; border: 0px; } div#top{ width: 960px; height:70px; background-color: blue; border: 0px red solid; } div#canvas{ width: 960px; height:100px; background-color: green; border: 0px red solid; } div#tabs{ margin: 10px; border: 0px red solid; } </style> </head> <body> <div id="top"></div> <div id="canvas"> <div id="tabs"></div> </div> </body> </html> Ума не приложу, почему canvas сдвигается вместе с tabs? При этом заметил странную "фишку" - если сделать так <div id="canvas">some text <div id="tabs"></div> </div> или так (сделать border видимым) div#canvas{ width: 960px; height:100px; background-color: green; border: 1px red solid; } то все приходит к ожидаемому виду. Заранее спасибо за помощь.
  3. Добрый день! Решил сверстать интерфейс приложения. С HTML знаком, но далеко не профи. HTML страницы <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ITP</title> <style> html { height: 100%; } body{ margin: 0px; padding: 0px; border: 0px; } div#top{ width: 960px; min-height:70px; height:auto !important; height:70px; background-color: green; background: url("./img/top/logo.png") no-repeat, url("./img/top/squares.png") no-repeat 100% 0, url("./img/top/bg.png") repeat-x; overflow: hidden; border: 0px red solid; } div#top div#menu{ width: 210px; min-height: 20px; height: auto !important; height: 20px; float: right; margin: 40px 10px 0 0; border: 0px red solid; } div#top div#menu span.separator{ font: bold 18px Arial; color: #FFFFFF; } div#top div#menu a{ font: bold 12px Arial; color: #FFFFFF; text-decoration: none; } div#top div#menu a:HOVER{ text-decoration: underline; } div#canvas{ width: 960px; min-height:698px; height:auto !important; height:698px; background: url("./img/canvas/bg.png"); border: 0px red solid; } div#canvas div#tabs{ margin: 100px; border: 1px red solid; } </style> </head> <body> <div id="top"> <div id="menu"> <a href="#">Рабочий стол</a> <span class="separator"> | </span> <a href="#">Настройки</a> <span class="separator"> | </span> <a href="#">Выйти</a> </div> </div> <div id="canvas"> <div id="tabs"> aaa </div> </div> </body> </html> В общем не могу понять, почему из-за div#tabs поехал div#canvas - я думал, что отступ от него будет. Заранее спасибо!
×
×
  • 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