Форум PHP программистов

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Div

Fillzest

26.02.2017 - 20:40

Здравствуйте ! У меня в header меню а в content слайдер на javascript , слайдер при уменьшение окна наезжает на Header как можно это устранить ? Они обе в Div .

Invis1ble

26.02.2017 - 21:11

Ну это довольно просто. Достаточно кое-что там у тебя в CSS или в JS поменять.

_____________

Профессиональная разработка на заказ

Я на GitHub | второй профиль

Fillzest

26.02.2017 - 21:16

Да я знаю , но что ? Что поможет ? в CSS

sergeiss

26.02.2017 - 23:05

Fillzest, гадалок тут нету. Так что показывай свой код. И не большие "портянки", а относящийся к проблеме.

_____________
* Хэлп по PHP
* Описалово по JavaScript
* Хэлп и СУБД для PostgreSQL

* Обучаю PHP, JS, вёрстке. Интерактивно и качественно. За разумные деньги.

* "накапливаю умение телепатии" (С) и "гуглю за ваш счет" (С)

Fillzest

27.02.2017 - 12:25

Понял !
Вот код , мне трудно упорядочить DIV проще Table работать но это не на выщем уровне , для дива на пример display block и inline не решает все вопросы ,
могут быть какие то общие советы по аранжировки , тут position fixed не подходит так как все адаптирована и не будет уходить с окном на своё место когда будет уменьшатся окно .


<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>Транспортировка</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900&subset=cyrillic' rel='stylesheet' type='text/css'>
<link href ="style/style.css" rel = "stylesheet" type="text/css">	
<link href="style/reset.css" rel="stylesheet"> <!-- CSS reset -->
<script src="js/modernizr.js"></script> <!-- Modernizr -->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery.mobile.custom.min.js"></script>
<script src="js/snap.svg-min.js"></script>
<script src="js/main.js"></script> <!-- Resource jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(function() {
      if ($.browser.msie && $.browser.version.substr(0,1)<7)
      {
        $('li').has('ul').mouseover(function(){
            $(this).children('ul').css('visibility','visible');
            }).mouseout(function(){
            $(this).children('ul').css('visibility','hidden');
            })
      }
    });        
</script>

</head>
<body>

	<header>
	<div id="top">
     <a href=""><img src="img/logo.png"></a>
	  </div>
       <div id="contacts">
	   Контакты
	   </div>
		<nav>

			<a href="#" id="menu-icon"></a>

			<ul id="menu">

				<li><a href="#">Ссылка</a>			
			<ul>

				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>

			</ul></li>
				<li><a href="#">Ссылка</a>			
			<ul>

				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>

			</ul></li>				<li><a href="#">Ссылка</a>			
			<ul>

				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>

			</ul></li>				<li><a href="#">Ссылка</a>			
			<ul>

				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>
				<li><a href="#">Ссылка</a></li>

			</ul></li>

			</ul>
		</nav>
  </header>

