[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Выравние шапки(javascript)
Форум PHP программистов > JavaScript
Makeleven77
16.07.2011 - 20:57
Добрый день.Где и что надо вписать здесь чтоб она выходила по центру?а то она с боку

<style type="text/css">
div.rotator {
 display: none;
 height: 300px;
 margin: 0;
 padding: 0;
 position: relative;
 width: 451px;
}
div#rotator {
 margin: 0;
 padding: 0;
}
div.rotator ul li {
 float: left;
 list-style: none outside none;
 position: absolute;
}
div.rotator ul li img {
 background: none repeat scroll 0 0 none;
 border: medium none;
 margin: 0;
 padding: 0;
}
div.rotator ul li.show {
 margin: 0;
 padding: 0;
 z-index: 500;
}
div#rotator ul {
 margin: 0;
 padding: 0;
}
div#entersite {
 margin: 0;
 padding: 0;
 text-align: center;
 width: 451px;
}
ul {
 margin: 0;
 padding: 0;
}
li {
 margin: 0;
 padding: 0;
}
#preload {
 display: none;
}
</style>



<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">

function theRotator() {
 //Set the opacity of all images to 0
 $('div.rotator ul li').css({opacity: 0.0});
 
 //Get the first image and display it (gets set to full opacity)
 $('div.rotator ul li:first').css({opacity: 1.0});
 
 //Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
 
 setInterval('rotate()',5000);
 
}

function rotate() { 
 //Get the first image
 var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

 if ( current.length == 0 ) current = $('div.rotator ul li:first');

 //Get next image, when it reaches the end, rotate it back to the first image
 var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
 
 //Un-comment the 3 lines below to get the images in random order
 
 //var sibs = current.siblings();
 //var rndNum = Math.floor(Math.random() * sibs.length );
 //var next = $( sibs[ rndNum ] );
 

 //Set the fade in effect for the next image, the show class has higher z-index
 next.css({opacity: 0.0})
 .addClass('show')
 .animate({opacity: 1.0}, 1000);

 //Hide the current image
 current.animate({opacity: 0.0}, 1000)
 .removeClass('show');
 
};



$(document).ready(function() { 
 //Load the slideshow
 theRotator();
 $('div.rotator').fadeIn(1000);
 $('div.rotator ul li').fadeIn(1000); // tweek for IE
});
</script>
<!--- Header Rotator Script End --->

<!--- Header Rotator Start --->
<center><div class="rotator">
 <ul>
 <li class="show"><a href="/GeronimoPratt.asp"><a href="/GeronimoPratt.asp"><img src="" width="1200" height="300"></a></li>
 <li><"> <img class="center" src="" width="1200" align="middle" height="300"></a></li>
 <li><a href="/"><img src="" width="1200" align="middle" height="300"></a></li>
 <li><a href="/"><img src="" width="1200" align="middle" height="300"></a></li> 
 <li><a href="/"><img src="" align="middle" width="1200" height="300"></a></li> 
 <li><a href="/events.asp?id=200"><img src="" width="1200" height="300"></a></li> 
 <li><a href="/events.asp?id=200"><img src="" width="1200" height="300"></a></li> </div>



пробовал ставить внизу align middle на center, но ничего не помогло
надеюсь ктонибудь посодействует в решени моей проблемы..спасиб



Спустя 4 минуты, 50 секунд (16.07.2011 - 20:02) ADiel написал(а):
Код не читал, но предполагаю, что margin:auto;

Спустя 3 минуты, 25 секунд (16.07.2011 - 20:06) Guest написал(а):
нет(

Спустя 2 минуты, 26 секунд (16.07.2011 - 20:08) Haotarez написал(а):
создайте доп контейнер с ориентацией по центру и засуньте в него шапку

Спустя 10 минут, 27 секунд (16.07.2011 - 20:18) Guest написал(а):
Haotarez
подскажите как

Спустя 35 минут, 43 секунды (16.07.2011 - 20:54) Haotarez написал(а):
<div align="center">ВАШАШАПКА</div>

Спустя 6 минут, 39 секунд (16.07.2011 - 21:01) sebastjan написал(а):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
.fon{
	background-image: url(img/ugol.jpg);
	width: 1000px;
	font-family: Verdana;
	font-size: 14px;
	font-weight: bold;
	color: #003399;
	border: 1px solid #0000FF;
	text-align: center;
	margin-right: auto;
	margin-left: auto;
	height: 100px;
}
</style>
</head>
<body>
<div class="fon">ШАПКА</div>
</body>
</html>


Спустя 1 минута, 49 секунд (16.07.2011 - 21:03) Haotarez написал(а):
sebastjan
Клёво

Спустя 4 часа, 42 минуты, 43 секунды (17.07.2011 - 01:45) Guest написал(а):
sebastjan всеравно не помогло..появился блок посередине а шапка как была справа так и осталось
может я что то делаю не так?

[/html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<title>мыапываываа</title>
<style>
.fon{
background-image: url(img/ugol.jpg);
width: 1000px;
font-family: Verdana;
font-size: 14px;
font-weight: bold;
color: #003399;
border: 1px solid #0000FF;
text-align: center;
margin-right: auto;
margin-left: auto;
height: 100px;
}
</style>
</head>
<style type="text/css">
div.rotator {
display: none;
height: 300px;
margin: 0;
padding: 0;
position: relative;
width: 451px;
}
div#rotator {
margin: 0;
padding: 0;
}
div.rotator ul li {
float: left;
list-style: none outside none;
position: absolute;
}
div.rotator ul li img {
background: none repeat scroll 0 0 none;
border: medium none;
margin: 0;
padding: 0;
}
div.rotator ul li.show {
margin: 0;
padding: 0;
z-index: 500;
}
div#rotator ul {
margin: 0;
padding: 0;
}
div#entersite {
margin: 0;
padding: 0;
text-align: center;
width: 451px;
}
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
#preload {
display: none;
}
</style>
<body>
<div class="fon"><script type="text/javascript">

