Hola gjulian.. gracias x el aporte enviado.. pero en este caso no me valio, xq tambien me afecta a la foto que tengo puesta arriba en la zona dond va el logo.
Yaneth respuesta exacta.. por fin pude separar las imagenes..pero el problema que tengo ahora es que quiero darle borde a las fotos, pero lo mismo que antes.. cada vez que retoco la hoja de estilos o el html tratando de meterle el borde.. o unas veces no me funciona u otras veces me retoca la imagen que tengo puesta x logo. (una foto al ancho de la pagina).. como debo hacer para solo retocar las fotos de este codigo??? de hecho me paso algo muy curioso con una tabla que inserte y habiendole dado bordes.. no me aparecieron.. creo q hay algo en la hoja de estilos que no me deja q aparezcan en el html... aunque viendo como me quedo la tabla.. sin los bordes pero espaciado entre renglon y renglon.. pues me guste y asi lo deje.
como aplico el borde a estas fotos, y colocarle algun color al borde?
<div id="fotos">
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
mi hoja de estilos ahora esta asi..
* {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:red ; 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 ; margin-top:25px}
#navegacion {background-color: black ; border: black 1px solid ; height:30px }
#navegacion li {float:left ; list-style:none ; margin: 10px 15px 0px 15px ; padding: 0px 0px 13px 0px ; font-size: 0.9em }
#navegacion ul {margin-left: 21px }
#contenido {background-color: #EED2EE ; border-left: black 1px solid ; border-right: black 1px solid ; padding: 40px 20px 30px 20px }
#contenido p {margin: 15px 5px 0px 10px ; text-indent: 15px }
#menu {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:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
#pie {border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
#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: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#copyright {font-size:0.7em; text-align:center; color:white ; background-color:black ; width: 800px ; font-weight:bold}
.lista {list-style-type: none ; margin:0 ; padding:0 }
#fotos {margin: 50px 50px 50px 50px }
.separar {margin: 30px 20px 30px 20px}
Muchas gracias a la atencion prestada. Salu2
Yaneth respuesta exacta.. por fin pude separar las imagenes..pero el problema que tengo ahora es que quiero darle borde a las fotos, pero lo mismo que antes.. cada vez que retoco la hoja de estilos o el html tratando de meterle el borde.. o unas veces no me funciona u otras veces me retoca la imagen que tengo puesta x logo. (una foto al ancho de la pagina).. como debo hacer para solo retocar las fotos de este codigo??? de hecho me paso algo muy curioso con una tabla que inserte y habiendole dado bordes.. no me aparecieron.. creo q hay algo en la hoja de estilos que no me deja q aparezcan en el html... aunque viendo como me quedo la tabla.. sin los bordes pero espaciado entre renglon y renglon.. pues me guste y asi lo deje.
como aplico el borde a estas fotos, y colocarle algun color al borde?
<div id="fotos">
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
[contenido no disponible]
</div>
mi hoja de estilos ahora esta asi..
* {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:red ; 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 ; margin-top:25px}
#navegacion {background-color: black ; border: black 1px solid ; height:30px }
#navegacion li {float:left ; list-style:none ; margin: 10px 15px 0px 15px ; padding: 0px 0px 13px 0px ; font-size: 0.9em }
#navegacion ul {margin-left: 21px }
#contenido {background-color: #EED2EE ; border-left: black 1px solid ; border-right: black 1px solid ; padding: 40px 20px 30px 20px }
#contenido p {margin: 15px 5px 0px 10px ; text-indent: 15px }
#menu {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:5px }
#menu li {list-style:none ; margin: 4px 8px 4px 6px }
#menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ; background-image: url(objetos/menu-parte-superior.gif) }
#pie {border-left: black 1px solid ; border-right: black 1px solid ; border-top: black 1px solid ; height: 65px }
#pie li {list-style: none ; font-size: 12px }
#pieuno {float:left ; width:150px }
#piedos {float:left ; width:498px }
#pietres {float:left ; width:150px }
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height:12px ; overflow: hidden }
a {}
a:link {}
a:visited {}
a:hover {}
a:active {}
#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: white }
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}
#copyright {font-size:0.7em; text-align:center; color:white ; background-color:black ; width: 800px ; font-weight:bold}
.lista {list-style-type: none ; margin:0 ; padding:0 }
#fotos {margin: 50px 50px 50px 50px }
.separar {margin: 30px 20px 30px 20px}
Muchas gracias a la atencion prestada. Salu2