Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Problema con un objeto

Estas en el tema de Problema con un objeto en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 08/01/2015, 16:00
 
Fecha de Ingreso: enero-2015
Mensajes: 6
Antigüedad: 9 años, 2 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;
}
  #2 (permalink)  
Antiguo 08/01/2015, 19:52
 
Fecha de Ingreso: enero-2015
Mensajes: 6
Antigüedad: 9 años, 2 meses
Puntos: 0
Sonrisa Respuesta: Problema con un objeto

Ya encontré la solución del problema

Si a alguien le llega a pasar esta página web les podía ayudar

[URL="http://stackoverflow.com/questions/12581588/how-to-give-infinite-width-to-a-div"]http://stackoverflow.com/questions/12581588/how-to-give-infinite-width-to-a-div[/URL]

Simplemente tenia que poner float: left

Código:
.main-header {
  border-top: 1px solid #a0a9b2;
  border-bottom: 1px solid #a0a9b2;
  float: left
}
Muchas, gracias, creo que mi página tiene mucho código en si!

Etiquetas: background, color, fixed, hover, html, objeto, página, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:13.