M
Marketing Doing
Épsilon
Verificación en dos pasos activada
¡Podrían ayudarme con esto?
Necesito ayuda con mi código. Cuando ejecuto una sección como la de "creación de páginas" cambia la fuente y el tamaño de la letra; también si pueden ayudarme que con el despliegue de una sección se oculte el contenido de la descripción.
Aquí esta tambien el archivo CSS:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>WorkCenter</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="estilo/style.css">
</head>
<div class="responsive">
<body>
<!--Definición de el header con las secciónes a modificar con JavaScript-->
<header id="cabecera">
<a href="index.html" id="Nombre">WorkCenter</a>
<!--Sección 1-->
<nav>
<ul>
<span>
<a id="redaccion" href="javascript:changeDisplay('inf')">
<p class="header">Redacción</p>
</a>
</span>
<section id="inf" style="display:none">
<br>
<br>
<p class="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel beatae dignissimos voluptatibus quisquam ad praesentium illum mollitia similique quibusdam provident esse, totam impedit quia nostrum eligendi repudiandae, ex rem deleniti?</p>
</section>
<!--Sección 2-->
<span>
<a id="extra1" href="javascript:changeDisplay('edicion')">
<p class="header">Edición y Diseño</p>
</a>
</span>
<section id="edicion" style="display:none">
<br>
<br>
<p class="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid deserunt doloremque, dolorem itaque porro perferendis facere aspernatur rem, dignissimos vero recusandae voluptatum animi a nemo reiciendis, deleniti quo commodi laboriosam.</p>
</section>
<!--Sección 3-->
<span>
<a id="extra2" href="javascript:changeDisplay('web')">
<p class="header">Creación de páginas</p>
</a>
</span>
</nav>
<br>
<section id="web" style="display:none">
<br>
<br>
<h2>¿Necesitas un empujon con tu negocio?</h2>
<br>
<br>
<p class="parrafo">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magnam aut itaque, quibusdam suscipit ex commodi repellendus quo. Maxime odit maiores deserunt mollitia quaerat, similique distinctio. Nobis dicta est, maxime!</p>
<br>
<p class="parrafo">Si quieres más información, solo haz click...</p>
<br>
<a href="creacion_de_paginas.html"><p class="enlace">Aquí</p></a>
<br>
</section>
</ul>
</nav>
<br>
<br>
</header>
<!--Descripción de la página principal-->
<br>
<article>
<p id="descripcion">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magnam aut itaque, quibusdam suscipit ex commodi repellendus quo. Maxime odit maiores deserunt mollitia quaerat, similique distinctio. Nobis dicta est, maxime!</p>
</article>
</body>
</div>
<!--Definición de la script de Java para poder visualizar otras secciones en la misma página-->
<script type="text/javascript">
//Primera funcion para la funcionalidad de la primera sección
function changeDisplay (id) {
d = document.getElementById("redaccion");
e = document.getElementById(id);
if(e.style.display == 'none' || e.style.display == "") {
e.style.display = 'block';
d.innerHTML = 'Ocultar';
} else{
e.style.display = 'none';
d.innerHTML = 'Redaccion';
}
}
//Segunda función para la funcionalidad de la segunda sección
function changeDisplay (id) {
d = document.getElementById("extra1");
e = document.getElementById(id);
if(e.style.display == 'none' || e.style.display == "") {
e.style.display = 'block';
d.innerHTML = 'Ocultar';
} else{
e.style.display = 'none';
d.innerHTML = 'Edicion';
}
}
//Tercera función para la funcionalidad de la tercera sección
function changeDisplay (id) {
d = document.getElementById("extra2");
e = document.getElementById(id);
if(e.style.display == 'none' || e.style.display == "") {
e.style.display = 'block';
d.innerHTML = 'Ocultar';
} else{
e.style.display = 'none';
d.innerHTML = 'Creación de páginas';
}
}
</script>
<script src="JS/jquery.js"></script>
</html>Necesito ayuda con mi código. Cuando ejecuto una sección como la de "creación de páginas" cambia la fuente y el tamaño de la letra; también si pueden ayudarme que con el despliegue de una sección se oculte el contenido de la descripción.
Aquí esta tambien el archivo CSS:
HTML:
*{
margin: 0px;
padding: 0px;
}
h2{
color: #fff;
font-family: verdana;
}
p{
font-family: verdana;
font-size: 15px;
color: #fff;
}
.header{
color: #fff;
font-family: verdana;
font-size: 20px;
list-style: none;
}
.enlace{
margin-right: ;
margin-left: 20%;
margin-top: -4%;
}
.enlace :hover{
background-color: #910000;
}
a{
text-decoration: none;
list-style: none;
color: #fff;
display: block;
font-family: verdana;
margin-left: 45px;
margin-top: -10px;
margin-bottom: 0px em;
float: left;
}
.header :hover{
background-color: #910000;
border-radius: 5px;
padding: 5px;
margin-top: -10px;
}
article{
background-color: #bfbfbfb;
margin-left: 20px;
margin-right: 20px;
margin-top: 10%;
}
header{
opacity: 10%;
width: 100%;
height: 0px;
background-color: #545454;
border-radius: 0px;
-webkit-border-radius: 8px;
padding: 30px;
}
#cabecera{
background: rgba(109, 109, 109, 0.7);
}
body{
position: absolute;
background-color: #1e1e1e;
background: url("imagenes/fondo.jpg");
position: relative;
width: 100%;
height: 100%;
background-attachment: fixed;
}
#Nombre{
background-color: #444444;
margin-left: -30px;
font-size: 30px;
padding: 16.5px;
margin-top: -30px;
font-family: airstrike;
margin-right: 20px;
}
.responsive{
width: 100%;
max-width: 963.5px;
}
[MENTION=16931]medi[/MENTION]a screen and (max-width: 750px){
header{
width: auto;
}
}
[MENTION=16931]medi[/MENTION]a screen and (max-width: 700px){
header{
width: auto;
}
}
#web{
font-family: verdana;
font-size: 15px;
color: #fff;
background-color: #545454;
width: 100%;
max-width: 963.5px;
margin-top: 1%;
padding-left: 5%;
padding-right: 1.25%;
margin-left: -3.1%;
z-index: 2;
}
#inf{
font-family: verdana;
font-size: 15px;
color: #fff;
background-color: #545454;
width: 100%;
max-width: 963.5px;
margin-top: 1%;
padding-left: 5%;
padding-right: 1.25%;
margin-left: -3.1%;
z-index: 2;
}
#edicion{
font-family: verdana;
font-size: 15px;
color: #fff;
background-color: #545454;
width: 100%;
max-width: 963.5px;
margin-top: 3.1%;
padding-left: 5%;
padding-right: 1.25%;
margin-left: -3.1%;
z-index: 2;
display: block;
}
.parrafo{
z-index: 3;
position: relative;
}
#descripcion{
z-index: 1;
overflow: hidden;
}
span :hover{
background-color: #910000;
border-radius: 5px;
padding-top: 4px;
margin-top: -10px;
padding-bottom: 4px;
background-attachment: fixed;
}
ul{
background-attachment: fixed;
}
[MENTION=16931]medi[/MENTION]a screen and(.parrafo:display:true) {
#descripcion{
display:none;
}
}
