Rombs
-
Posts
3 -
Joined
-
Last visited
Rombs's Achievements
Explorer (1/14)
0
Reputation
-
Ептишь - моптишь... первая ссылка просто офигенная. Прчтиал весь цикл статей про CSS. Думал, что лучше чем на этом сайте инфы не надыбаю, а вот на те... Спасибо, все понял. Причем даже больше, чем расчитывал ) многие вопросы в голове улеглись - хорошо так
-
Добрый день! Спасибо за ответ - 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; } то все приходит к ожидаемому виду. Заранее спасибо за помощь.
-
Добрый день! Решил сверстать интерфейс приложения. С 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 - я думал, что отступ от него будет. Заранее спасибо!