Проблема с дивной версткой

eVErl@Sting · August 17, 2010

Здравствуйте, помогите решить проблему:

Есть два дива, слои лежат один на другом, в нижнем диве находиться динамический контент, картинки, текст, ссылки, который меняется, jq слайдер. Верхний див пустой, со свойством css border-radius, имитирует рамку округлую поверх нижнего дива. Проблема в том что нету доступа к нижнему диву в Safari, FF, Chrome..Текст не выделяется, ссылки некликабельны. У обоих дивов стоит значение position:relative, заданы размеры и z-index..

Пробовал рамку наложить поверх разными способами, и png картинку с рамкой поверх и таблицу с порезанной рамкой на куски поверх контета, не работает.

Вот сам слайдер поверх которого я хочу наложить рамку: _http://www.ruseller.com/lessons.php?rub=32&id=382

npofopr · August 17, 2010

все отлично накладывается.

внутрь div.anythingSlider вставил еще один див.

задал ему абсолют и з-индекс 999 и все выделяется.

проверяйте з-индексы.

eVErl@Sting · August 17, 2010

все отлично накладывается.
внутрь div.anythingSlider вставил еще один див.
задал ему абсолют и з-индекс 999 и все выделяется.
проверяйте з-индексы.

Ну вот смотрите, я взял сохранил ту страницу с Демо слайдером, открыл код и добавил <div class="image2"></div>:

<div class="anythingSlider"><div class="image2"></div>
				  <div class="wrapper">
			<ul>
			   <li>
					<img src="anythingSlider_files/slide-ci.jpg" alt="" />
			   </li>
			  <li>

				 <div id="textSlide">

					<img src="anythingSlider_files/25135600.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />

					<h3>Сэндвич с томатами</h3>

					<h4>Ingredients</h4>

					<ul>
						<li>1 bagel, split and toasted</li>
						<li>2 tablespoons cream cheese</li>
						<li>1 roma (plum) tomatoes, thinly sliced</li>
						<li>salt and pepper to taste</li>
						<li>4 leaves fresh basil</li>
					</ul>
				 </div>
			  </li>
			  <li>
				 <img src="anythingSlider_files/slide-en.jpg" alt="" />
			  </li>
			  <li>
				 <img src="anythingSlider_files/slide-cj.jpg" alt=""  />
			  </li>
			  <li>
				 <div id="quoteSlide">
									 <blockquote>Как создать сайт? Этот вопрос волнует сегодня миллионы умов по всему миру. Многие хотят создать сайт и зарабатывать на нём разными способами!</blockquote>
					<p> - <a href='http://ruseller.com/'>Ruseller.com</a> -</p>
								  </div>
			  </li>
			  <li>
				 <img src="anythingSlider_files/slide-eo.jpg" alt="" />
			  </li>
						 </ul>		
		  </div>
		</div>

В CSS добавил свойство:

