0

проблема заключается в том что при приближение страницы, "Body сливается с контентом, из за чего строки текста в правой стороне не видно.

приближение "150%" введите сюда описание изображения

приближение "100%" введите сюда описание изображения

Подскажите пожалуйста в чем проблема

мой код css:

#fondo
    {
        padding: 8em 0em;
        background-image: url(../images/objetivo.jpg);
        background-position: center;
        background-size: cover;
    }


h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #454445;
}

p, ol, ul {
    margin-top: 0;
}

p {
    line-height: 180%;
}

a {
    color: #2C383B;
}

.container {
    margin: 0px auto;
    width: 1200px;
}

.miembros {
    display: inline-block;
    padding: 5%;
    margin-left: 4px;
}

#nom {
    margin-left: 42px;
    float: center;
    font-size: 1.5em;
    color: rgb(32, 218, 8);
}


#arr {
    font-size: 1.8em;
}


ul.style2 a {
    display: inline-block;
    margin-left: 1em;
}

ul.style2 li:first-child {
    border-top: 0;
    padding-top: 0;
}

ul.style2 .icon {
    color: #FFF;
}


.button {
display: inline-block;
padding: 1.3em 3em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #FFF;
}

.button:hover {
    background: #86bd3b;
}

.button-big {
    padding: 1.6em 4em;
    font-size: 1.4em;
    font-weight: 900;
}



#nav {
    background: #2b2b2b;
}

#header {
    position: relative;
    height: 100px;
}

#logo {
    position: absolute;
    top: 0.5em;
    width: 56px;
    height: 56px;
}


#menu {
    position: absolute;
    right: 0;
    top: 1.6em;
}

#menu ul {
    display: inline-block;
}

#menu li {
    display: block;
    float: left;
    text-align: center;
}

#menu li a, #menu li span {
    display: inline-block;
    padding: 1em 1.5em 0em 1.5em;
    letter-spacing: 0.10em;
    text-decoration: none;
    font-size: 1em;
    text-transform: uppercase;
    color: #FFF;
}

#banner {
    overflow: hidden;
    width: 1000px;
    text-align: center;
    color: rgba(255,255,255,.7);
    font-size: 1.5em;
}

#banner a {
    color: rgba(255,255,255,.9);
}

#banner h2 {
    padding-bottom: 0.50em;
    font-weight: 400;
    font-size: 3em;
    color: #FFF;
}

#banner .button {
    margin-top: 2em;
    background: #6fac1b;
}

#banner strong {
    color: #FFF;
}

#banner span {
    display: block;
    padding-top: 0.20em;
    text-transform: uppercase;
    font-size: 1.2em;
    color: #A2A2A2;
}

#envoltura {
    background: #FFF;
}

#content {
    padding: 0em 7em;
}

#piePagina {
  padding: 6em 0em 10em 0em;
}

#piePagina p {
    letter-spacing: 0.20em;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.80em;
    color: rgba(255,255,255,0.3);
}

#piePagina a {
    text-decoration: none;
    color: rgba(255,255,255,0.6);
}

h4 {
    color: rgba(255,255,255,0.3);
    font-size: 30px;
    float: right;
    margin-right: 50px;
    margin-top: 5px;
}

.reds {
    float: right;
    padding-left: 3%;
    margin-top: 16px;
    position: relative;
    right: -12.9%;
    line-height: 150px;
    width: 40px;
    height: 40px;
}

#contenido {
    overflow: hidden;
    padding: 10em;
    background: rgb(255, 255, 255);
    text-align: left;
}


#footer .title {
    display: block;
    padding-top: 1em;
    text-transform: uppercase;
    font-size: 0.80em;
    color: rgba(255,255,255,0.5);
}

#footer .column1, #footer .column2 {
    width: 560px;
}

#footer .column1 {
    float: left;
}


.margin-btm {
    overflow: hidden;
    margin-bottom: 5em;
    padding-bottom: 5em;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.seccion1 p {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    font-size: 1.3em;
}

.extra2 .seccion1 {
    margin-left: 60px;
    width: 1070px;
    border-style: solid;
    border-color: rgb(39, 212, 4);
}


#img {
    width: 200px;
    height: 190px;
    margin-right: 30px;
    margin-top: 20px;
    float: right;
    background-image: url(../images/cultura.jpg);
}

