Размещайте баннер с файлами cookie в верхней части страницы и всегда в центре

Question

Размещайте баннер с файлами cookie в верхней части страницы и всегда в центре

0

Политика моей страны заставляет меня помещать предупреждающие баннеры для моего сайта. Я добавил следующий код:

<script src="http://j.maxmind.com/app/geoip.js"></script>
<div id="cookie" style="display:none;position:relative;left:0px;right:0px;top:0px;width:100%;min-height:30px;background: #000000;color:#ffffff;z-index: 99999;">
<div style="width:100%;position:absolute;padding-left:600px;font-family:verdana;font-size:9px;top:30%;">
    Usamos cookies propias y de terceros para mejorar la navegación. Si continua navegando consideramos que acepta el uso de cookies.
    <a href="javascript:void(0)" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a>
    <a href="PAGINA" target="_blank" style="padding-left:5px;text-decoration:none;color:#000000;">Más información</a>
</div>
</div>
<script>
function getCookie(c_name){
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1){
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1){
        c_value = null;
    }else{
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1){
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){
    document.getElementById("cookie").style.display="block";
}
function PonerCookie(){
    setCookie('aviso','1',365);
    document.getElementById("cookie").style.display="none";
}
</script>

Но я хочу, чтобы этот текст полностью сфокусировался на моем браузере на любом компьютере и заходил на сайт, который всегда появляется полностью и текст в центре. Как я могу это сделать? благодаря

Мой html:

<!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=utf-8" />
<title>BLOG</title>

        <!-- Attach our CSS -->
        <link rel="stylesheet" href="orbit-1.2.3.css"/>
        <link rel="stylesheet" href="demo-style.css"/>

        <!-- Attach necessary JS -->
        <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="jquery.orbit-1.2.3.min.js"></script>    

            <!--[if IE]>
                 <style type="text/css">
                     .timer { display: none !important; }
                     div.caption { background:transparent; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);zoom: 1; }
                </style>
            <![endif]-->

        <!-- Run the plugin -->
        <script type="text/javascript">
            $(window).load(function() {
                $('#featured').orbit();
            });
        </script>

<link href="<?php $_SERVER['DOCUMENT_ROOT']?>/estilo-pagina-css" rel="stylesheet" type="text/css" />
<style type="text/css">

#contenedor {
    width: 900px;
    margin: 0 auto;
    height: 100%;
    background-color: #000000;
}
</style>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<div id="cookie" style="display: fixed;background: #00000;overflow: hidden;color: #FFF;padding: 10px;">
<div style="padding:4px;background:#000000;text-decoration:none;color:#fff;">
    Usamos cookies propias y de terceros para mejorar la navegación. Si continua navegando consideramos que acepta el uso de cookies.
    <a href="javascript:void(0)" style="padding:4px;background:#4682B4;text-decoration:none;color:#fff;" onclick="PonerCookie();"><b>OK</b></a>
    <a href="PAGINA" target="_blank" style="padding-left:5px;text-decoration:none;color:#ffffff;">Más información</a>
