Dudas basicas

Apeaux · #1 (**permalink**) 08/03/2009, 11:29

Buenas, hoy mismo he empezado con css y me parece la monda para no tener que tocar mucho el html.

Pues tengo 4 imagenes

1: Top
2: Margen izquierdo
3: Margen derecho
4: Abajo del todo

Como las integro en el css en la div? Esque ando medio liado y no se como hacerlo xDD

Otra duda:

el css está dividido en Cabezera, navegacion ( izquierda ) noticias ( centro ) publi ( derecho )

Pues quiero que en navegacion hacer un cuadro de navegacion con las imagenes que quiero pero con un poco de espacio hacer otro cuadro que ponga pues navegacion no se que.

Es decir que en Navegacion hayan dos cuadros con las imagenes que dije pero que entre los dos cuadros pueda elegir la separación es decir

1 div = Navegacion
2 div = Navegacion 2

Todo en la izquierda del todo como lo hago?

Saludos

marcosnc_08 · #2 (**permalink**) 08/03/2009, 12:11

Cita:

Como las integro en el css en la div? Esque ando medio liado y no se como hacerlo xDD

Bueno, las imagenes podes integrarlas de dos formas.

1º: En las propiedades css del div pones

Código:

background-image: (y aca la url de la imagen)

2º: en el div, insertas la imagen con el correspondiente codigo html

Código:

<img src="direccion de la imagen" width="300" height="150" />

Cita:

Pues quiero que en navegacion hacer un cuadro de navegacion con las imagenes que quiero pero con un poco de espacio hacer otro cuadro que ponga pues navegacion no se que.

Es decir que en Navegacion hayan dos cuadros con las imagenes que dije pero que entre los dos cuadros pueda elegir la separación es decir

1 div = Navegacion
2 div = Navegacion 2

Todo en la izquierda del todo como lo hago?

codigo html:

Código:

<div id="navegacion">
<div id="navegacion1"></div>
<div id="navegacion2"></div>
</div>

codigo css:

Código:

#navegacion {
float: left
}

Saludos, aber si te sirve.

Apeaux · #3 (**permalink**) 08/03/2009, 12:16

Genialll me sirvió, pero lo de las imagenes no me entendistes.

Tengo una imagen donde pone Futbol por ejemplo AL lado una imagen de un borde a la izquierda de esa caja de navegacion otra imagen ( borde ) y abajo del todo una imagen que hace de borde, como hago esO?

Saludos

Apeaux · #4 (**permalink**) 08/03/2009, 12:27

Perdonen por doble post.
Espero que me respondan la pregunta de arriba y esta también:

Tengo dos menus de navegacion a la izquierda:
Uno futbol arriba margenes con imagen a ambos lados y abajo un margen en imagen.

La cosa esque cuando pongo padding bottom me lo colorea dle color de fondo de la div y eso no quiero.
COmo lo hago? saludos

Ah y por ejemplo:
Tengo el borde en mi imagen y mide 1px como hago que se repita hasta llenar la div?

Saludos

marcosnc_08 · #5 (**permalink**) 08/03/2009, 12:33

Cita:

Iniciado por Apeaux

Perdonen por doble post.
Espero que me respondan la pregunta de arriba y esta también:

Tengo dos menus de navegacion a la izquierda:
Uno futbol arriba margenes con imagen a ambos lados y abajo un margen en imagen.

La cosa esque cuando pongo padding bottom me lo colorea dle color de fondo de la div y eso no quiero.
COmo lo hago? saludos

Te sugiero que abras el Paint, o cualquier creador de dibujos y pongas la forma en que quieres posicionar los elementos. Es muy dificil entenderte en el aire.

Apeaux · #6 (**permalink**) 08/03/2009, 12:55

A ver si me entendeis:

Lo que indica ya lo tengo con el codigo background:url (link) top no repeat o algo asin.
Pero no se poner que el borde izquierdo y derecho se alineen y se repitan hasta llenar la capa y si pongo un link no tenga ka grandar el borde sino que se haga el solito.

Saludos

marcosnc_08 · #7 (**permalink**) 08/03/2009, 13:10

Que yo sepa los bordes no se pueden repetir para llenar la capa. Si lo que queres es que la capa tenga un fondo negro tenes que usar la siguente propiedad:

Código:

background-color: (color en hexadecimal, rgb, etc)

Apeaux · #8 (**permalink**) 08/03/2009, 13:23