#video {
    margin-left:230px;
    margin-top: 50px;
}

#obj {
    width: 200px;
    height: 190px;
    margin-right: 30px;
    margin-top: -49px;
    float: right;
    background-image: url(../images/obj.jfif);  
}

body {
    position: relative;
    margin: 0em;
    background: #2b2b2b;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11pt;

}

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="css.css" rel="stylesheet" type="text/css"/>

</head>
<body>
  <div id="nav">
    <div id="header" class="container">
      <div id="logo">
<span class="ccc"><a href="../inicio/inicio.html"><img id="logo" src="../images/logo.png"></a></span>
      </div>
      <div id="menu">
        <ul class="bar">
          <li><a class="noticias" href="../noticias/noticias.html">Noticias</a></li>
          <li><a class="miembros" href="../miembros/miembros.html">Miembros</a></li>
          <li><a class="objetivo" href="../objetivo/objetivo.html">Objetivo</a></li>
          <li><a class="propuestas" href="../propuestas/propuestas.html">Propuestas</a></li>
          <li><a class="formulario" href="../formulario/formulario.html">Formulario</a></li>
          <li><a class="donativo" href="../donativo/donativo.html">Donativo</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="fondo">

      <div id="banner" class="container">
        <h2>Objetivo</h2>
      </div>
    </div>
  </div>
  <div id="envoltura">
    <div id="contenido">
      <div class="extra2 margin-btm container">
        <div class="titulo-contenido">
      </div>
      <div class="extra2 container"></div>
        <div class="seccion1">
          <img id="img">
    <p style="margin-left: 440px;">Objetivo general:</p>
    <ul id="lista">
      <li>Promover una cultura ambiental que permita el establecimiento de buenos hábitos y actitudes en los estudiantes y comunidad educativa en general de la sede Varital frente al cuidado y conservación del medio ambiente, alcanzando así la promoción del desarrollo sostenible.
      </li>
  </ul>
    <br>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/T_jlqq461JU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <br>
    <br>
    <p style="margin-left: 440px;">Objetivos específicos:</p>
      <ul id="lista">
        <li>Reconocer el papel que juega las TICs para la promoción de campañas ambientales que ayuden a sensibilizar a estudiantes y comunidad educativa en general sobre los cuidados que deben tenerse en cuenta para asegurar un desarrollo sostenible del medio ambiente.</li><br>
        <li>Identificar y comprender las causas de las principales amenazas y problemas ambientales que afectan nuestro planeta.</p><br>
        <img id="obj">
            <li>Prevenir y Controlar mediante el establecimiento de medidas preventivas los riesgos para la salud asociados a la gestión de residuos sólidos y contaminación del agua.</li>
            <li>Instruir al estudiante y comunidad educativa en general sobre las técnicas de manejo de los sólidos domiciliarios para la reutilización de los mismos.</li>
            <li> Estimular mediante el uso de variados recursos didácticos interactivos, la búsqueda de información y el interés por el conocimiento de la realidad ambiental que rodea a los estudiantes y comunidad educativa en general.</li>
            <li>Establecer estrategias encaminadas a la protección de la calidad ambiental del entorno natural y social.</li>
        <li>Comprender la importancia de reciclar y cuidar el medio ambiente.</li>
      </ul>


        </div>
      </div>
    </div>
  </div>
  <div id="piePagina" class="container">
    <h4>Siguenos</h4>
    <br>
    <br>
    <a href="www.facebook.com"><img class="reds" src="../images/fb.png"></a>
    <a href="www.instagram.com"><img class="reds" src="../images/insta.png"></a>
    <a href="www.twitter.com"><img class="reds" src="../images/tw.png"></a>
    <p>© 2019 - 2020 Medio Ambiente and individual contributors content is available under <a href="../licencia/licencia.html">These Licenses</a></p>
  </div>
  </body>
  </html>



´´´
2
  • Добавляйте, пожалуйста, всегда Вашу разметку html, иначе ответить на Ваш вопрос невозможно.
    – Denis640Kb
    15 фев 2020 в 12:50
  • @Denis640Kb, добавил
    – CbobY
    15 фев 2020 в 13:21

2 ответа 2

0

#fondo
    {
        padding: 8em 0em;
        background-image: url(../images/objetivo.jpg);
        background-position: center;
        background-size: cover;
    }


