Azadi
-
Posts
178 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Everything posted by Azadi
-
А вдруг кто-нибудь взял бы да и сверстал?
-
Мне кажется, что решить данную задачу кроссбраузерно и без заморочек сейчас невозможно. Если не брать в расчет IE6, тогда все было бы достаточно просто: оперируем display:table, display:table-cell; и т.д. В ослике же поддержка данных свойств отсутствует. Ну а блочная верстка действительно не обладает свойствами для воссоздания поведения табличного макета, о котором написал автор топика. Таблица вообще уникальный элемент, так как в ней реализовано взаимодействие целой группы элементов (table-cell). Элементы с display:block так не могут. Хотя... если писать костыли специльно для IE6, то, возможно, что извращенный вариант и будет найден. Но здесь как раз такой случай, когда "игра не стоит свеч, а результат труда".
-
Ну если вы так ставите акценты, то мне больше нравится такой вариант трехколоночного макета. Хотя под себя его адаптировать довольно сложно
-
Сделать такую рамку достаточно просто. Очень много сайтов сейчас так оформляются. Смотрите и делайте по аналогии. Хотя можно чуть-чуть расписать... Ну смотрите. Вы указали 3 элемента. Верхний назовем Header, нижний - Footer. После BODY свтавляем блок-контейнер для всего содержимого: Wrap. Задаете wrap ширину и выравниваете его по центру окна. Дальше фотошоп. Т.к. ширина блока фиксированнаяЮ то можно просто вырезать нужные части рамки. Т.е. для Header'а вырезаете верхнюю часть изображения рамки (смотрим на ваше рисунок выше), а для Footer'а соответственно - нижнюю. Потом с середины вырезаете кусок высотой 1-2px и все. Для Wrap'a ставите: background:url(bg-image.gif) center repeat-y; Для Header'a: background:url(header-image.gif) top left no-repeat; Для Footer'a: background:url(footer-image.gif) bottom left no-repeat; Примерно структура HTML-документа должная быть как тут
-
BODY {margin:0 auto;} (+ Doctype желательно указать)
-
Ну можно попробовать что-то вроде найсбокс или искать решение на JQuery, например.
-
Ссылка1 - прям первый результат запроса. От себя добавлю отличную подборку с http://webdev.lovata.com
-
3 колонки, шапка, подвал - контент вверху html (после шапки)
Azadi replied to LeoStanlik's question in HTML Coding
Посмотрите эту ссылку. Возможно, найдете для себя интересные мысли. А решение с position:absolute кажется слишком радикальным. -
display:inline для проблемного блока?
-
Ну удачи в дальнейшем развитии У вас есть куда расти. Мой первый опыт был много хуже сделан
-
Как убрать отступ в FF и сделать рабочей графическую ссылку
Azadi replied to Dev's question in HTML Coding
Если вы говорите о сайте, то неплохо было бы привести больший кусок кода и локализовать проблему. Мои варианты: проверьте Doctype, потом padding, ну и на последок line-height для проблемного блока. Про самокомментируемую ссылку - улыбнуло Кстати говоря, Девятилап все правильно сказал. Указывать для ссылки display:block более правильно и логично, чем пихать в строковый элемент блочный по своей природе . -
Пункты верхнего меню на главной при наведении становятся нечитаемыми, а в целом сайт меня пугает Не люблю я такие сайты. Мне не нравится в нем практически все... Про верстку сказать ничего не могу, если только матом... Как первый опыт табличной верстки и работы с картинками вполне даже ничего. В школе бы "5" поставили смело.
-
А какое поведение макета подразумевалось? Просто у вас я заметил 2 нестыковочки. 1). У #divright прописан height: 30px. IE обрабатывает параметр height так же, как FF и Opera обрабатывают min-height. Поэтому текст ведет себя так, как должен - выходит за рамки. Ставьте min-height: 300px короче 2). Вы изъяли из нормального потока #divleft и #divright при помощи float:left, а очистить их забыли... IE на это пофик т.к. явно указана высота этих блоков. Предлагаю вам прописать в стилях #divmiddle:after { content:"."; clear:both; display:block; height:0; visibility:hidden; } и еще clear:both для #divbottom в догонку
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <link href="style_of_page_menu.css" rel="stylesheet" type="text/css" /> <title>Page2</title> <style type="text/css"> .col1, .col2 { float:left; width:160px; height:40px; /**/ text-align:center; line-height:40px; /**/ padding:5px 10px; border:#000 solid 1px; } #wrap { float:left; background:#ccc; } #wrap:hover div.col1 {text-decoration: none; background-color: #FFCCFF;} #wrap:hover div.col2 {text-decoration: none; background-color: #99CCFF;} </style> </head> <body> <div id="wrap"> <div class="col1"> <b>Заголовок ?1</b> </div> <div class="col2"> <b>Заголовок ?2</b> </div> </div> </body> </html> Не будет работать в 6-м ослике.
-
Людмила, не видя кода я не могу дать внятного ответа на ваши вопросы. Только предположения и догадки. Попробуйте самостоятельно найти баг в верстке, почитайте эту статью по теме. Определенно поможет Только для того, чтобы грамотно переделать макет и сделать его более гибким, придется прочитать немало литературы. Могу дать несколько советов, как бы я поступил на вашем месте. Я бы убрал float:left; и width для класса .box (таблица стилей style.css) и добавил бы самоочистку float для .maincolumn (как у вас уже есть в categories.css): #categories:after,.maincolumn:after { content: '.'; display: block; clear: both; visibility: hidden; height: 0; } Без float и width ваш блок .box станет растягиваться по ширине родительского элемента, и без проблем можно будет использовать padding. И еще. Я не смотрел внимательно код вашей страницы, не тратил много времени на обдумывание вариантов решения задачи. Возможно, ошибка кроется в другом месте кода. Так что будьте внимательнее и попробуйте самостоятельно что-нибудь решить
-
Мда. Раз вы не можете показать пример внутренних страниц, а проблемы у вас только с главной, то... не проще ли специально для главной страницы написать внутренний корректирующий стиль CSS? Внести в него все исправления, а для внутренних страниц оставить все как было (раз вы утверждаете, что у вас там все тип-топ). А структуру давайте пока трогать не будем Пусть е?... P.S. внутренний стиль можно задать через или вообще инлайн записать как
-
"ВИНИЛ НЕСУТ =)" ))) У меня когда-то прошел такой вот код, сгенерированный Dreamweaver: <script type="text/javascript"> AC_FL_RunContent( 'data','intro.swf','type','application/x-shockwave-flash','codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0','width','681','height','138','movie','flash/0445intro','quality','high' ); //end AC code </script> <noscript> <object data="intro.swf" type="application/x-shockwave-flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="681" height="138"> <param name="movie" value="flash/0445intro.swf"/> <param name="quality" value="high"/> </object> </noscript> скрипт (опять же, из дрима) Вроде бы есть валидные варианты интегрирования флеша: http://xhtml.ru/2005/06/11/flash_valid/
-
.box { float: left; width: 475px; margin: 0 0 15px 0; padding: 15px 10px 10px 10px; } Сочетать фиксированную ширину и отступы так, как это сделано у вас - не рекомендуется. Современные браузеры прибавляют к ширине странички еще и значение padding, а IE - нет. Поэтому у вас в IE ширина блока 475px, а в остальных браузерах - 495px. Вариантов решения много. Самый простой - хак для ослика. Самый верный - немного переделать структуру странички и переназначить стили.
-
http://110mb.com - мой выбор. OS: Debian Linux PHP Ver: 5.1.6 MySQL Ver: 5.0.27 Новичку хватит с лихвой.
-
Может быть получится развить решение В. Токмакова?
-
Как зафиксировать элемент относительно окна браузера
Azadi replied to jsmaximum's question in HTML Coding
Посмотрите здесь. Чтобы блок не "дрожал" в IE, нужно прописать background:#fff url('/n.gif') no-repeat; и background-attachment:fixed; для BODY. -
Может. Или просто задали класс элементу, а потом забыли убрать из кода, или оставили "про запас". Стиль у кодера такой, видимо... удобно ему так было, наверное. Лично мне был бы неудобно воспринимать такой код. Читайте матчасть про наследование В принципе, можно. Но только осторожно. Наследование - хитрая штука. У разных селекторов разный приоритет, можно и запутаться.
-
Это была тренировка, первый опыт в верстке Очень хотелось сделать без таблиц... И было много свободного времени. Эхх. Спасибо что хоть кто-то откликнулся
-
Такое решение на div'ах вам не подойдет? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { padding:0; margin:0; border:0; } body{text-align:center} .gallery {float:left; width:100px; text-align: center; display:inline; margin:20px; border:1px solid red} .gallery IMG{border:1px solid blue; vertical-align:bottom; width:98%;} .text {border:1px solid green; text-align:center;} </style> </head> <body> <h1>Пример работает в Сафари 3.1, FF 2.0.13, Opera 9.25, IE 7 и в ИЕ6.</h1> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> <div class="gallery"> <img src="pic.gif"> <div class="text">Подпись к рисунку</div> </div> </body> </html>
-
Такой проблемы нет, все на хоткеи навешано