Tema: Problema con un objeto
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 08/01/2015, 16:00
Zzz01Breikoft
 
Fecha de Ingreso: enero-2015
Mensajes: 6
Antigüedad: 9 años, 3 meses
Puntos: 0
Exclamación Problema con un objeto
Hola, soy nuevo en esto y estoy creando mi primera página web.

El problema surge que en el <header> tengo puesto un borde que quiero que me abarque todo la pantalla, similar al de [URL="http://www.avira.com/es/index"]http://www.avira.com/es/index[/URL]

El problema surge que cuando cambio la resolución de la pantalla a una mas chica (o simplemente le pones zoom) pareciera que el tamaño se enchica

Realmente no me se explicar, pero intentaré pasarles el código tanto html cómo css para que me entiendan

Código HTML:
<!DOCTYPE html>
<html lang="es">

  <head>
    <meta charset="utf-8">
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
    <meta content='width=device-width, initial-scale=1' name='viewport'>
    <title>Usa una guía</title>
    <link type="text/css" rel="stylesheet" href="AQUICSS.css"/>
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:100,300,400"/>
  </head>

  <body>

    <!-- Header -->

    <header class="main-header group">

      <div class="grid-full">


        <h1 class="logo" id="logo-header">
          <a href="index.html">Use A Guide</a>
        </h1>

        <nav class="nav-header">
          <ul>
            <code class="nav-list">
              <li><a href="index.html">Inicio</a></li><!--
              --><li><a href="why_use_a_guide.html">&iquest;Porqué usar una guía?</a></li><!--
              --><li><a href="steps.html">Pasos a seguir</a></li><!--
              --><li><a href="recommended_pages.html">Páginas recomendadas</a></li><!--
              --><li><a href="backgrounds.html">Backgrounds</a></li><!--
              --><li><a href="about_me.html">Sobre mí</a></li>
            </code>
          </ul>
        </nav>

      </div>

    </header>


    <!-- Hero -->

    <section class="hero container">

      <h2>Usa una guía, gana una partida</h2>

      <p>asdadadadadd</p>

      <a class="btn btn-alt" href="why_use_a_guide.html">&iquest;Porqué usar guía?</a>

    </section>

    <!-- Teasers -->

    <section class="grid">

      <!-- Steps -->

      <article class="teaser col-1-3">
        <a href="steps.html">
          <h5>Pasos a seguir</h5>
          <h3>Entiende Al Campeón</h3>
        </a>
        <p>Conoce sus debilidades, sus ventajas, su estilo de juego, sus combos y mucho más...</p>
      </article><!--

      Recommended Pages

      --><article class="teaser col-1-3">
        <a href="recommended_pages.html">
          <h5>Páginas recomendadas</h5>
          <h3>Busca Una Guía</h3>
        </a>
        <p>Forjale una build, runas y maestrías correctas</p>
      </article><!--

      Backgrounds

      --><article class="teaser col-1-3">
        <a href="backgrounds.html">
          <h5>Backgrounds</h5>
          <h3>&iexcl;Mira Fantásticos Fondos!</h3>
        </a>
        <p>&iexcl;Descarga, observa y escucha contenidos especiales!</p>
      </article>

    </section>

    <!-- Footer -->

    <footer class="main-footer group">

      <h1 class="logo" id="logo-footer">Use A Guide</h1>

      <p id="legend">Usar una guía en <strong> League Of Legends </strong> puede definir entre una <strong> victoria y una derrota. </strong></p>

      <small id="copyright">&copy; Zzz01 Breikoft</small>

      <nav class="nav-footer">
        <ul>
          <code class="nav-list">
            <li><a href="index.html">Inicio</a></li><!--
            --><li><a href="why_use_a_guide.html">&iquest;Porqué usar una guía?</a></li><!--
            --><li><a href="steps.html">Pasos a seguir</a></li><!--
            --><li><a href="recommended_pages.html">Páginas recomendadas</a></li><!--
            --><li><a href="backgrounds.html">Backgrounds</a></li><!--
            --><li><a href="about_me.html">Sobre mí</a></li>
          </code>
        </ul>
      </nav>

    </footer>

  </body>