h2, h3 {
    margin: 0;
    padding: 0;
    font-weight: 600;
    color: #454445;
}

p, ol, ul {
    margin-top: 0;
}

p {
    line-height: 180%;
}

a {
    color: #2C383B;
}

.container {
    margin: 0px auto;
    width: 100%
}

.miembros {
    display: inline-block;
    padding: 5%;
    margin-left: 4px;
}

#nom {
    margin-left: 42px;
    float: center;
    font-size: 1.5em;
    color: rgb(32, 218, 8);
}


#arr {
    font-size: 1.8em;
}


ul.style2 a {
    display: inline-block;
    margin-left: 1em;
}

ul.style2 li:first-child {
    border-top: 0;
    padding-top: 0;
}

ul.style2 .icon {
    color: #FFF;
}


.button {
display: inline-block;
padding: 1.3em 3em;
background: #8dc63f;
letter-spacing: 0.20em;
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
color: #FFF;
}

.button:hover {
    background: #86bd3b;
}

.button-big {
    padding: 1.6em 4em;
    font-size: 1.4em;
    font-weight: 900;
}



#nav {
    background: #2b2b2b;
}

#header {
    position: relative;
    height: 100px;
}

#logo {
    position: absolute;
    top: 0.5em;
    width: 56px;
    height: 56px;
}


#menu {
    position: absolute;
    right: 0;
    top: 1.6em;
}

#menu ul {
    display: inline-block;
}

#menu li {
    display: block;
    float: left;
    text-align: center;
}

#menu li a, #menu li span {
    display: inline-block;
    padding: 1em 1.5em 0em 1.5em;
    letter-spacing: 0.10em;
    text-decoration: none;
    font-size: 1em;
    text-transform: uppercase;
    color: #FFF;
}

#banner {
    overflow: hidden;
    width: 1000px;
    text-align: center;
    color: rgba(255,255,255,.7);
    font-size: 1.5em;
}

#banner a {
    color: rgba(255,255,255,.9);
}

#banner h2 {
    padding-bottom: 0.50em;
    font-weight: 400;
    font-size: 3em;
    color: #FFF;
}

#banner .button {
    margin-top: 2em;
    background: #6fac1b;
}

#banner strong {
    color: #FFF;
}

#banner span {
    display: block;
    padding-top: 0.20em;
    text-transform: uppercase;
    font-size: 1.2em;
    color: #A2A2A2;
}

#envoltura {
    background: #FFF;
}

#content {
    padding: 0em 7em;
}

#piePagina {
  padding: 6em 0em 10em 0em;
}

#piePagina p {
    letter-spacing: 0.20em;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.80em;
    color: rgba(255,255,255,0.3);
}

#piePagina a {
    text-decoration: none;
    color: rgba(255,255,255,0.6);
}

h4 {
    color: rgba(255,255,255,0.3);
    font-size: 30px;
    float: right;
    margin-right: 50px;
    margin-top: 5px;
}

.reds {
    float: right;
    padding-left: 3%;
    margin-top: 16px;
    position: relative;
    right: -12.9%;
    line-height: 150px;
    width: 40px;
    height: 40px;
}

#contenido {
    overflow: hidden;
    padding: 10em;
    background: rgb(255, 255, 255);
    text-align: left;
}


#footer .title {
    display: block;
    padding-top: 1em;
    text-transform: uppercase;
    font-size: 0.80em;
    color: rgba(255,255,255,0.5);
}

#footer .column1, #footer .column2 {
    width: 560px;
}

#footer .column1 {
    float: left;
}


.margin-btm {
    overflow: hidden;
    margin-bottom: 5em;
    padding-bottom: 5em;
    border-bottom: 1px solid rgba(0,0,0,.1);
}

.seccion1 p {
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 30px;
    font-size: 1.3em;
}

.extra2 .seccion1 {
    margin-left: 60px;
    border-style: solid;
    border-color: rgb(39, 212, 4);
}


#img {
    width: 200px;
    height: 190px;
    margin-right: 30px;
    margin-top: 20px;
    float: right;
    background-image: url(../images/cultura.jpg);
}

#video {
    margin-left:230px;
    margin-top: 50px;
}

#obj {
    width: 200px;
    height: 190px;
    margin-right: 30px;
    margin-top: -49px;
    float: right;
    background-image: url(../images/obj.jfif);  
}