Osea, no puedo repetir un pixel que haga de borde?
Ni poner una imagen que acabe al final cerrando la navegacion?

He visto algunas webs que te llevan a un sitio que pone box.gif
es extraño pero se agrandan etc... es raro.

marcosnc_08 · #9 (**permalink**) 08/03/2009, 13:25

Cita:

Iniciado por Apeaux

Osea, no puedo repetir un pixel que haga de borde?
Ni poner una imagen que acabe al final cerrando la navegacion?

He visto algunas webs que te llevan a un sitio que pone box.gif
es extraño pero se agrandan etc... es raro.

Si lo que queres es darle un fondo de color a un div, tenes que usar la propiedad que te di antes.

Veo que no conoces las propiedades basicas. ¿donde estas aprediendo?

Te dejo este link que te va a ser util. Propiedades de CSS 2.1

Apeaux · #10 (**permalink**) 08/03/2009, 13:32

Dios, veo que no sabes leer.
Quiero que el TOP de mi DIV sea una imagen.
Que el BOTTOM de mi DIV sea una imagen.

Comprendes ahora?

jomaruro · #11 (**permalink**) 08/03/2009, 16:57

Cita:

Iniciado por Apeaux

Dios, veo que no sabes leer.
Quiero que el TOP de mi DIV sea una imagen.
Que el BOTTOM de mi DIV sea una imagen.

Comprendes ahora?

Hola:

Deberías tener un poquito de paciencia, a veces no es fácil enterder una duda y otras no es tan fácil explicarlo.

Deberías empezar por leerte este manual (es gratuito) y tenerlo a mano. Practica con los ejemplos y entenderás un poquito mejor el CSS.

Date también una vuelta por esta página, es de Mikmoro, encontrarás muchos ejemplos CSS que podrás aplicar a cualquier página.

Saludos.

Dalvenjha · #12 (**permalink**) 09/03/2009, 11:04

Apeux, un poco de educación para con los que intentan ayudarte no estaría de más no?

Te aseguro que Marcos ni más te ayuda.

Saludos!

marcosnc_08 · #13 (**permalink**) 09/03/2009, 12:03

Bueno, la verdad que no le habia dado mucha importancia a la respuesta.

Solo una cosa: yo intento ayudarte, si no te entiendo, primero, fijate si te sabes expresar correctamente. Nada mas.

Chau. Gracias a Jomaruro y Dalvenjha.

Apeaux · #14 (**permalink**) 09/03/2009, 13:15

Bueno perdonar por la respuesta pero yo creia que estava bastante explicado. Además no fue de mala intención ya que dijo veo que no sabes los conocimientos basicos. Pues yo le digo veo que no sabes leer x'D

Saludos y gracias

marcosnc_08 · #15 (**permalink**) 09/03/2009, 13:25

Esta bien, yo te lo preguntaba en serio, no agrecivamente.

jomaruro · #16 (**permalink**) 09/03/2009, 16:26

Hola:

A ver si te sirve este ejemplo:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Fixed Width Rounded Corner Box</title>
<style type="text/css">
<!--
/* pretty stuff
================================== */

body {
  font: 62.5%/1.6 "Gill Sans", Futura, "Lucida Grande", Geneva, sans-serif;
  color: #666;
  background: #fff;
}

h2 {
  font-size: 2.2em;
  font-weight: normal;
  line-height: 1;
  color: #94b767;
  margin: 0;
}

.box {
  font-size: 2em;
}

/* caja de esquinas redondas
================================== */

.box {
  width: 424px;
  background: url(images/tile2.gif) repeat-y;
}

.box h2 {
  background: url(images/top2.gif) no-repeat left top;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.box .last {
  background: url(images/bottom2.gif) no-repeat left bottom;
  padding-bottom: 20px;
}

.box p {
  padding-left: 20px;
  padding-right: 20px;
}

-->
</style>
</head>

<body>
<div class="box">
  <h2>Lorem Ipsum</h2>
  <p class="last">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin venenatis turpis ut quam. In dolor. Nam ultrices nisl sollicitudin sapien. Ut lacinia aliquet ante.</p>

</div>
</body>
</html>

Las imágenes son:

tile2.gif =====> Borde lateral.
top2.gif ====> La cabecera.
bottom2.gif => El pie.

Si juegas con este codigo y tus imágenes conseguirás lo que quieres.

Saludos.