<content>
	<div class="cd-slider-wrapper">
		<ul class="cd-slider" data-step1="M1402,800h-2V0h1c0.6,0,1,0.4,1,1V800z" data-step2="M1400,800H379L771.2,0H1399c0.6,0,1,0.4,1,1V800z" data-step3="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z" data-step4="M-2,800h2V0h-1c-0.6,0-1,0.4-1,1V800z" data-step5="M0,800h1021L628.8,0L1,0C0.4,0,0,0.4,0,1L0,800z" data-step6="M0,800h1400V0L1,0C0.4,0,0,0.4,0,1L0,800z">
			<li class="visible">
				<div class="cd-svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Aimated SVG</title>
						<defs>
							<clipPath id="cd-image-1">
								<path id="cd-changing-path-1" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
							</clipPath>
						</defs>
						
						<image height='800px' width="1400px" clip-path="url(#cd-image-1)" xlink:href="img/img-1.jpg"></image>
					</svg>
				</div> <!-- .cd-svg-wrapper -->
			</li>

			<li>
				<div class="cd-svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Aimated SVG</title>
						<defs>
							<clipPath id="cd-image-2">
								<path id="cd-changing-path-2" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
							</clipPath>
						</defs>
						
						<image height='800px' width="1400px" clip-path="url(#cd-image-2)" xlink:href="img/img-2.jpg"></image>
					</svg>
				</div> <!-- .cd-svg-wrapper -->
			</li>

			<li>
				<div class="cd-svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Aimated SVG</title>
						<defs>
							<clipPath id="cd-image-3">
								<path id="cd-changing-path-3" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
							</clipPath>
						</defs>
						
						<image height='800px' width="1400px" clip-path="url(#cd-image-3)" xlink:href="img/img-3.jpg"></image>
					</svg>
				</div> <!-- .cd-svg-wrapper -->
			</li>

			<li>
				<div class="cd-svg-wrapper">
					<svg viewBox="0 0 1400 800">
						<title>Aimated SVG</title>
						<defs>
							<clipPath id="cd-image-4">
								<path id="cd-changing-path-4" d="M1400,800H0V0h1399c0.6,0,1,0.4,1,1V800z"/>
							</clipPath>
						</defs>
						
						<image height='800px' width="1400px" clip-path="url(#cd-image-4)" xlink:href="img/img-4.jpg"></image>
					</svg>
				</div> <!-- .cd-svg-wrapper -->
			</li>
			
		</ul> <!-- .cd-slider -->

		<ul class="cd-slider-navigation">
			<li><a href="#0" class="next-slide">Next</a></li>
			<li><a href="#0" class="prev-slide">Prev</a></li>
		</ul> <!-- .cd-slider-navigation -->

		<ol class="cd-slider-controls">
			<li class="selected"><a href="#0"><em>Item 1</em></a></li>
			<li><a href="#0"><em>Item 2</em></a></li>
			<li><a href="#0"><em>Item 3</em></a></li>
			<li><a href="#0"><em>Item 4</em></a></li>
		</ol> <!-- .cd-slider-controls -->
	</div> <!-- .cd-slider-wrapper -->
</content>

<footer>

</footer>
</body>
</html>


@charset "utf-8";
*{
	margin: 0;
	padding: 0;
	outline: none;
	box-sizing: border-box;
}

html {height: 100%}

body {
	width: 100%;
	height: 100%;
	background-color: #fff;
	font-family:"Roboto";
	line-height: 135%;
}

a {
	color : #aaa;
	text-decoration: none;
}

a:hover {
	color: #efefef;
}

a, a:hover {
	-webkit-transition: all.6s ease;
	-moz-transition: all.6s ease;
	-o-transition: all.6s ease;
	-ms-transition: all.6s ease;
	transition: all.6s ease;
}

.clear {
	clear: both;
}

header {

	background: #fff;
	width: 100%;
	height: 76px;
	position: related;
	top: 0;
	left: 0;

}
 
nav {

	float: center;
	padding: 20px;	
	
}

#menu-icon {
    
	display: hidden;
	width: 40px;
	height: 40px;
	background: #aaa url(/img/menu-icon.png) center;

}

a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

header ul {

	list-style: none;

}

header li {

	display: inline-block;
	float: left;
	padding: 10px

}

header #logo {
    float: left;
	width: 20%;
}

header #contacts {
	float: left;
	padding: 5px;
	background-color: #afafaf;
	border-radius: 10px;
	color: #fff;
}

header #contacts div {
    float: left;
	width: 10%;
}

header #contacts:hover {
	background-color: #a0a0a0;

}

#menu li {
	float: left;
	position: relative;
		
}
	
#menu ul {
	margin: 20px 0 0 0;
	_margin: 0; /*Только для IE6*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 38px;
	left: 0;
	z-index: 9999;    
	background: #eee;
		
}

#menu li:hover > ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
		
}
	
#menu ul ul {
	top: 0;
	left: 150px;
	margin: 0 0 0 20px;
	_margin: 0; /*Только для IE6*/

}
	
#menu ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*Только для IE6*/
		
}
	
#menu ul a {    
	width: 500px;
	_height: 10px; /*Только для IE6*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
		
}
	
#menu ul li:first-child > a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #eee;
}


.cd-filter {
  /* SVG animation style switcher - not needed in production */
  margin-top: 1em;
  text-align: center;
}
.cd-filter li {
  display: inline-block;
  margin: 4px;
}
.cd-filter a {
  display: block;
  border-bottom: 2px solid rgba(76, 92, 98, 0);
  padding: .8em 1em;
  font-size: 1.2rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #4c5c62;
}
.no-touch .cd-filter a:hover {
  border-bottom: 2px solid rgba(76, 92, 98, 0.6);
}
.cd-filter a.selected {
  color: #00A7E1;
  border-bottom: 2px solid rgba(0, 167, 225, 0.4);
}
.no-touch .cd-filter a.selected:hover {
  border-bottom: 2px solid rgba(0, 167, 225, 0.4);
}
@media only screen and (min-width: 640px) {
  .cd-filter {
    margin-top: 2em;
  }
}