</html>
CSS:
Código: 
/*
  ========================================
  Reset CSS:
    http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
  ========================================
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
  ========================================
  Custom styles
  ========================================
*/

body {
  color: #888;
  font: 300 16px/22px "Lato", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/*
  ========================================
  Grid
  ========================================
*/

*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.container,
.grid,
.main-footer {
  margin: 0 auto;
  width: 960px;
}
.container,
.main-footer {
  padding-left: 30px;
  padding-right: 30px;
}
.grid,
.col-1-3,
.col-2-3 {
  padding-left: 15px;
  padding-right: 15px;
}
.col-1-3,
.col-2-3  {
  display: inline-block;
  vertical-align: top;
}
.col-1-3 {
  width: 33.33%;
}
.col-2-3 {
  width: 66.66%;
}

/*
  ========================================
  Clearfix
  ========================================
*/

.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  clear: both;
  *zoom: 1;
}

/*
  ========================================
  Typography
  ========================================
*/

h1, h2, h3, h4 {
  color: #648880;
}
h1, h3, h4, h5, p {
  margin-bottom: 22px;
}
h1 {
  font-size: 36px;
  line-height: 44px;
}
h2 {
  font-size: 24px;
  line-height: 44px;
}
h3 {
  font-size: 21px;
}
h4 {
  font-size: 18px;
}
h5 {
  color: #a9b2b9;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}
strong {
  font-weight: 400;
}
cite, em {
  font-style: italic;
}

/*
  ========================================
  Links
  ========================================
*/

a {
  color: #648880;
  text-decoration: none;
}
a:hover {
  color: #a9b2b9;
}
p a {
  border-bottom: 1px solid #dfe2e5;
}

/*
  ========================================
  Buttons
  ========================================
*/

.btn {
  border-radius: 5px;
  display: inline-block;
  margin: 0;
}
.btn-alt {
  border: 1px solid #dfe2e5;
  padding: 10px 30px;
}
#Slide-top {
  position: fixed;
  bottom: 40px;
  right: 20px;
}
#Slide-top, 
span {
  width: 70px;
  height: 70px;
  display: block;
  background: url('media/buttons/Slide-top.png') no-repeat center center;
}

/*
  ========================================
  Main header
  ========================================
*/

.main-header {
  border-top: 1px solid #a0a9b2;
  border-bottom: 1px solid #a0a9b2;
}
.grid-full {
  margin: 10px auto;
  width: 960px;
}
#logo-header {
  border-right: 1px solid #cacfd4;
  float: left;
  font-size: 48px;
  font-weight: 100;
  letter-spacing: .5px;
  line-height: 44px;
  padding-right: 100px;
  text-transform: uppercase;
}

/*
  ========================================
  Main footer
  ========================================
*/

#legend {
  text-align: center;
  display: block;
  width: 190px;
  position: relative;
  left: 10px;
}
#logo-footer {
  display: block;
  float: left;
  text-transform: uppercase;
}
#copyright {
  margin-left: 40px;
}

/*
  ========================================
  Navigation
  ========================================
*/

.nav-header {
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  padding: 23px 0px;
}
.nav-footer {
  text-align: right;
  font-size: 14px;
  font-weight: 400;
  display: block;
  width: 100%;
  position: relative;
  bottom: 120px;
  left: 150px;
}

/*
  ========================================
  Home
  ========================================
*/

.hero {
  line-height: 44px;
  padding: 22px 80px 66px 80px;
  text-align: center;
}
.hero h2 {
  font-size: 36px;
}
.hero p {
  font-size: 24px;
  font-weight: 100;
}
.teaser a:hover h3 {
  color: #a9b2b9;
}
.logo {
  padding: 23px 0px;
}
.nav-list li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: top;
  text-transform: uppercase;
}