humn
Newbie-
Posts
5 -
Joined
-
Last visited
humn's Achievements
Explorer (1/14)
0
Reputation
-
Требуются умные люди! Создание фотогалереи на основе CSS
humn replied to humn's topic in Goods and Services
И так у меня продвижение я выравнил шампку , добавив после галереи : <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection, tv" /> Незнаю как это все влияет но работает ) не берд какой то вышел, в браузере IE все развалилось нафиг -
Требуются умные люди! Создание фотогалереи на основе CSS
humn replied to humn's topic in Goods and Services
Я не обвиняю - я не согласен с тем что тему надо было перемещать. Мнение участников нельзя стаивть выше своего мнения. Надо считаться с людьми. Я не глупый человек и знаю где должна быть моя тема что бы она эффективно работала. Тут ее эффективность снижается до минимума. Сижу пытаюсь совместить стили. Но пока без успешно. Конфликты то там то тут. Решил установить перед галереей в коде стиль, написав : <link rel="stylesheet" href="css/hoverbox.css" type="text/css" media="screen, projection, tv" /> И удалил в стиле hoverbox.css праметр body , в итоге что-то близкое стало, но фотографии при наведении ложаться друг под друга. И съехала шапка сайта : -
Требуются умные люди! Создание фотогалереи на основе CSS
humn replied to humn's topic in Goods and Services
Я прислушался и решил установить вот такие вкладки : http://prootime.ru/vkladoki-css и добавил туда галерею на яве со стилями. Код у галереи вот такой : <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Hoverbox Image Gallery</title> <link rel="stylesheet" href='css/hoverbox.css' type="text/css" media="screen, projection" /> <!--[if lte IE 7]> <link rel="stylesheet" href='css/ie_fixes.css' type="text/css" media="screen, projection" /> <![endif]--> </head> <body> <h1>Hoverbox Image Gallery</h1> <ul class="hoverbox"> <li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li> <li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li> <li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li> <li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li> <li><a href="foto/167.jpg" target="_blank"><img src="fotoS/167.jpg" alt="description" /><img src="fotoS/167.jpg" alt="description" class="preview" /></a></li> </ul> </body> </html> У галереи есть стиль hoverbox.css в котором * { border: 0; margin: 0; padding: 0; } /* =Basic HTML, Non-essential ———————————————————————-*/ a { text-decoration: none; } body { background: #fff; color: #777; margin: 0 auto; padding: 50px; position: relative; width: 620px; } h1 { background: inherit; border-bottom: 1px dashed #ccc; color: #933; font: 17px Georgia, serif; margin: 0 0 10px; padding: 0 0 5px; text-align: center; } p { clear: both; font: 10px Verdana, sans-serif; padding: 10px 0; text-align: center; } p a { background: inherit; color: #777; } p a:hover { background: inherit; color: #000; } /* =Hoverbox Code ———————————————————————-*/ .hoverbox { cursor: default; list-style: none; } .hoverbox a { cursor: default; } .hoverbox a .preview { display: none; } .hoverbox a:hover .preview { display: block; position: absolute; top: -33px; left: -45px; z-index: 1; } .hoverbox img { background: #fff; border-color: #aaa #ccc #ddd #bbb; border-style: solid; border-width: 1px; color: inherit; padding: 2px; vertical-align: top; width: 100px; height: 75px; } .hoverbox li { background: #eee; border-color: #ddd #bbb #aaa #ccc; border-style: solid; border-width: 1px; color: inherit; display: inline; float: left; margin: 3px; padding: 5px; position: relative; } .hoverbox .preview { border-color: #000; width: 200px; height: 150px; } ————- Но и у сайта есть стиль : /* This template was created by Mantis-a [http://www.mantisa.cz/]. For more templates visit Free website templates [http://www.mantisatemplates.com/]. */ /* CSS Document */ /* General */ * { margin: 0; padding: 0; } html { height: 100%; font-size: 62.5%; } body { height: 100%; text-align: left; font: 1.2em Verdana, Arial, Helvetica, sans-serif; background: #242424 url('../img/bg.gif') repeat-x 0 0; min-width: 980px; } a:link, a:visited { color: #AFBC25; text-decoration: underline; font-weight: bold; } a:hover { text-decoration: none; } .cleaner { clear: both; height: 0; font-size: 0; visibility: hidden; content: ' '; } .noscreen { display: none; } .hidden { /* Skip menu */ position: absolute; top: -10000px; left: 0; width: 1px; height: 1px; overflow: hidden; } /* Paragraphs, headings, ... */ p { line-height: 170%; margin-bottom: 10px; color: #FDFDFD; } p.more { float: right; display: inline; margin-right: 7px; } p.more a, p.more a:visited { font-weight: normal; } h1 { font-size: 2.2em; font-weight: normal; color: #FFFFFF; text-align: left; padding: 43px 0 4px 0; letter-spacing: 1px; background: url('../img/h1-bg.gif') repeat-x 0 100%; width: 50%; } h1 a:link, h1 a:visited { font-weight: normal; text-decoration: none; color: #FFFFFF; } h2 { font-size: 1.4em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #FFFFFF; text-align: left; margin: 4px 0 0 0; letter-spacing: 1px; } h3 { font-size: 1.4em; font-family: Georgia, "Times New Roman", Times, serif; font-weight: normal; color: #FDFDFD; letter-spacing: 1px; background: url('../img/h3-bg.gif') no-repeat 0 54%; padding-left: 18px; margin-bottom: 7px; } address { } /* Images */ img.image-main { border: 1px solid #AFBC25; margin: 0.2em 0 0.6em 0; float:left; /* Выравнивание по левому краю */ margin: 7px 7px 7px 0; /* Отступы вокруг картинки */ } /* Header */ #header { width: 980px; height: 178px; position: relative; margin: 0 auto; text-align: left; } ul#navigation { float: right; margin: 8px 1px 0 0; display: inline; color: #FFFFFF; } ul#navigation li { float: left; display: inline; list-style-type: none; text-align: center; font-size: 0.9em; } ul#navigation li a, ul#navigation li a:visited { text-decoration: none; color: #FFFFFF; font-weight: normal; } ul#navigation li a:hover { text-decoration: underline; } li#house { background: url('../img/house.gif') no-repeat 0 1px; padding-left: 24px; } li#house a { margin-right: 16px; } li#sitemap { background: url('../img/sitemap.gif') no-repeat 0 2px; padding-left: 24px; margin-left: 16px; } li#sitemap a { margin-right: 16px; } li#envelope { background: url('../img/envelope.gif') no-repeat 0 2px; padding-left: 23px; margin-left: 16px; } /* Search form */ form.searching { width: 204px; position: absolute; top: 43px; right: 1px; } form.searching fieldset { border: 0; } #picture-input { position: absolute; top: 0; left: 0; overflow: hidden; width: 171px; height: 26px; background: #FAFFE5 url('../img/input-bg.gif') no-repeat 0 0; border: 0; } #picture-input input { position: relative; top: 5px; left: 10px; width: 160px; border: 0; letter-spacing: 1px; background-color: #FAFFE5; } form.searching input.hledat { letter-spacing: 1px; padding-left: 0; font-weight: bold; color: #FFFFFF; position: absolute; top: 0; right: 0; } form.searching label { display: none; } /* Menu */ #menu { position: absolute; top: 145px; right: 1px; } #menu li { float: left; display: inline; list-style-type: none; } #menu li a { float: left; display: inline; list-style-type: none; text-align: center; color: #FFFFFF; font-size: 1.1em; text-decoration: underline; padding: 0 1.1em; height: 32px; line-height: 32px; margin-left: 3px; background: #242424 url('../img/li-bg.gif') repeat-x 0 0; border: 1px solid black; border-bottom: none; } #menu li a:hover { color: #FFFFFF; text-decoration: none; background: #242424; border: 1px solid #222222; border-bottom: none; } #menu li a.active { background: #232323 url('../img/li-bg-hover.gif') repeat-x 0 0; color: #FFFFFF; text-decoration: none; border: 1px solid #2D4A00; border-bottom: none; } /* 3 columns layout */ #content { font-size: 0.9em; width: 980px; margin: 23px auto 0 auto; text-align: left; background: #242424 url('../img/content-bg.gif') repeat-y 0 0; } #column-1 { float: right; width: 650px; } #column-1 #column-11 { float: left; width: 650px; } #column-1 #column-12 { float: right; width: 296px; } #column-2 { float: left; width: 300px; } /* Footer */ #footer { width: 970px; height: 80px; margin: 60px auto 0 auto; border-top: 1px solid #404040; } p.footer-left { float: left; width: 465px; color: #FFFFFF; text-align: left; margin: 9px 0 0 15px; display: inline; } p.footer-left a, p.footer-left a:visited { color: #FFFFFF; font-weight: normal; } p.footer-right { float: right; width: 465px; color: #999999; text-align: right; margin: 9px 15px 0 0; display: inline; } p.footer-right a, p.footer-right a:visited { color: #999999; font-weight: normal; } p.footer-right a:hover { color: #FFFFFF; font-weight: normal; } ——- В итоге эти 2 стиля конфликтуют и получается вот что : Кто может помоч объединить стили, что бы фотографии правильно распологались во вкладках : Вот тут можно скачать галерею http://sonspring.com/journal/hoverbox-image-gallery Проэкт не коммерчиский! Админы выкинули из темы помощь новичкам - куда не следовало. Я не виноват в отсебяченности администрации. Прошу понять правильно. Если нет желания помочь - я не настаиваю. Я ищу людей кому помочь не лень. Денег у меня на развитие сайта нет, если не найду способы - буду искать бесплатные. -
Требуются умные люди! Создание фотогалереи на основе CSS
humn replied to humn's topic in Goods and Services
Да в принципе могу просто такой галереи на яве я не нашел , вы видели что нибудь подобное ? а сам я написать такую галерею не смогу - навыков программирования у меня 0 Блин зашибись - пришел человек помощи просить - сразу тему кидают где все бабло будут просить. Респект. -
Помогите усовершенствовать фотогалерею http://www.cssplay.co.uk/menu/lightbox.html#flower8 http://www.cssplay.co.uk/menu/zips/gallery.zip Что я хочу изменить : 1. Убрать реакцию галереи на наведение курсора 2. Сделать так что бы вкладки в галереи работали только по кликанию мышью, а не при наведении. 3. Сделать так что бы галерея не возвращалась на исходную позицию, когда курсор уводишь с галереи. Если такое возможно ? А оставалась на выбранной пользователем. 4. И последнее - сделать так что бы при кликании на вкладку - на ней сохранялся активный цвет, а цвет с предыдущей активной вкладки исчезал. 5. При открытие фотографии она открывается по верх галлереи - если такое возможно сделать красиво средствами css Может кто помочь ? Я не хочу добавлять яву на сайт и прочее. Чем проще сайт - тем лучше. Из всех галерей только такая соответствует удобству. Думаю она многим бы была полезная, так как аналогов я ненашел. Спасибо!!