Entrar

barra de navegacion

el_gustragos · · Solicitar retirada
hola que tal ya termine el curso paso a paso pero quiero hacer una barra de navegacion pero en el curso no queda muy claro el como hacerla, entiendo q son como estilo botones con div pero no me queda muy claro si alguien pudiera darme una asesorada gracias
el_gustragos · · Solicitar retirada
gracias yanet tu siempre salvandome jiji una ultima pregunta width es para darle el margen o rango de lo ancho, como se escribe para q sea a lo largo

gracias
Yaneth · · Solicitar retirada
para el ancho es width

ejemplo

<div id="menu">


estilo

#menu {width:300px}

saludos
el_gustragos · · Solicitar retirada
ok eso me manda el menu hacia abajo

inicio
historia
contacto

pero si quiero asi

inicio historia contacto

logicamente le voy a poner bordes y somreados pero quiero q queden uniformemente

saludos
Yaneth · · Solicitar retirada
no tiene por que

mira yo lo pongo en linea

pero no uso (ul) (li)

mas bien lo pongo como texto

<div id="menu">


Inicio|
Nosotros|
Servicios|
Ubicanos</p>
</div>

estilo
#menu {width:800px; text-align:center}

tal vez te lo puso hacia abajo por el ancho de la div (300px)

recuerda que lo que no cabe, lo pasa para abajo



:wink:

saludos
el_gustragos · · Solicitar retirada
este es el codigo q puse para q me saliera la navegacion en linea pero sigue saliendo hacia abajo

<div id="navegacion">
<div id="menu">


Inicio|
Historia|
Productos|
Contacto</p>
</div>
Yaneth · · Solicitar retirada
por lo que veo

tienes una div, llamada navegación
dentro de ella una div llamda menu

que ancho tiene la div llamada navegación?
que ancho tiene la div llamada menu?

porque si la div que se llama menu, le pones un ancho de 800px

pero a la div llamada navegación le pones un ancho menor,

pues no la contiene, y por eso se va hacia abajo

??????

dame mas detalles por favor

saludos
el_gustragos · · Solicitar retirada
navegacion no tiene ningun ancho solo lo tengo por el color de fondo,

mmm pues en estilo guarde el menu igual q me dijiste y pues la barra igaul q la pasaste
Yaneth · · Solicitar retirada
pues no se que es lo que pasa

lo unico que se me ocurre es que afecte el ancho

intentalo asi:



<div id="navegacion">


Inicio|
Historia|
Productos|
Contacto</p>
</div>

y dime que pasa

saludos
el_gustragos · · Solicitar retirada
este es el contenido de estilos
* {margin:0px;padding:0px;border:0px}
body {text-align: center}
#global {width:1000px ; margin: 4px auto }
#cabecera {}
#navegacion {background-color:#20b2aa;border:red 1px solid}
#contenido {}
#pie {background-color:#20b2aa}
a{color:brown; text-decoration:none; display:block}
a:link{}
a:visited{}
a:hover{color:green;text-decoration:none;background-color:silver}
a:active{}
p{text-align:justify}
h1 {font-family:monotype corsiva,arial;text-decoration: none ; text-align: center}
h2 {font-size: 1.1em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}

y esto en htlm
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tequila DelBueno De La Buena Tierra Del Agave</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<LINK rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div id="global">
<div id="cabecera">
[contenido no disponible]
</div>
<div id="navegacion">


Inicio|Historia|
Productos|
Contacto</p>
</div>
</div>
<div id="contenido">
<h1>Esta será la zona principal de la web</h1>


Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo</h2>

. En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>


</div>
<div id="pie">Servicio Comercial DelBueno S.A. de C.V. Guadalajara,Jalisco, Mex.</div>
</div>
</body>
</html>
Yaneth · · Solicitar retirada
Hola de nuevo

Copie tu codigo en mi pc
para hacer pruebas

y creo que esto es el problema

a{color:brown; text-decoration:none; display:block}
a:link{}
a:visited{}
a:hover{color:green;text-decoration:none;background-color:silver}
a:active{}

quitale esto: "display:block"

y debe arreglarse eso

saludos
el_gustragos · · Solicitar retirada
oyes ya jiji te debo ya muchas y pues aprovechando tu cordial amabilidad pues ya quedo ese del menu de navegacion como puedo hacerle para q queden justificados o vamos si la barra de navegacion mide 800 q tengo q hacer muchos div de 200px para q queden esparcidos por toda la barra