</div>
</div>
<script>
function getCookie(c_name){
    var c_value = document.cookie;
    var c_start = c_value.indexOf(" " + c_name + "=");
    if (c_start == -1){
        c_start = c_value.indexOf(c_name + "=");
    }
    if (c_start == -1){
        c_value = null;
    }else{
        c_start = c_value.indexOf("=", c_start) + 1;
        var c_end = c_value.indexOf(";", c_start);
        if (c_end == -1){
            c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
    }
    return c_value;
}

function setCookie(c_name,value,exdays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + c_value;
}

if(geoip_country_code()=="ES" && getCookie('aviso')!="1"){
    document.getElementById("cookie").style.display="block";
}
function PonerCookie(){
    setCookie('aviso','1',365);
    document.getElementById("cookie").style.display="none";
}
</script>
</head>
<body>
<div id="contenedor">
<div id="cabecera" >
  <object id="EdgeID" type="text/html" width="900" height="167" data-dw-widget="Edge" data="head/Assets/head.html">
  </object>
</div>
<div id="botonera"><?php include($_SERVER['DOCUMENT_ROOT']."/botonera.php"); ?></div>
<div id="sombra"></div>
<div id="para-contenido"></div>
<div id="centro">
        <div id="featured"> 
            <div class="content" style="">
                <h1></h1>
                <h3></h3>
            </div>
            <a href=""><img src="imagenes-presentacion/66.jpg" /></a>
            <img src="imagenes-presentacion/65B.jpg"  />
            <img src="imagenes-presentacion/38.jpg"  />
            <img src="imagenes-presentacion/8.jpg"  />
             <img src="imagenes-presentacion/9.jpg"  />
              <img src="imagenes-presentacion/12.jpg"  />
               <img src="imagenes-presentacion/7.jpg"  />
                <img src="imagenes-presentacion/65.jpg"  />
                  <img src="imagenes-presentacion/65B.jpg"  />
                   <img src="imagenes-presentacion/16.jpg"  />
                   <img src="imagenes-presentacion/29.jpg"  />
        </div>
</div>
<div id="para-contenido2"><?php include($_SERVER['DOCUMENT_ROOT']."/presentacion.php"); ?></div>
<div id="pie"><?php include($_SERVER['DOCUMENT_ROOT']."/pie.php"); ?></div>
</div>
</body>
</html>

CSS:

<style type="text/css">

#contenedor {
    width: 900px;
    margin: 0 auto;
    height: 100%;
    background-color: #000000;
    display: inline;
}
body {
    margin: 0;
    padding: 0;
    height: 100%;
background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo1.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;

}
#cabecera {
    width: 900px;
    height: 167px;
    background-color: #CCC;
}
#sombra {
    width: 900px;
    height: 21px;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/sombra.jpg);

}
#botonera {
    width: 900px;
    height: 21px;
background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/2blog.jpg);

}
#pie {
    clear: both;
    width: 900px;
    height: 51px;
background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/4blog.jpg);
}

#centro {
    width: 900px;
    height: 100%;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo.jpg);
}
#para-contenido2 {
    width: 900px;
    height: 100%;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo.jpg);
}

#centro_galeria {
    width: 900px;
    height: 100%;
    padding-top: 15px;
    background-image: url(<?php $_SERVER['DOCUMENT_ROOT']?>/imagenes-blog/fondo.jpg);
}

Julia 19 фев. 2014, в 03:19

Источник

Теги:

javascript

html

css

cookies

resolution

1 ответ

Ещё вопросы

misterManSam · Answer 1 · 2014-02-18T23-53-00.000Z

Вы хотите использовать display: fixed. Это будет держать куки файлы div как баннер в верхней части страницы до тех пор, пока не будет удален с помощью javascript.

Если вы не хотите, чтобы он был центрирован по вертикали и по горизонтали? Это можно сделать, но баннер будет гораздо менее раздражать ваших пользователей.

Имейте скрипку! - Ссылка на скрипку!

HTML

<div id="cookie">
    <div>cookies text
        <a href="javascript:void(0)" onclick="PonerCookie();"><b>OK</b></a>
        <a href="PAGINA" target="_blank">Más información</a>
    </div>
</div>

CSS

#cookie {
    display: fixed;
    background: #4682B4;
    overflow: hidden;
    color: #FFF;
    padding: 10px;
}

#cookie a {
    padding:4px;
    background:#4682B4;
    text-decoration:none;
    color:#fff;
    float: right;
}

Извините, в центре не видно, справа, но если я снимаю квартиру: справа; идет влево, как можно разместить текст и другие ориентированные? Спасибо
Можете ли вы отредактировать свой пост и показать весь код, который вы используете для своей страницы?
Один вопрос, может ли он поставить баннер куки, когда вы перемещаете прокрутку страницы, удаляется? Спасибо
Поместите div#cookie после <body> и удалите атрибут style. Это должно исправить ваши проблемы :)
Отлично, почти так, вы сейчас говорите, как изменить стиль обоих слоев, как это было с самого начала, но текст всегда остается в центре? Спасибо