Foros del Web » Creando para Internet » CSS »

Problemas con Web S0S!!!

Estas en el tema de Problemas con Web S0S!!! en el foro de CSS en Foros del Web. Hola a todos, a ver si me se explicar bien, estoy creando una web con XHTML Y CSS y bueno voy un poco lenta, porque ...
  #1 (permalink)  
Antiguo 14/11/2009, 13:12
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 8 años, 1 mes
Puntos: 1
Problemas con Web S0S!!!

Hola a todos, a ver si me se explicar bien, estoy creando una web con XHTML Y CSS y bueno voy un poco lenta, porque me voy atrancando porque hay cosas que no me funcionan y por muchas vueltas que le doy no consigo arreglarlo. a ver que os cuento.

Mi primer problema es el siguiente:

En la cabecera (una imagen de fondo) tengo un logo y una imagen de un arroba convertidas en enlaces, el problema es que en el firefox me sale el borde azul alrededor de la imagen y aunque en su css he puesto border: 0px; sigue saliendo, no se quita, pero en cambio en safari y opera no se ve. Un apunte de interés, yo trabajo con Macintosh.

Bueno sigamos, segundo problema: (el que más guerra me esta dando)

He creado un menu horizontal con unas imagen de fondo, el problema reside en que yo luego le he dado aspecto a las formas de link, visited, hover, y active, entonces la imagen de fondo la he metido en el a, pero la imagen solo aparece si la pongo como backgroun-imagen el el li, claro luego al darle aspecto a lo otro no cambia, pero si le quito la imagen del li y se la pongo en el a y sus distintos aspectos. En el link, visited y active, no la coge, pero el hover, la coge, pero lo hace mal, la imagen aparece en la esquina inferior izquierda de la caja. aparece solo una parte de la imagen.

Tercer problema.

La web la he diseñado con una fuente externa al dw que gestiono con el suitecase y por supuesto la he incluido en el css, el problema es que al previsualizar la pagina en el navegador la fuente no se visualiza, comprendo que he de subirla a la web, pero no se como se hace ni si es posible.

Cuarto problema.

Tengo puesta una imagen repetida como fondo de papel tapiz sobre lo que es la pagina diseñada, pero la he metido en una div y le he dado estilo en el css, sobre todo en altura, se (pero no se como) meterla de fondo y que la altura y la anchura se adapte a la pantalla en la que se vaya a visualizar, más grande o más pequeña, a ver si me explico. no quiero que se vea ningun borde blanco alrededor de la web, solo esa imagen. tal y como lo tengo ahora se ve un marco blanco que engloba toda la pagina.

Bueno creo que nada más, muchas gracias y espero vuestra ayuda. Estoy algo agobiada porque es un trabajo de fin de master que tengo que entregar y voy algo retrasada, la web ya la tengo diseñada en illustrator, los problemas los estoy teniendo al pasarla al dreamweaver. Pos eso que muchas gracias a todos por vuestra inestimable ayuda.
  #2 (permalink)  
Antiguo 14/11/2009, 13:21
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 15 años, 9 meses
Puntos: 771
Respuesta: Problemas con Web S0S!!!

Hola Serezade81

Si no pones el código lo único que puedo decirte es... bueno, no puedo decirte nada. Mejor pon el código (sobre todo la línea 13 )

Saludos,
  #3 (permalink)  
Antiguo 14/11/2009, 13:24
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con Web S0S!!!

Es más práctico que cambies la comic, negrita y tamaño por códigos o mejor aun por un enlace a la página
Un saludo

Oppss . Sorry Javier. Por quedarme dormido
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #4 (permalink)  
Antiguo 14/11/2009, 13:39
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Problemas con Web S0S!!!

Lo de el enlace no pude ser porque no he subido nada todavia, y sobre lo de copiar el codigo, que hago os copio el css y el html??o como lo hago.
Gracias.
  #5 (permalink)  
Antiguo 14/11/2009, 13:39
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Problemas con Web S0S!!!

Por favor cambienle la fuente que mis ojos de diseñador no pueden ver Comic Sans

Cita:
Iniciado por Serezade81 Ver Mensaje
Lo de el enlace no pude ser porque no he subido nada todavia, y sobre lo de copiar el codigo, que hago os copio el css y el html??o como lo hago.
Gracias.
Los dos

Saludos
__________________
Grupo Telegram Docker en Español
  #6 (permalink)  
Antiguo 14/11/2009, 13:43
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Problemas con Web S0S!!!

A ver si lo he hecho bien. Gracias.

Código HTML:
<body>
<div id="contenedor">
  <div id="grupo">
   <div id="cabecera">
      <div id="logo"> <a href="#"><img src="Imagenes/Logo Cabecera.png" /></a></div>
      <div id="enlace"><a href="#"><img src="Imagenes/Arroba.png" /></a></div>
    </div>
    <div class="menu">
      <ul>
        <li><a href="#">Diseño e Ilustración</a></li>
        <li><a href="#">Maquetación Web</a></li>
        <li><a href="#">Motion Graphics</a> </li>
      </ul>
    </div>
    <div id="hada"><img src="Imagenes/hada.png"  /></div>
    <div id="aptexto"> Volando una pequeña hada<br />
      al oído me susurró<br />
      y regalos muy especiales <br />
      con cariño me dejó. <br />
      Duendes, hadas, princesas, <br />
      y grandes seres mágicos creó; <br />
      lugares perdidos encontró, <br />
      palabras con gran significado descubrió, <br />
      y por fin mi sueño se cumplió <br />
    </div>
  </div>
</div>
</body>
</html> 
Código:
@charset "UTF-8";
/* CSS Document */

#contenedor {
	background-image: url(Imagenes/Fondo%20Web.gif);
	height: 830px;
	border: 0px;
	margin: 0 auto;
	padding-top: 35px;
}
#grupo {
	width:1030px;
	height:768px;
	background-image: url(Imagenes/Home%20fondo-01.png);
	background-color: #ede0e5;
	background-repeat:no-repeat;
	margin: 0px auto;
	padding-top: 20px;
	padding-left: 6px;
	text-align:center;
}
#cabecera {
	background-image:url(Imagenes/Cabecera.png);
	background-repeat:no-repeat;
	width: 1000px;
	height: 150px;
	text-align:center;
	margin-left: 12px;
	margin-bottom: 20px;
}
#logo {
	float:left;
	border: 0px;
	margin-left:20px;
	margin-top: 10px;
	border: none;
}
#enlace {
	float:right;
	margin-top: 90px;
	margin-right: 37px;
	border: 0px;
}
ul {
	margin: 0px;
	list-style-type:none;
	width: 1024px;
	padding: 0px;
}
li {
	display:block;
	float: left;
	width: 341px;
	height: 40px;
	text-align: center;
	background-image:url(Imagenes/imgmenu.png);
	background-repeat: no-repeat;
	background-position: center;
}
.menu li a {
	color: #fff;
	text-decoration:none;
	font-family: "Typo Upright BT";
	font-size: 24px;
	border: none;
	border: 0px;
}
.menu a:link {
	color: white;
	text-decoration:none;
	font-size: 24px;
	font-family: "Typo Upright BT";
	border: 0px;
}
.menu a:visite {
 background-image:url(Imagenes/Visite.png);
 color:#802247;
}
.menu a:hover {
	background-image: url(Imagenes/Hover.png);
	color: #802247;
}
.menu a:active {
	background-image: url(Imagenes/Active.png);
	color:#802247;
}
#aptexto {
	font-family:"Typo Upright BT";
	margin-top: 80px;
	margin-left: 100px;
	font-size: 36px;
	width: 410px;
	float:left;
	text-align:center;
	color: #802247;
}
#hada {
	float:right;
	margin-right: 57px;
	margin-top: 25px;
}
  #7 (permalink)  
Antiguo 14/11/2009, 13:57
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Problemas con Web S0S!!!

A ver el primer problema se soluciona con esto:

Código CSS:
Ver original
  1. img {
  2. border: none;
  3. }


Para el tercer problema te recomiendo que leas esto: Catalogo de Fuentes Web, de un moderador de aqu. Pero si quieres usar fuentes diferentes hay opciones como @font-face en css3 y eot para ie.


El cuarto problema se soluciona poniendo el fondo no en un div, si no el body:
Código CSS:
Ver original
  1. body {
  2. background: url(Imagenes/Fondo&#37;20Web.gif) ;
  3. }

Un consejo sobre el nombre de las imágenes: Siempre usa nombre en minúsculas y sin espacios.

Saludos
__________________
Grupo Telegram Docker en Español

Última edición por Carlangueitor; 14/11/2009 a las 14:11
  #8 (permalink)  
Antiguo 14/11/2009, 14:11
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Problemas con Web S0S!!!

MUCHAS GRACIAS!!!!!! Funcionan perfectamente las dos cosas que me has dicho, gracias, ya lo he cambiado. Y sobre los otros dos sobre todo el del menu, lo otro puede esperar a cuando ya tenga terminada la web y la suba a internet. Mil gracias de nuevo, ya empiezo a ver un poquito la luz a lo largo de este oscuro tunel, je, je.
  #9 (permalink)  
Antiguo 14/11/2009, 14:15
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problemas con Web S0S!!!

Añade a tu declaración
Cita:
.menu li a {
display: block;
}
Y es más práctico que no le des altura al elemento "li". Añades el padding necesario a los enlaces (menu li a ) y así te aseguras que quedan centrados en la vertical.

Tercer:
Usa la regla @font-face.
Aquí una guía para utilizarla. Pero recuerda que no todos los navegadores la soportan, así que define otra familia de las safety-fonts ("fuentes seguras") como complemento y seguro

Cuarto:
Si no quieres que haya zonas "en blanco" en el fondo de la ventana, aplica la imagen al "body" (si el diseño lo permite).

Y para evitar problemas con los valores por defecto de los distintos navegadores, utiliza un reset + css

Un saludo

Edito: pero en la edición

Añado: sugerencia: no utilices espacios en blanco o caracteres "extraños" en los nombres de archivo:
Imagenes/Home%20fondo-01.png
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 14/11/2009, 14:15
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Problemas con Web S0S!!!

Ah!!! Una cosita que acabo de descubrir al quitarle la imagen de fondo, como puedo centrar el contenido en lo alto de la pagina???
Muchas gracias de nuevo por todo!!!!
  #11 (permalink)  
Antiguo 14/11/2009, 14:48
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: Problemas con Web S0S!!!

Te refieres a que quede hasta arriba?? quitale el padding a #contenedor:

Código css:
Ver original
  1. #contenedor {
  2.     height: 830px;
  3.     border: 0px;
  4.     margin: 0 auto;

Saludos
__________________
Grupo Telegram Docker en Español
  #12 (permalink)  
Antiguo 14/11/2009, 17:42
 
Fecha de Ingreso: noviembre-2009
Ubicación: Madrid
Mensajes: 81
Antigüedad: 8 años, 1 mes
Puntos: 1
Respuesta: Problemas con Web S0S!!!

todo lo contrario m refiero a q quedé centrada a lo alto,tenía 1padding arriba yse lo he quitado y se pega arriba,querría q se centrará en pantalla tanto ancho com alto.No se sí m explico bien?Gracias!!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 16:30.