buena gracias de nuevo señorita yanet y estamos en deuda
Yaneth · · Solicitar retirada
mmm
aqui ya o entendí

aclarame por favor

como que quieres hacer muchos divs de 200px?

como cuantos?

perdon, pero dime exactamente que es lo que deseas

porque aunque me gustaría
no tengo dotes de adivina
(esto ultimo es broma)
jejej


saludos
Yaneth · · Solicitar retirada
mira una forma muy sencilla es hacer
tu barra de navegación en photoshop (por ejemplo)

haces un layer de 800px de largo y de ancho pues no se ahi tu le calculas

en ese layer, le pones todos los moños que quieres que tenga tu barra

sombras relieves, tercera dimencion etc, etc, etc,

luego lo guardas como imagen con extencion .jpg en tu carpeta de objetos

luego en la barra de navegación lo insertas como fondo, y listo,

espero haberme explicado bien

pd, seguro que hay muchas otras formas de hacer lo que quieres esto es solo una opción

saludos
el_gustragos · · Solicitar retirada
oyes ya muchas gracias por la ayuda es q sabes q yo apenas estoy incursionando en esto y pues no se usar el photoshop apenas lo estoy navegando, oyes lo q te decia ayer pues el menu si la barra de navegacion si me quedo en el mismo renglon pero lo q pasa es q me quedo todo junto: inicio|Historia|productos|contactos, todo pegado a la izquierda y pues queda un espaciote del lado derecho entopnces yop quiero q todo quede vamos justificado q ocupen toda la barra de navegacion uniformemente

jiji espero haberme dado a entender jiji y yo si q si eres adivina yaneth jaja(broma broma)
Yaneth · · Solicitar retirada
ajajjajajja

a ok

se que hay una orden pero como no la he usado jejeje

es algo como esto:
text-align: center (para centrar verdad?)

text-align: justify (para justificar?)

checalo y me avisas

ejjeje
el_gustragos · · Solicitar retirada
este es el codigo
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Tequila DelBueno De La Buena Tierra Del Agave</title>
<link rel="stylesheet" href="estilo.css" type="text/css" media="all">
<LINK rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div id="global">
<div id="cabecera">
[contenido no disponible]
</div>
<div id="navegacion">
<div id="sub1">Inicio|</div>
<div id="sub2">Historia|</div>
<div id="sub3">Productos|</div>
<div id="sub4">Contacto</div>
</div>
</div>
<div id="contenido">
<h1>Esta será la zona principal de la web</h1>


Este es mi segundo párrafo. Acabo de poner un punto y en cambio sigue siendo un párrafo pues no le he colocado aún la etiqueta de cierre. Voy a ponersela justo aquí.</p>
<h2>Y este es el tercer párrafo</h2>

. En pocas lecciones aprenderé a darle margenes para separarlos unos de otros, e incluso hacerles sanguias por la izquierda a la primera línea, que queda mucho mejor.</p>


Anda, fijate! Salen todos centrados, que cosa. Espero que Jorgens nos enseñe a ponerlos alineados a la izquierda, o justificados. Así esto parece una poesia! je je je.</p>


</div>
<div id="pie">Servicio Comercial DelBueno S.A. de C.V. Guadalajara,Jalisco, Mex.</div>
</div>
</body>
</html>

y el estilo
* {margin:0px;padding:0px;border:0px}
body {text-align: center}
#global {width:1000px ; margin: 4px auto }
#cabecera {}
#navegacion {width:800;background-color:#20b2aa;border:red 1px solid;float:center;text-alig:center}
#sub1{width:180;text-align:center;float:left}
#sub2{width:180;text-align:center;float:left}
#sub3{width:180;text-align:center;float:left}
#sub4{width:180;text-align:center;float:left}
#contenido {}
#pie {background-color:#20b2aa}
a{color:red; text-decoration:none;}
a:link{}
a:visited{}
a:hover{color:green;text-decoration:none;background-color:silver}
a:active{}
p{text-align:justify}
h1 {font-family:monotype corsiva,arial;text-decoration: none ; text-align: center}
h2 {font-size: 1.1em; color:black ; font-weight: bold ; text-decoration: none ; text-align: center}
Yaneth · · Solicitar retirada
disculpame peeeero

???????????????????

ya vi tu codigo

pero por favor, ¡¡¡¡¡dime que quieres que le revise!!!!


saludos
el_gustragos · · Solicitar retirada
es q fijate ya me lo separa mas espaciado pero no me centra no se puedas checar los sub1 2 3 y 4 y pues haber

jiji sorry es q me crei lo de adivina