me queda chica la pag

hola, bueno mi problema es que tengo la pagina en un costado y todo lo mque sobra de mi pantalla queda libre, no se com o explicarlo


mejor veanlo ustedes mismos

http://lugano.onlinewebshop.net

espero que sepan responderme


aca esta la hoja de estilos y el index


ESTILO GENERAL


* {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
p {text-align: justify }
p.tipodos {font-size: 1.0em; color:blue ; font-weight: bold ; text-align: center}
h1 {font-size: 1.5em ; color:black ; font-weight: bold ; text-align: center}
h2 {color:blue ; font-weight: arial ; text-decoration: none ; text-align: center}
body {}
#global {width:800px; ; margin:4px auto ; text-align: justify }
#curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; height: 12px ; width:900px ; overflow : hidden }
#cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px ; width:900px }
#logotipo {background-color: ; width:280px ; float:left }
#publicidad {background-color: ; width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: ; border: black 1px solid ; height:20px ; width: 800px}
#navegacion li { float:left ; list-style:none ; margin: 0px 20px 0px 20px }
#navegacion ul { ; margin-left: 180px }
#contenido {background-color:#A2B5CD ; border-left: black 1px solid ; border-right: black 1px solid ; width: 800px}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px ; text-align: center}
#menu {background-color: silver ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:8px ; background-repeat: no repeat }
#arriba {background-image: url(objetos/menu-parte-superior.gif) ; padding:15px 0px ;}
#menu li {list-style:none ; margin: 0px 8px 0px 6px ; float:left }
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:82px ; margin: 10px 0px 0px 0px ; background-repeat:no repeat}
#noticias {background-color:silver}
#pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px ; width: 800px ; text-align: center }
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px ; list-style:none }
#piedos {float:center ; width:498px }
#pietres {float:right ; width:150px ; list-style:none}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link {color: #6E7B8B}
a:visited {}
a:hover {color:black ; text-decoration:none ; background-color: silver}
a:active {}
#pie a {color: #A2B5CD ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}



INDEX



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>LUGANO</title>
<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">
<link rel="stylesheet" href="estilo-menu-desplegable.css" type="text/css" media="all">
<script language="javascript" src="no-tocar.txt" type="text/javascript"></script>
<script language="javascript" src="numero-de-menus.txt" type="text/javascript"></script>
</head>
<body onload="init();">



<script language="JavaScript" type="text/javascript" src="http://m1.webstats.motigo.com/m.js"></script>
<script language="JavaScript" type="text/javascript">
<!--
motigo_webstats("AEQNKwDH_dFd_rc5LIhu_GoOLOsg", 0);
// -->
</script>
<noscript>
<a target="_blank" href="http://www.webstats.motigo.com/stats?AEQNKwDH_dFd_rc5LIhu_GoOLOsg">
[contenido no disponible]
</a>

Contador gratuito
</noscript>