function theRotator() {
//Set the opacity of all images to 0
$('div.rotator ul li').css({opacity: 0.0});

//Get the first image and display it (gets set to full opacity)
$('div.rotator ul li:first').css({opacity: 1.0});

//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

setInterval('rotate()',5000);

}

function rotate() {
//Get the first image
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));

if ( current.length == 0 ) current = $('div.rotator ul li:first');

//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));

//Un-comment the 3 lines below to get the images in random order

//var sibs = current.siblings();
//var rndNum = Math.floor(Math.random() * sibs.length );
//var next = $( sibs[ rndNum ] );


//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);

//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');

};



$(document).ready(function() {
//Load the slideshow
theRotator();
$('div.rotator').fadeIn(1000);
$('div.rotator ul li').fadeIn(1000); // tweek for IE
});
</script>
<!--- Header Rotator Script End --->

<!--- Header Rotator Start --->
<center><div class="rotator">
<ul>
<li class="show"><a href=""><a href="/GeronimoPratt.asp"><img src="" width="1200" height="300"></a></li>
<li><a href=""> <img class="center" src="" width="1200" align="middle" height="300"></a></li>
<li><a href="/"><img src="" width="1200" align="middle" height="300"></a></li>
<li><a href=""><img src="" width="1200" align="middle" height="300"></a></li>
<li><a href=""><img src="" align="middle" width="1200" height="300"></a></li>
<li><a href="/events.asp?id=200"><img src="" width="1200" height="300"></a></li>
<li><a href="/events.asp?id=200"><img src="" width="1200" height="300"></a></li> </div></div>
</body>[html]

Спустя 1 час, 4 минуты, 19 секунд (17.07.2011 - 02:50) sebastjan написал(а):
Приучите себя акуратно верстать и быть внимательным.
Вот ваш код в более человеческом исполнении.
Всё по центру
Только я не понял зачем вы в блок шапку впихнули список с картинками.
Вы кажеться незнакомы с вёрсткой и ЦСС.
Советую немного почитать а то так и будете не понимая стараться верстать.
Как по мне, так ваш стиль листинг, это что то из области фантастики.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>мыапываываа</title>
<style>
.fon{
 background-image: url(img/ugol.jpg);
 width: 1000px;
 font-family: Verdana;
 font-size: 14px;
 font-weight: bold;
 color: #003399;
 border: 1px solid #0000FF;
 text-align: center;
 margin-right: auto;
 margin-left: auto;
 height: 100px;
}
div.rotator {
 display: none;
 height: 300px;
 margin: 0;
 padding: 0;
 position: relative;
 width: 451px;
}
div#rotator {
 margin: 0;
 padding: 0;
}
div.rotator ul li {
 float: left;
 list-style: none outside none;
 position: absolute;
}
div.rotator ul li img {
 background: none repeat scroll 0 0 none;
 border: medium none;
 margin: 0;
 padding: 0;
}
div.rotator ul li.show {
 margin: 0;
 padding: 0;
 z-index: 500;
}
div#rotator ul {
 margin: 0;
 padding: 0;
}
div#entersite {
 margin: 0;
 padding: 0;
 text-align: center;
 width: 451px;
}
ul {
 margin: 0;
 padding: 0;
}
li {
 margin: 0;
 padding: 0;
}
#preload {
 display: none;
}
</style>
</head>
<body>
 <div class="fon">
    <center>
     <div class="rotator">
        <ul>
          <li class="show"><a href=""><img src="" width="1200" height="300"></a></li>
          <li><a href=""> <img class="center" src="" width="1200" align="middle" height="300"></a></li>
          <li><a href="/"><img src="" width="1200" align="middle" height="300"></a></li>
          <li><a href=""><img src="" width="1200" align="middle" height="300"></a></li> 
          <li><a href=""><img src="" align="middle" width="1200" height="300"></a></li> 
          <li><a href="/events.asp?id=200"><img src="" width="1200" height="300"></a></li> 
          <li><a href="/events.asp?id=200"><img src="" width="1200" height="300"></a></li> 
       </ul>
     </div>
   </center> 
 </div>
</body>
</html>
Быстрый ответ:
Powered by dgreen

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.