head y ancho pagina

martines · #1 (**permalink**) 03/11/2010, 08:43

Me gustaria que el a traves de mi hoja de estilo, haga que el la imagen que tengo el head ocupe el 100% de la pagina. Y tambien me gustaria que la pagina ocupe el 100% de la pantalla del usuario. Aqui dejo mi codigo que llevo echo por aora. Tambien me gustaria que debajo del titulo h1, me saliera automaticamente una linia.

Este es mi archivo html.

Código PHP:

  <html>
<head>
<title>Nombre</title>
<link rel="stylesheet" href="css/style-general.css" type="text/css" media="all">

<div id="global">
<div id="head"><img src="files/head.png"/></div>
<div id="menu">
      <ul>
      <li><a href=#>Elemento 1<a></li>
      <li><a href=#>Elemento 2<a></li>
      <li><a href=#>Elemento 3<a></li>
      <li><a href=#>Elemento 4<a></li>
      <li><a href=#>Elemento 5<a></li>
      </ul>
</div>

<div id="publicidad">
      <div id="curvasuperior"></div>
      <div id="contenidopubli"></div>
      <div id="curvainferior"></div>
</div>

<div id="contenido">
      <div id="titulo"><h1>Titulo Ejemplo</h1></div>
      <div id="content">Contenido Ejemplo</div>
</div>
</head>
<body>



</body>
</html>

Este mi CSS

Código PHP:

  <!-- Documento css estilo general -->

#global    {
      width: 800px;
      margin: 4px auto;
      background-color: #FFFFFF;
      border: 3px solid #999999
      }

#head {
      margin: 5px;
      }

#menu {
      width: 150px;
      float: left;
      padding: 3px;
      height: auto;
      margin: 5px;
      font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
      }

#menu ul, li {
      list-style-type: none;
      }

#menu ul {
      margin: 0;
      padding: 0;
      }

#menu li {
      border-bottom: 1px solid #000000;
     }
#menu a {
      text-decoration: none;
      color: #333333;
      background: #FFFFFF;
      display: block;
      padding: 3px 6px;
      width: 138px;
      }

#menu a:hover {
      background:#CCCCCC;
      }

#publicidad {
      width: 150px;
      float: right;
      padding: 3px;
      height: auto;
      margin: 5px;
      }

#curvasuperior {
      background-image:url(../files/superiorpubli.png);
      background-repeat:no-repeat;
      width:100%;
      height:30px;
      }

#contenidopubli {
      width:auto;
      height:auto;
      padding:5px;
      background-image:url(../files/fondopubli.png);
      background-position:center;
      background-repeat:repeat-y;
      }

#curvainferior {
      background-image:url(../files/inferiorpubli.png);
      background-repeat:no-repeat;
      width:100%;
      height:30px;
      }

#contenido {
      width: 420px;
      float: left;
      padding: 3px;
      height: auto;
      margin: 5px;
      }

#titulo {
      width: 100%;
      height: auto;
      padding: 5px;
      }

#titulo h1 {
      color:#660000;
      font-family:Arial, Helvetica, sans-serif;
      font-size:18px;
      font-weight:bold;
      }

#content {
      width: 100%;
      height: auto;
      }

#content p {
      font-family:Arial, Helvetica, sans-serif;
      font-size:12px;
      }

#footer {
      width: auto;
      height: 30px;
      margin: 5px;
      clear: both;
      }

gamau6 · #2 (**permalink**) 04/11/2010, 14:04

eso vas a realizar con max-widht y min-widht y se te ajustara solo la pantalla.

lumiz · #3 (**permalink**) 04/11/2010, 14:47

Pone

body{margin:0;padding:0;}

y a #global enves de ponerle width: 800px;
ponele width: 100%;