<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">
<div id="logotipo">
<a href="index.html">
[contenido no disponible]
</a>
</div>
</div>
</div>
<div id="navegacion">
<ul>
  • Clubes
  • Sección 2
  • Sección 3

    </div>
    <div id="contenido">
    [contenido no disponible]<div id="control" style="display:none">counterwebkit2008</div>
    <div id="menu"> <div id="arriba"></div> <ul>
  • [contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]
  • [contenido no disponible]

    [contenido no disponible]</p>
  • [contenido no disponible]
  • [contenido no disponible]
    </div>
    <p class="tipouno"><h1>|L |U (G /A |N (O</h1></p>


    Bienvenidos visitantes, les presento esta nueva pagina que he creado. en esta web encontraran informacion acerca del barrio, sus clubes, noticias, y un buen foro </p>


    [contenido no disponible]</p>


    Tambien podran divertirse en la seccion de juegos que podran encontrar seleccionando en el menu lateral izquierdo. podran ver la historia de este gran barrio, tambien en el menu lateral, en la parte de arriba veran el menu de navegacion, coloquen el cursor arriba y veran mas subsecciones, en el menu horizontal encontraran todo lo que quieran saber sobre los clubes del barrio</p></div>

    <div id="pie">
    <div id="pieuno"><ul>
  • Foro
  • [correo eliminado]
  • Nos Enlazan</div>
    <div id="piedos">-.-.-IYII-.-.-</div>
    <div id="pietres"><ul>
  • Directorio
  • TopSite
  • Mapa de la Web</div>
    </div>
    <div id="curva-inferior"></div>
    </div>
    <script language="javascript" src="definir-menus.txt" type="text/javascript"></script>
    </body>
    </html>
  • Aquí has cerrado un div de más:

    <a href="index.html">
    [contenido no disponible]
    </a>
    </div>
    </div>
    </div>
    <div id="navegacion">
    <ul>
  • <a id

    Saludos, Juanma
  • aaaah


    ahora cambia la cosa


    gracias y suerte





    :arrow: edito: ahora como hago para que las capas me ocupen toda la pantalla, quedo centrado pero como podir a hacer para que ocupe todo?
    Pues tendrías que quitarle el width:800px al global, y a las capas que se queden muy estrechas ponerle un width:00%
    lamento decir que quedo mal mira

    cuando puse ese 0% desaparecio la curva superior, tmb trate poniendole una anchuira yo mismo pero no se agranda

    acaso tengo que agrandar la imagen con photoshop?

    http://lugano.onlinewebshop.net/



    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify }
    p.tipodos {font-size: 1.0em; color:blue ; font-weight: bold ; text-align: center}
    h1 {font-size: 1.5em ; color:black ; font-weight: bold ; text-align: center}
    h2 {color:blue ; font-weight: arial ; text-decoration: none ; text-align: center}
    body {}
    #global { margin:4px auto ; text-align: justify }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; height: 12px ; width:00% ; overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px ; width:00% }
    #logotipo {background-color: ; width:280px ; float:left }
    #publicidad {background-color: ; width:518px ; float:right ; margin-top:25px}
    #navegacion {background-color: ; border: black 1px solid ; height:20px ; width: 800px}
    #navegacion li { float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { ; margin-left: 180px }
    #contenido {background-color:#A2B5CD ; border-left: black 1px solid ; border-right: black 1px solid ; width: 800px}
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px ; text-align: center}
    #menu {background-color: silver ; width: 150px ; float:left ; text-align:left ; margin:3px 10px 3px 3px; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:8px ; background-repeat: no repeat }
    #arriba {background-image: url(objetos/menu-parte-superior.gif) ; padding:15px 0px ;}
    #menu li {list-style:none ; margin: 0px 8px 0px 6px ; float:left }
    #menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:82px ; margin: 10px 0px 0px 0px ; background-repeat:no repeat}
    #noticias {background-color:silver}
    #pie {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px ; width: 800px ; text-align: center }
    #pie li {list-style: none ; font-size: 12px}
    #pieuno {float:left ; width:150px ; list-style:none }
    #piedos {float:center ; width:498px }
    #pietres {float:right ; width:150px ; list-style:none}
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
    a {color: brown ; text-decoration:none ; display: block }
    a:link {color: #6E7B8B}
    a:visited {}
    a:hover {color:black ; text-decoration:none ; background-color: silver}
    a:active {}
    #pie a {color: #A2B5CD ; text-decoration:none ; display: block }
    #pie a:link {}
    #pie a:visited {}
    #pie a:hover {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active {color:black}
    #logotipo a {}
    #logotipo a:link {}
    #logotipo a:visited {}
    #logotipo a:hover {background-color: white }
    #logotipo a:active {}





    ya lo cambier eso y aun queda un poco torcido


    saludos!


    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px}
    p {text-align: justify }
    p.tipodos {font-size: 1.0em; color:blue ; font-weight: bold ; text-align: center}
    h1 {font-size: 1.5em ; color:black ; font-weight: bold ; text-align: center}
    h2 {color:blue ; font-weight: arial ; text-decoration: none ; text-align: center}
    body {}
    #global { margin:4px auto ; text-align: justify }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; height: 12px ; width:100% ; overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px ; width:100% }
    #logotipo {background-color: ; width:280px ; float:left }
    Es que esta web la has creado desde el principio para que esté centrada y con 800px, ahora debes cabiarla entera si quieres que ocupe todo. Tendrías que quitar por ejemplo los width y las curvas, vamos, que si quieres que ocupe toda la página mejor es hacerla desde el principio
    tambien puedes poner esto al final de contenido en la hoja de estilos:

    #contenido {background-color:#A2B5CD ; border-left: black 1px solid ; border-right: black 1px solid ; width: 800px; height:600px}

    ves cambiando la cifra hasta que la veas bien. De todos modos la pagina tiene muchos errores, faltan etiquetas de cierre, las listas no estan bien cerradas, etc. Revisalo todo poco a poco y ves depurando.
    Cómo querías que lo ocupara todo, horizontalmente o verticalmente? Yo entendí horizontalmente :oops: