En el Opera se ve medio titulo a la derecha

Buenas,abro este tema ya que donde aloje esta pregunta estaba en otro tema que nadie me responde,a ver si asi obtengo una ayudita,

resulta que medio titulo se ve partido a la derecha en el opera,yo lo tengo igual que en la hoja del ejemplo de jorgens,esto es lo que tengo en html:

Esto es lo que tengo en plantilla:

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

<html>
<head>
<title>Segunda pagina</title>

<link rel="stylesheet" href="estilo-general.css" type="text/css" media="all">

</head>
<body>
<div id="global">
<div id="curva-superior"></div>
<div id="cabecera">

<div id="logotipo">[contenido no disponible]</div>
<div id="publicidad">Bienvenidos a mi Web</div>
</div>
<div id="navegacion">
<ul>
  • seccion 1
  • seccion 2
  • seccion 3
  • seccion 4

    </div>
    <div id="contenido">

    <div id="menu">
    <ul>
  • Enlace 1
  • Enlace 2
  • Enlace 3
    </div>
    <h1>Esta sera la zona principal de la web</h1>


    Este es mi segundo parrafo por lo que veo es mas grande que el anterior Y luego ponemos el tercer y ultimo parrafo,este sera un poco mas largo,para ver el efecto real entre parrafos largos y parrafos cortos</p>


    Y aqui entraremos ya en el</p><h2> ultimo parrafo</h2>

    o quizas en el penultimo,la cuestion es ir llenando la web de palabras para yo poder comprobarlo</p>


    Luego tenemos el ultimo renglon y este tiene que ser mas largo que el otro ya que asi podre apreciar mejor todos los efectos que puedan surgir con los diferentes renglones,y asi terminamos</p>
    </div>
    <div id="pie">Este es el pie de pagina</div>
    <div id="curva-inferior"></div>
    </div>
    </body>
    </html>

    Y esto en la hoja de css:

    * {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    body {text-align: center}
    #global {width: 800px ; margin: 4px auto }
    #curva-superior { background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }
    #cabecera {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height: 85px }
    #logotipo { width:280px ; float:left }
    #publicidad { width:518px ; float:right }
    #navegacion {background-color: gray ; border: black 1px solid ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px}
    #navegacion ul { margin-left: 180px }
    #contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
    #menu {background-color: yellow; width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px}
    #menu li { list-style:none ; margin: 4px 0px 4px 6px}
    #menu h1 {}

    #pie {background-color: white ; border-top: black 1px solid ; border-left: black 1px solid ; border-right: black 1px solid }
    #curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden }

    a {color: blue; font-size:1.3em ; text-decoration: none}
    a {color: brown ; text-decoration: none ; display: block }
    a:link {}
    a:visited {}
    a:hover {color:red ; text-decoration:underline ; background-color:silver}
    a:active {}

    haber si se puede saber por que en el opera no se ve bien aqui dejo un enlace para que lo comprobeis:

    historiasparanodormir.myartsonline.com/plantilla.html
  • Hola kierosaber.

    No te preocupes, sigue con el curso. De momento, podrás solucionar el problema que planteas si añades padding: 3px a la siguiente línea de códigos: h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}

    Así:

    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center ; padding: 3px }

    Saludos.
    Impresionante.....gracias moimua....ni se me habia ocurrido,con un simple padding: 3px....en la etiqueta h1.....como se nota que sabes eehhh!!!....jejjejeje....saludos.