En primer lugar, gracias por el curso. Es una maravilla. Ahora paso a exponeros algunos problemas que van surgiendo...
Si dejo el margen de la página en 800px, se ve muy pequeña, tanto en Explorer cómo en Firefox. Por tanto lo he dejado en 1000px. ¿Es correcto? Pero no hay manera de darle la misma anchura ni centrar a los bordes redondeados. ¿Qué pasa? Cómo puedo hacer para que el borde redondeado inferior esté por debajo de los enlaces inferiores?
Des de el enlace Destinacions, se puede navegar por los subenlaces de esta página (Marruecos, Jordània, etc.), pero si des uno de estos subenlaces se clica cualquier otro enlace (que no sea entre subenlaces), da error. Por más que miro no consigo acertar con la solución.
¿Por qué en Explorer la parte superior se ve correctamente, sin espacio entre el borde redondeado superior y la cabecera, mientras que con Firefox sí que aparece esta separación?
¿Podríais ayudarme?
Gracias por adelantado y por vuestra paciencia
La página es: http://www.somnis.ppcc.cat
La página de estilos es la siguiente:
* {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align:justify }
h1 {font-size: 1.1em ; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center }
h2 {font-size: 1.1em ; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
body {background-color:#EEAEEE}
#global {width:1000px ; margin: 4px auto }
#curva-superior { background-image: url(objectes/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:110px }
#logotipo { width: 150px ; float:left ; margin-top: 5px ; margin-left: 40px }
#benvinguda { width:550px ; float:center ; margin-top: 25px ; font-size: 20px}
#publicitat { width:100px ; float:right ; margin-top: 0px ; font-size: 10px}
#publicitat1 { width:100px ; float:right ; margin-top: 18px ; font-size: 10px}
#mapamundi { width: 135px ; float: left ; margin-top: 2px ; margin-left: 2px ; }
#navegacion {background-color: #9c9c9c ; border: black 1px solid ; height:20px }
#navegacion li { float:left ; list-style:none ; margin: 0px 20px 0px 50px }
#navegacion ul { margin-left: 15px }
#contenido {background-color: #ffd700 ; text-align:left ; border-left: black 1px solid ; border-top: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px }
#menu { width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objectes/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom: 5px }
#menu li {list-style:none ; margin: 4px 8px 4px 8px}
#menu h1 { text-decoration:none ; font-size: 12px ; padding-top:12px ; background-image: url(objectes/menu-parte-superior.gif) }
#pie { border-left: black 1px solid ; border-right: 1px solid ; border-top: black 1px solid ; height: 100px ; }
#pie li {list-style: none ; font-size: 12px }
#pieuno { float:left ; width: 150px }
#piedos { float: center ; width: 498px }
#pietres {float: left ; width: 150px }
#curva-inferior { background-image: url(objectes/curva-inferior.gif) ; background-repeat: no-repeat ; width:798x ; height: 15px ; overflow : hidden }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
a {color: blue ; font-size:1.3em ; text-decoration: none }
#pie a {color: blue ; text-decoration: none ; display: block }
#pie a: link {}
#pie a: visited {}
#pie a: hover { color: black ; text-decoration: underline ; background-color: yellow }
#pie a: active {color: black }
#logotipo a {}
#logotipo a: link {}
#logotipo a: visited {}
#logotipo a: hover {background-color: white }
#logotipe a: active {}
Si dejo el margen de la página en 800px, se ve muy pequeña, tanto en Explorer cómo en Firefox. Por tanto lo he dejado en 1000px. ¿Es correcto? Pero no hay manera de darle la misma anchura ni centrar a los bordes redondeados. ¿Qué pasa? Cómo puedo hacer para que el borde redondeado inferior esté por debajo de los enlaces inferiores?
Des de el enlace Destinacions, se puede navegar por los subenlaces de esta página (Marruecos, Jordània, etc.), pero si des uno de estos subenlaces se clica cualquier otro enlace (que no sea entre subenlaces), da error. Por más que miro no consigo acertar con la solución.
¿Por qué en Explorer la parte superior se ve correctamente, sin espacio entre el borde redondeado superior y la cabecera, mientras que con Firefox sí que aparece esta separación?
¿Podríais ayudarme?
Gracias por adelantado y por vuestra paciencia
La página es: http://www.somnis.ppcc.cat
La página de estilos es la siguiente:
* {text-indent: 0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align:justify }
h1 {font-size: 1.1em ; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center }
h2 {font-size: 1.1em ; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
body {background-color:#EEAEEE}
#global {width:1000px ; margin: 4px auto }
#curva-superior { background-image: url(objectes/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:110px }
#logotipo { width: 150px ; float:left ; margin-top: 5px ; margin-left: 40px }
#benvinguda { width:550px ; float:center ; margin-top: 25px ; font-size: 20px}
#publicitat { width:100px ; float:right ; margin-top: 0px ; font-size: 10px}
#publicitat1 { width:100px ; float:right ; margin-top: 18px ; font-size: 10px}
#mapamundi { width: 135px ; float: left ; margin-top: 2px ; margin-left: 2px ; }
#navegacion {background-color: #9c9c9c ; border: black 1px solid ; height:20px }
#navegacion li { float:left ; list-style:none ; margin: 0px 20px 0px 50px }
#navegacion ul { margin-left: 15px }
#contenido {background-color: #ffd700 ; text-align:left ; border-left: black 1px solid ; border-top: black 1px solid ; border-right: black 1px solid }
#contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px }
#menu { width: 150px ; float:left ; text-align:left ; margin: 3px 10px 3px 3px ; background-image: url(objectes/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom: 5px }
#menu li {list-style:none ; margin: 4px 8px 4px 8px}
#menu h1 { text-decoration:none ; font-size: 12px ; padding-top:12px ; background-image: url(objectes/menu-parte-superior.gif) }
#pie { border-left: black 1px solid ; border-right: 1px solid ; border-top: black 1px solid ; height: 100px ; }
#pie li {list-style: none ; font-size: 12px }
#pieuno { float:left ; width: 150px }
#piedos { float: center ; width: 498px }
#pietres {float: left ; width: 150px }
#curva-inferior { background-image: url(objectes/curva-inferior.gif) ; background-repeat: no-repeat ; width:798x ; height: 15px ; overflow : hidden }
a:link {}
a:visited {}
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active {}
a {color: blue ; font-size:1.3em ; text-decoration: none }
#pie a {color: blue ; text-decoration: none ; display: block }
#pie a: link {}
#pie a: visited {}
#pie a: hover { color: black ; text-decoration: underline ; background-color: yellow }
#pie a: active {color: black }
#logotipo a {}
#logotipo a: link {}
#logotipo a: visited {}
#logotipo a: hover {background-color: white }
#logotipe a: active {}