.image2 { position:relative; top:0px; left: 40px; width:670px; height:315px; z-index:999; border: 5px solid #ff9600; -moz-border-radius: 11px;  -webkit-border-radius: 11px; -khtml-border-radius: 11px; border-radius: 11px; behavior: url(ie-css3.htc); }

Проверяем в опере....кнопки не нажимаются....ссылки в нутри контента не кликабельны..

Да и position:absolute для меня не подходит, так как сайт не резиновый по ширине, находиться посередине браузера и зафиксировать от границы браузера не возможно.

Проверил с position:absolute, тоже самое, кнопки не пашут, ссылка на 5том слайде не работает.

Edited August 17, 2010 by eVErl@Sting

eVErl@Sting · August 17, 2010

Решив извратиться даже сделал так:

Убрал что вставлял до этого и в CSS изменил стили которые там были на эти:

#thumbNav { position: relative; top: 0px; left: 40px; width:670px; height:315px; text-align: center; border: 5px solid #ff9600; -moz-border-radius: 11px;  -webkit-border-radius: 11px; -khtml-border-radius: 11px; border-radius: 11px; behavior: url(ie-css3.htc); }
#thumbNav a { display: none; }
#thumbNav a:hover { display: none; }
#thumbNav a.cur { display: none; }

Тем самым блок предназначенный для нижней навигации между слайдами я приспособил под рамочку…теперь кнопки ”лево-право” работают и текст выделяется, но ссылки по прежнему не работают в Опере, в ИЕ все пашет, в Сафари, ФФ и Хроме не чего не пашет….

Edited August 17, 2010 by eVErl@Sting

npofopr · August 17, 2010

потому что не relative, а absolute

<!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>anythingSlider</title>

    <link rel="stylesheet" href="http://www.ruseller.com/lessons/les382/css/page.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="http://www.ruseller.com/lessons/les382/css/slider.css" type="text/css" media="screen" />
    <script type="text/javascript" src="http://www.ruseller.com/lessons/les382/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="http://www.ruseller.com/lessons/les382/js/jquery.easing.1.2.js"></script>

	<script src="http://www.ruseller.com/lessons/les382/js/jquery.anythingslider.js" type="text/javascript"></script>

    <script type="text/javascript">
            function formatText(index, panel) {
		  return index + "";
	    }
            $(function () {
            $('.anythingSlider').anythingSlider({
                easing: "easeInOutExpo",        // Anything other than "linear" or "swing" requires the easing plugin
                autoPlay: true,                 // This turns off the entire FUNCTIONALY, not just if it starts running or not.
                delay: 3000,                    // How long between slide transitions in AutoPlay mode
                startStopped: false,            // If autoPlay is on, this can force it to start stopped
                animationTime: 600,             // How long the slide transition takes
                hashTags: true,                 // Should links change the hashtag in the URL?
                buildNavigation: true,          // If true, builds and list of anchor links to link to each slide
        		pauseOnHover: true,             // If true, and autoPlay is enabled, the show will pause on hover
        		startText: "Старт",             // Start text
		        stopText: "Стоп",               // Stop text
		        navigationFormatter: formatText       // Details at the top of the file on this use (advanced use)
            });
            $("#slide-jump").click(function(){
                $('.anythingSlider').anythingSlider(6);
            });
        });
    </script>


<style>
.image2 {
	position:absolute;
	top:0px;
	left:40px;
	width:670px;
	height:315px;
	z-index:999;
	border:5px solid #ff9600;
	-moz-border-radius: 11px;
	-webkit-border-radius: 11px;
	-khtml-border-radius: 11px;
	border-radius: 11px; 
	behavior: url(ie-css3.htc);
}
</style>

</head>

<body>


        <div class="anythingSlider">

        <!-- тот самый div -->
        <div class="image2"></div>
        <!-- -->

                  <div class="wrapper">
            <ul>

               <li>
                    <img src="http://www.ruseller.com/lessons/les382/images/slide-civil-1.jpg" alt="" />
               </li>
              <li>

                 <div id="textSlide">

                    <img src="http://www.ruseller.com/lessons/les382/images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />

                    <h3>Сэндвич с томатами</h3>

                    <h4>Ingredients</h4>

                    <ul>
                        <li>1 bagel, split and toasted</li>
                        <li>2 tablespoons cream cheese</li>
                        <li>1 roma (plum) tomatoes, thinly sliced</li>
                        <li>salt and pepper to taste</li>
                        <li>4 leaves fresh basil</li>

                    </ul>
                 </div>
              </li>
              <li>
                 <img src="http://www.ruseller.com/lessons/les382/images/slide-env-1.jpg" alt="" />
              </li>
              <li>
                 <img src="http://www.ruseller.com/lessons/les382/images/slide-civil-2.jpg" alt=""  />
              </li>

              <li>
                 <div id="quoteSlide">
                                     <blockquote>Как создать сайт? Этот вопрос волнует сегодня миллионы умов по всему миру. Многие хотят создать сайт и зарабатывать на нём разными способами!</blockquote>
                    <p> - <a href='http://ruseller.com/'>Ruseller.com</a> -</p>
                                  </div>
              </li>

              <li>
                 <img src="http://www.ruseller.com/lessons/les382/images/slide-env-2.jpg" alt="" />
              </li>
                         </ul>        
          </div>
        </div>



</body>

</html>

зачем вы вообще накладываете? редактируйте css самого скрипта

Edited August 17, 2010 by npofopr

eVErl@Sting · August 17, 2010

Ну а Вы сами проверяли этот код что сюда вставили? Не пашет от в Опере и Мазиле, наверное и в других браузерах! Не работают кнопки и ссылки не кликабельны.

Накладываю потому что контент в слайдере будет поверх рамки, а не под ней! Мне просто нужен слайдер с закругленными краями и чтобы эти края налезали на контент, а такое походу не возможно, какие слайдеры не смотрел, они все квадратные.

Блин не могу понять откуда столько гемора, попробовал еще слайдера 3-4 и все перестают пахать когда поверх них див слой оказывается, бред какой то..

Edited August 17, 2010 by eVErl@Sting

eVErl@Sting · August 17, 2010

сделал верхний слой с параметром border-image и тоже самое...только в ИЕ и Опере пашет(

npofopr · August 17, 2010

может быть я вас не понимаю, но у меня все работает и кликается.

не нравятся слайдеры на списках, попробуйте на дивах.

http://www.ndoherty.biz/demos/coda-slider/2.0/

там я прямо .coda-slider задал -moz-border-radius:10px; и края скруглились

eVErl@Sting · August 17, 2010

Вот страница с твоим кодом что ты вставил http://www.laminat-shop.ru/1/1.htm

Открой ее в последней версии Оперы или Хрома, там с лева и справа есть кномки в слайдере, они не действуют, на 5том слайде есть ссылка на rusaller она не пашет. Я не понимаю как у тебя может все пахать, а у меня нет.

А вот простой пример того что в Сафари, ФФ и Хроме ссылка под дивом не пашет и текст не выделяется:

http://www.laminat-shop.ru/1/new.htm

Edited August 17, 2010 by eVErl@Sting

eVErl@Sting · August 17, 2010

Я сейчас додумался до того, что не добавить ли эти уголки округлые к png картинкам кнопок, левые уголки к правой кнопке, правые к правой..они как раз по бакам распологаються…может и изврат, но это единственное решение какое вижу…

Еще можно вот так сделать, отредактировать js файл слайдера:

// Creates the Forward/Backward buttons
base.buildNextBackButtons = function(){
var $forward = $('<div class=”1”><img src="img/ugli_r"></div><a class="arrow forward">></a>'),
$back	= $('<div class=”2”><img src="img/ugli_l"></div><a class="arrow back"><</a>');

Ну и в стиле добавить position:relative; z-index:999; ну и отступы..

Edited August 18, 2010 by eVErl@Sting

Sign In

Проблема с дивной версткой

Question

eVErl@Sting

Link to comment

Share on other sites

9 answers to this question

Recommended Posts

npofopr

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

eVErl@Sting

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information