/* -------------------------------- 

Slider

-------------------------------- */
.cd-slider-wrapper {
  position: relative;
  width: 90%;
  max-width: 1024px;
  margin: 2em auto;
  /* hide horizontal scrollbar on IE11 */
  overflow-x: hidden;
}

.cd-slider > li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  /* hide vertical scrollbar on IE11 */
  overflow: hidden;
}
.cd-slider > li.visible {
  position: relative;
  z-index: 2;
  opacity: 1;
}
.cd-slider > li.is-animating {
  z-index: 3;
  opacity: 1;
}

.cd-slider .cd-svg-wrapper {
  /* using padding Hack to fix bug on IE - svg height not properly calculated */
  height: 0;
  padding-bottom: 57.15%;
}

.cd-slider-wrapper svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -------------------------------- 

Slider navigation

-------------------------------- */
.cd-slider-navigation li {
  position: absolute;
  z-index: 3;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  right: 10px;
  height: 48px;
  width: 48px;
}
.cd-slider-navigation li a {
  display: block;
  height: 100%;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  background: url(../img/cd-icon-arrows.svg) no-repeat 0 0;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
}
.no-touch .cd-slider-navigation li a:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}
.cd-slider-navigation li:last-of-type {
  left: 10px;
  right: auto;
}
.cd-slider-navigation li:last-of-type a {
  background-position: -48px 0;
}

/* -------------------------------- 

Slider dots/controls 

-------------------------------- */
.cd-slider-controls {
  position: absolute;
  bottom: 20px;
  left: 50%;
  right: auto;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  width: 90%;
}
.cd-slider-controls::after {
  clear: both;
  content: "";
  display: table;
}
.cd-slider-controls li {
  display: inline-block;
  margin-right: 10px;
}
.cd-slider-controls li:last-of-type {
  margin-right: 0;
}
.cd-slider-controls li.selected a {
  background-color: #ffffff;
}
.cd-slider-controls a {
  display: block;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  border: 2px solid #ffffff;
}
.no-touch .cd-slider-controls a:hover {
  background-color: #ffffff;
}

/*MEDIA QUERY*/
@media only screen and (max-width : 640px) {

	header {

		position: absolute;

	}

	#menu-icon {

		display:inline-block;

	}

	nav ul, nav:active ul { 

		display: none;
		padding: 20px;
		background: #fff;
		width: 640px;
		border-radius: 4px 0 4px 4px;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}
	
	header #logo {
    float: left;
    }

    header #contacts {
	float: left;
	padding: 5px;
	background-color: #afafaf;
	
    }
	
	#menu li {
		float: left;
		position: relative;
		
	}
	
	#menu ul {
		margin: 20px 0 0 0;
		_margin: 0; /*Только для IE6*/
		opacity: 0;
		visibility: hidden;
		position: absolute;
		top: 38px;
		left: 0;
		z-index: 9999;    
		background: #eee;
		
	}

	 #menu li:hover > ul {
		opacity: 1;
		visibility: visible;
		margin: 0;
		
	}
	
	#menu ul ul {
		top: 0;
		left: 150px;
		margin: 0 0 0 20px;
		_margin: 0; /*Только для IE6*/

				
	}
	
	#menu ul li {
		float: none;
		display: block;
		border: 0;
		_line-height: 0; /*Только для IE6*/
		
	}
	
	#menu ul a {    
		padding: 10px;
		width: 100px;
		_height: 10px; /*Только для IE6*/
		display: block;
		white-space: nowrap;
		float: none;
		text-transform: none;
		
	}
	
	#menu ul li:first-child > a:after {

		position: absolute;
		left: 40px;
		top: -6px;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		border-bottom: 6px solid #eee;
	}

Быстрый ответ:

Здесь расположена полная версия этой страницы.