body {
    position: relative;
    margin: 0em;
    background: #2b2b2b;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 11pt;

}
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet" />
<link href="css.css" rel="stylesheet" type="text/css"/>

</head>
<body>
  <div id="nav">
    <div id="header" class="container">
      <div id="logo">
<span class="ccc"><a href="../inicio/inicio.html"><img id="logo" src="../images/logo.png"></a></span>
      </div>
      <div id="menu">
        <ul class="bar">
          <li><a class="noticias" href="../noticias/noticias.html">Noticias</a></li>
          <li><a class="miembros" href="../miembros/miembros.html">Miembros</a></li>
          <li><a class="objetivo" href="../objetivo/objetivo.html">Objetivo</a></li>
          <li><a class="propuestas" href="../propuestas/propuestas.html">Propuestas</a></li>
          <li><a class="formulario" href="../formulario/formulario.html">Formulario</a></li>
          <li><a class="donativo" href="../donativo/donativo.html">Donativo</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="fondo">

      <div id="banner" class="container">
        <h2>Objetivo</h2>
      </div>
    </div>
  </div>
  <div id="envoltura">
    <div id="contenido">
      <div class="extra2 margin-btm container">
        <div class="titulo-contenido">
      </div>
      <div class="extra2 container"></div>
        <div class="seccion1">
          <img id="img">
    <p style="margin-left: 440px;">Objetivo general:</p>
    <ul id="lista">
      <li>Promover una cultura ambiental que permita el establecimiento de buenos hábitos y actitudes en los estudiantes y comunidad educativa en general de la sede Varital frente al cuidado y conservación del medio ambiente, alcanzando así la promoción del desarrollo sostenible.
      </li>
  </ul>
    <br>
    <iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/T_jlqq461JU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    <br>
    <br>
    <p style="margin-left: 440px;">Objetivos específicos:</p>
      <ul id="lista">
        <li>Reconocer el papel que juega las TICs para la promoción de campañas ambientales que ayuden a sensibilizar a estudiantes y comunidad educativa en general sobre los cuidados que deben tenerse en cuenta para asegurar un desarrollo sostenible del medio ambiente.</li><br>
        <li>Identificar y comprender las causas de las principales amenazas y problemas ambientales que afectan nuestro planeta.</p><br>
        <img id="obj">
            <li>Prevenir y Controlar mediante el establecimiento de medidas preventivas los riesgos para la salud asociados a la gestión de residuos sólidos y contaminación del agua.</li>
            <li>Instruir al estudiante y comunidad educativa en general sobre las técnicas de manejo de los sólidos domiciliarios para la reutilización de los mismos.</li>
            <li> Estimular mediante el uso de variados recursos didácticos interactivos, la búsqueda de información y el interés por el conocimiento de la realidad ambiental que rodea a los estudiantes y comunidad educativa en general.</li>
            <li>Establecer estrategias encaminadas a la protección de la calidad ambiental del entorno natural y social.</li>
        <li>Comprender la importancia de reciclar y cuidar el medio ambiente.</li>
      </ul>


        </div>
      </div>
    </div>
  </div>
  <div id="piePagina" class="container">
    <h4>Siguenos</h4>
    <br>
    <br>
    <a href="www.facebook.com"><img class="reds" src="../images/fb.png"></a>
    <a href="www.instagram.com"><img class="reds" src="../images/insta.png"></a>
    <a href="www.twitter.com"><img class="reds" src="../images/tw.png"></a>
    <p>© 2019 - 2020 Medio Ambiente and individual contributors content is available under <a href="../licencia/licencia.html">These Licenses</a></p>
  </div>
  </body>
  </html>

2
  • Сработало, спасибо большое 👍
    – CbobY
    15 фев 2020 в 17:33
  • @CbobY Пожалуйста
    – Arcadiy
    15 фев 2020 в 17:42
0

Вы используйте конкретную ширину в CSS width, в контейнерах. Думаю решение вашей проблемы простое. Если вы хотите ограничить ширину, то вместо width используйте max-width. Замените их.

1
  • Заменил "width" на "max-width". и вроде сработало, только теперь "nav" текст и картинки + видео в контейнере выходит за рамки.
    – CbobY
    15 фев 2020 в 15:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.